CSS Components and Styleguide

Cards

A card looks like...

<card>
     <header>
     <body>
     <footer>

The header and footer are optional. Use the grid to display multiple cards.

Example
I am the Doctor!

Pure mathematics can not lie! Come on! Don't be lasagna.

They're screwdrivers! What are you going to do? Assemble a cabinet at them? Let's go in!

Planets come and go. Stars perish. Matter disperses, coalesces, forms into other patterns, other worlds.

Markup: components/cards/cards.html
                    <article class="card ">
    <header class="card__head">I am the Doctor!</header>
    <div class="card__body">
        <p>Pure mathematics can not lie! Come on! Don't be lasagna.</p>
        <p>
            They're screwdrivers! What are you going to do?
            Assemble a cabinet at them? Let's go in!
        </p>
        <p>
            Planets come and go. Stars perish.
            Matter disperses, coalesces, forms into other patterns, other worlds.
        </p>
    </div>
    <footer class="card__foot">
        <button class="button button--light">I'm on fire!</button>
    </footer>
</article>

                  
Source: components/cards/cards.scss, line 1