EvoToolkit - v3.7.2 (Changelog)

Card

These are various examples of Card patterns, which are very common in web design, having been made popular in frameworks such as Bootstrap.

Source

Contributors

Luke Harrison

Base

Example 1

Cat

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="c-box-light c-box--rounded c-box--shadow c-box--border c-box--hide-overflow u-width-10/12@sm2 u-width-8/12@md">
	<img src="/static/img/cat2-efdd13430c.jpg" alt="Cat" class="u-width-full">
	<div class="o-box u-p-small u-p-regular@md">
		<h1 class="c-type-charlie u-mb-micro">Card title</h1>
		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	</div>
	<div class="o-box u-p-small c-box c-box--border-top">
		<div class="u-align-center">
			<a href="/" class="c-button c-button--small u-mr-micro">Apply Now</a>
			<a href="/" class="c-button c-button--small c-button--secondary">Read More</a>
		</div>
	</div>
</div>

Example 2

List of Killers

  • Fluffles
  • Sir Meow
  • Percy
Cat
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cat
Aliquam nulla enim, consectetur vel luctus luctus, pulvinar a ligula.
Cat
Ut ac sem fermentum risus pulvinar vehicula.
<div class="c-box-light c-box--shadow c-box--rounded c-box--hide-overflow">
	<div class="o-box u-p-small c-box--border c-box--rounded-top u-theme-pop u-text-very-light">
		<h1 class="c-type-delta u-align-center">List of Killers</h1>
	</div>
	<div class="o-box u-ph-small u-pt-small c-box c-box--border-vertical c-box--border-bottom">
		<div class="c-tabs c-tabs--full-width c-box__tabs c-tabs--collapse@max-md" data-tabs="js-tabs-content">
			<ul class="o-layout o-layout--flush o-layout--fit-height c-tabs__layout">
				<li class="o-layout__item c-tabs__item is-active" tabindex="0"><div class="c-tabs__item-inner">Fluffles</div></li>
				<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Sir Meow</div></li>
				<li class="o-layout__item c-tabs__item u-mb-small u-mb-none@md" tabindex="0"><div class="c-tabs__item-inner">Percy</div></li>
			</ul>
		</div>
	</div>
	<div class="c-box-light c-box--border-vertical c-box--border-bottom c-box--rounded-bottom">
		<div class="c-tabs__content js-tabs-content">
			<div class="c-tabs__content-item is-active">
				<figure class="o-box u-p-small">
					<img src="/static/img/cat3-a11790409f.jpg" alt="Cat" class="c-box c-box--border-vertical c-box--border-top u-width-full u-theme-medium">
					<figcaption class="o-box u-p-micro u-text-very-light u-theme-very-dark c-type-smallprint u-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption> 
				</figure>
			</div>
			<div class="c-tabs__content-item">
				<figure class="o-box u-p-small">
					<img src="/static/img/cat4-9d806b5c92.jpg" alt="Cat" class="c-box c-box--border-vertical c-box--border-top u-width-full u-theme-medium">
					<figcaption class="o-box u-p-micro u-text-very-light u-theme-very-dark c-type-smallprint u-align-center">Aliquam nulla enim, consectetur vel luctus luctus, pulvinar a ligula.</figcaption> 
				</figure>
			</div>
			<div class="c-tabs__content-item">
				<figure class="o-box u-p-small">
					<img src="/static/img/cat5-81b8f86679.jpg" alt="Cat" class="c-box c-box--border-vertical c-box--border-top u-width-full u-theme-medium">
					<figcaption class="o-box u-p-micro u-text-very-light u-theme-very-dark c-type-smallprint u-align-center">Ut ac sem fermentum risus pulvinar vehicula.</figcaption> 
				</figure>
			</div>
		</div>
	</div>
</div>

Example 3

Cat

Quisque pulvinar purus et orci tincidunt, ut scelerisque felis tristique.

More info
<div class="c-box c-box--border c-box--shadow c-box--rounded c-box--hide-overflow">
	<div class="o-layout o-layout--flush o-layout--fit-height">
		<div class="o-layout__item u-width-12/12 u-width-auto@sm3">
			<img src="/static/img/cat4-9d806b5c92.jpg" alt="Cat" class="u-width-full o-layout__fill">
		</div>
		<div class="o-layout__item u-width-12/12 u-width-8/12@sm3">
			<div class="o-box u-p-small">
				<div class="o-box u-p-small c-box-light c-box--border c-box--rounded">
					<p>Quisque pulvinar purus et orci tincidunt, ut scelerisque felis tristique.</p>
					
					<a href="/" class="c-type-link">
						<div class="o-media">
							<div class="o-media__body u-pr-micro">
								More info
							</div>
							<div class="o-media__image">
								<svg class="o-icon-tiny o-icon--flip-3/4"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow"></use></svg>
							</div>
						</div>
					</a>

				</div>
			</div>
		</div>
	</div>
</div>

Example 4

Business Cat

Mr Whiskers2nd

Department of Pest Control

234

Cases Closed

£15k

Revenue

541

Mice Caught

Summary

Enthusiasm
Efficiency
Mouse Catching Skills
<div class="c-box-light c-box--shadow c-box--border c-box--hide-overflow u-width-10/12@md">
	<div class="o-box u-p-small u-align-center u-theme-very-light">
		<img class="c-box c-box--border c-box--circular c-box--shadow u-mb-small" src="/static/img/cat7-c4568c9dcd.jpg" alt="Business Cat">
		<h1 class="c-type-charlie">Mr Whiskers<span class="c-badge c-badge--small">2nd</span></h1>
		<p class="c-type-smallprint">Department of Pest Control</p>
	</div>
	<div class="o-layout o-layout--flush">
		<div class="o-layout__item u-width-12/12 u-width-4/12@md">
			<div class="o-box u-p-small c-box-light c-box--border-right c-box--border-top">
				<p class="c-type-bravo u-align-center c-type--bold u-mb-micro">234</p>
				<p class="c-type-smallprint u-flex-center-all"><span class="u-mr-micro">Cases Closed</span><svg class="o-icon-tiny o-icon--flip u-theme-positive"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow-fill"></use></svg></p>
			</div>
		</div>
		<div class="o-layout__item u-width-12/12 u-width-4/12@md">
			<div class="o-box u-p-small c-box-light c-box--border-right c-box--border-top">
				<p class="c-type-bravo u-align-center c-type--bold u-mb-micro">&pound;15k</p>
				<p class="c-type-smallprint u-flex-center-all"><span class="u-mr-micro">Revenue</span><svg class="o-icon-tiny o-icon--flip u-theme-positive"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow-fill"></use></svg></p>
			</div>
		</div>
		<div class="o-layout__item u-width-12/12 u-width-4/12@md">
			<div class="o-box u-p-small c-box-light c-box--border-top">
				<p class="c-type-bravo u-align-center c-type--bold u-mb-micro">541</p>
				<p class="c-type-smallprint u-flex-center-all"><span class="u-mr-micro">Mice Caught</span><svg class="o-icon-tiny u-theme-negative"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#arrow-fill"></use></svg></p>
			</div>
		</div>
	</div>
	<div class="o-box u-p-small c-box c-box--border-top u-align-center">
		<h2 class="c-type-delta">Summary</h2>
	</div>
	<div class="o-box u-p-small c-box-light c-box--border-top u-flex-middle">
		<span class="u-width-grow">Enthusiasm</span>
		<svg class="o-icon-small u-theme-caution u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-caution u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-caution u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-medium u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-medium"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
	</div>
	<div class="o-box u-p-small c-box-light c-box--border-top u-flex-middle">
		<span class="u-width-grow">Efficiency</span>
		<svg class="o-icon-small u-theme-negative u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-negative u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-medium u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-medium u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-medium"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
	</div>
	<div class="o-box u-p-small c-box-light c-box--border-top u-flex-middle">
		<span class="u-width-grow">Mouse Catching Skills</span>
		<svg class="o-icon-small u-theme-positive u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-positive u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-positive u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-positive u-mr-micro"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
		<svg class="o-icon-small u-theme-positive"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#star"></use></svg>
	</div>
	<div class="o-box u-p-small c-box c-box--border-horizontal">
		<div class="u-align-center">
			<a href="/" class="c-button u-mr-micro">Send Report</a>
		</div>
	</div>
</div>