Cards and Tiles

Cards

Cards are a collection of links that contain at least an image and a headline. They can be used universally throughout the site for multiple content purposes.

One-Line Headline

23 July 2015 | by Name Lastname

Lorem ipsum dolor sit amet, consectetur adipiscing semper. Maecenas nulla lectus, viverra a augue.

Read More
Longer Headline That Needs Two Lines

Lorem ipsum dolor sit amet. Maecenas nulla lectus, viverra a augue.
Headline Only

Notes
Code

Cards can be converted to a slider in mobile view by adding class flexslider--mobile. By default, there are 3 cards per row on desktop view and 1 card per row on mobile view. This can be changed by adding a width class (see Helpers) alongside the card__wrap class.

Titles on headline-only cards can be centered. Otherwise, card titles must be left-aligned.

Standard dimensions for card images: 500 x 238.

<div class="card__container">
    <ul class="slides">
        <li class="card__wrap">
            <div class="card background-off-white">
                <div class="card__image">
                    <a href=""><img src="../images/card-img-1.jpg" alt="Card Image Title" width="368" height="207"></a>
                </div>
                <div class="card__content">
                    <p class="card__headline"><a href="">One-Line Headline</a></p>
                    <div class="card__meta">
                        <span class="card__date">23 July 2015</span>
                        |
                        <span class="card__author"><a href="">by Name Lastname</a></span>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing semper. Maecenas nulla lectus, viverra a augue.</p>
                    <p><a href="" class="btn btn--outline card__btn">Read More</a></p>
                </div>
            </div>
        </li>
        <li class="card__wrap">
            <div class="card background-off-white">
                <div class="card__image">
                    <a href=""><img src="../images/card-img-2.jpg" alt="Card Image Title" width="368" height="207"></a>
                </div>
                <div class="card__content">
                    <p class="card__headline"><a href="">Longer Headline That Needs Two Lines</a></p>
                    <p>Lorem ipsum dolor sit amet. Maecenas nulla lectus, viverra a augue.</p>
                </div>
            </div>
        </li>
        <li class="card__wrap">
            <div class="card background-off-white">
                <div class="card__image">
                    <a href=""><img src="../images/card-img-3.jpg" alt="Card Image Title" width="368" height="207"></a>
                </div>
                <div class="card__content">
                    <p class="card__headline text-center"><a href="">Headline Only</a></p>
                </div>
            </div>
        </li>
    </ul>
</div>

Icon Cards

Label

Notes
Code

Icon cards use a simple grid layout along with class card-icons.

Icon images must have square dimensions (minimum 300 x 300). Apply class img-circle to <img> for circle shape. If the custom icons have a transparent background, you can change the background color using class [color name]-bg.

The label link is a <p> with class h5.

<div class="grid-x grid-margin-x grid-margin-y card-icons">
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
    <div class="cell small-6 medium-3 text-center">
        <a href="">
            <p><img class="img-circle cerulean-bg" src="/images/icon-custom-sample.png" width="150" height="150"></p>
            <p class="h5">Label</p>
        </a>
    </div>
</div>

Tiles

Tiles are cards without images.

Headline Only

For tiles that only consist of a headline, add class l-flex-center alongside class card to center the headline vertically and horizontally.

Alternate Style

One-Line Headline
A Longer Headline that Spans Multiple Lines
One-Line Headline

Headline with Description

Tiles can include a description below the headline.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="card__container">
    <ul class="slides">
        <li class="card__wrap">
            <div class="card background--off-white l-padding-ad">
                <p class="text-accent"><strong><a href="">Headline</a></strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
            </div>
        </li>
        <li class="card__wrap">
            <div class="card background--off-white l-padding-ad">
                <p class="text-accent"><strong><a href="">Headline</a></strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>
        <li class="card__wrap">
            <div class="card background--off-white l-padding-ad">
                <p class="text-accent"><strong><a href="">Headline</a></strong></p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </li>
    </ul>
</div>