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
Base
Example 1
<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
<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
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
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">£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>