EvoToolkit - v2.3.0 (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 o-box--spacing-small o-box--spacing-regular@md"> <h1 class="c-type-charlie u-margin-bottom-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 o-box--spacing-small c-box c-box--border-top"> <div class="u-align-center"> <a href="/" class="c-button c-button--small u-margin-right-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 o-box--spacing-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 o-box--spacing-small o-box--spacing-disable-bottom 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-margin-bottom-small u-margin-bottom-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 o-box--spacing-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 o-box--spacing-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 o-box--spacing-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 o-box--spacing-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 o-box--spacing-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 o-box--spacing-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 o-box--spacing-small"> <div class="o-box o-box--spacing-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 o-media--spacing-micro o-media--reverse"> <div class="o-media__body"> More info </div> <div class="o-media__image"> <svg class="o-icon-tiny o-icon--flip-3/4"><use xlink:href="#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 o-box--spacing-small u-align-center u-theme-very-light"> <img class="c-box c-box--border c-box--circular c-box--shadow u-margin-bottom-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 o-box--spacing-small c-box-light c-box--border-right c-box--border-top"> <p class="c-type-bravo u-align-center c-type--bold u-margin-bottom-micro">234</p> <p class="c-type-smallprint u-flex-center-all"><span class="u-margin-right-micro">Cases Closed</span><svg class="o-icon-tiny o-icon--flip u-theme-positive"><use xlink:href="#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 o-box--spacing-small c-box-light c-box--border-right c-box--border-top"> <p class="c-type-bravo u-align-center c-type--bold u-margin-bottom-micro">&pound;15k</p> <p class="c-type-smallprint u-flex-center-all"><span class="u-margin-right-micro">Revenue</span><svg class="o-icon-tiny o-icon--flip u-theme-positive"><use xlink:href="#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 o-box--spacing-small c-box-light c-box--border-top"> <p class="c-type-bravo u-align-center c-type--bold u-margin-bottom-micro">541</p> <p class="c-type-smallprint u-flex-center-all"><span class="u-margin-right-micro">Mice Caught</span><svg class="o-icon-tiny u-theme-negative"><use xlink:href="#arrow-fill"></use></svg></p> </div> </div> </div> <div class="o-box o-box--spacing-small c-box c-box--border-top u-align-center"> <h2 class="c-type-delta">Summary</h2> </div> <div class="o-box o-box--spacing-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-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-caution u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-caution u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-medium u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-medium"><use xlink:href="#star"></use></svg> </div> <div class="o-box o-box--spacing-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-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-negative u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-medium u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-medium u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-medium"><use xlink:href="#star"></use></svg> </div> <div class="o-box o-box--spacing-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-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-positive u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-positive u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-positive u-margin-right-micro"><use xlink:href="#star"></use></svg> <svg class="o-icon-small u-theme-positive"><use xlink:href="#star"></use></svg> </div> <div class="o-box o-box--spacing-small c-box c-box--border-horizontal"> <div class="u-align-center"> <a href="/" class="c-button u-margin-right-micro">Send Report</a> </div> </div> </div>