Card

Cards are a concise and scannable grouping of information, used as an entry point to more detailed content. Spirit cards come in various types and sizes, and can be used in many contexts. They are laid out in analogous decks, using a card grid.

Anatomy

Anatomy of a card

Title and Action are the only required elements.

Image

Helps differentiate cards and supports a card’s title. Use a 16:9 aspect ratio and keep the photo’s subject in the vertical and horizontal center of the frame. Some CSS cropping may occur at certain viewport sizes.

Title

Briefly summarizes the content.

Description

Optionally provides additional text to clarify or establish the content. Should not contain formatting or links. Avoid using a description when the title is sufficiently obvious.

Action

Accommodates a single action, typically a link to more detailed information. Visually, all actions in a row are vertically aligned.

Just Diagnosed? Start Here

Adjusting to life with T1D isn’t always easy, but we’re here to help. Find everything you need to establish your new normal.

Learn More

This example is scaled for a 3-card row.

Code Copied

Copy Code

<a href="#" class="spirit-card" aria-label="Just Diagnosed? Start Here">
    <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
        <span class="spirit-image__image-wrap ">
            <img class="spirit-image__image" src="/images/card/diagnosed.jpg" alt="JDRF Walkers">
        </span>
    </figure>
    <span class="spirit-card__text">
        <h3 class="spirit-card__title">Just Diagnosed? Start Here</h3>
        <p class="spirit-card__body">Adjusting to life with T1D isn’t always easy, but we’re here to help. Find everything you need to establish your new normal.</p>
        <span class="spirit-card__cta">
            <span class="spirit-card__link">Learn More</span>
        </span>
    </span>
</a>

Text Only

Text only cards are used when the textual content should be the initial focal point for a user’s attention. They are made up of a title, a description and a call to action.

Just Diagnosed? Start Here

Adjusting to life with T1D isn’t always easy, but we’re here to help. Find everything you need to establish your new normal.

Learn More

This example is scaled for a 3-card row.

Code Copied

Copy Code

<a href="#" class="spirit-card" aria-label="Just Diagnosed? Start Here">
    <span class="spirit-card__text">
        <h3 class="spirit-card__title">Just Diagnosed? Start Here</h3>
        <p class="spirit-card__body">Adjusting to life with T1D isn’t always easy, but we’re here to help. Find everything you need to establish your new normal.</p>
        <span class="spirit-card__cta">
            <span class="spirit-card__link">Learn More</span>
        </span>
    </span>
</a>

Sizes

Cards can be scaled according to the total amount of cards, resulting in 2-4 columns and 1 or many rows. Text and images scale with the overall card and are not independently configurable. The height of the cards in a row is determined by the tallest card’s height. The default card size (medium) is recommended for most situations.

Small

Living With T1D

Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.

Learn More

This example is scaled for a 4-card row.

Code Copied

Copy Code

<a href="#" class="spirit-card spirit-card--small" aria-label="Living With T1D">
    <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
        <span class="spirit-image__image-wrap ">
            <img class="spirit-image__image" src="/images/card/living_with.jpg" alt="JDRF Walkers">
        </span>
    </figure>
    <span class="spirit-card__text">
        <h3 class="spirit-card__title">Living With T1D</h3>
        <p class="spirit-card__body">Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.</p>
        <span class="spirit-card__cta">
            <span class="spirit-card__link">Learn More</span>
        </span>
    </span>
</a>

Medium (default)

Living With T1D

Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.

Learn More

This example is scaled for a 3-card row.

Code Copied

Copy Code

<a href="#" class="spirit-card spirit-card--medium" aria-label="Living With T1D">
    <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
        <span class="spirit-image__image-wrap ">
            <img class="spirit-image__image" src="/images/card/living_with.jpg" alt="JDRF Walkers">
        </span>
    </figure>
    <span class="spirit-card__text">
        <h3 class="spirit-card__title">Living With T1D</h3>
        <p class="spirit-card__body">Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.</p>
        <span class="spirit-card__cta">
            <span class="spirit-card__link">Learn More</span>
        </span>
    </span>
</a>

Large

Living With T1D

Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.

Learn More

This example is scaled for a 2-card row.

Code Copied

Copy Code

<a href="#" class="spirit-card spirit-card--large" aria-label="Living With T1D">
    <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
        <span class="spirit-image__image-wrap ">
            <img class="spirit-image__image" src="/images/card/living_with.jpg" alt="JDRF Walkers">
        </span>
    </figure>
    <span class="spirit-card__text">
        <h3 class="spirit-card__title">Living With T1D</h3>
        <p class="spirit-card__body">Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.</p>
        <span class="spirit-card__cta">
            <span class="spirit-card__link">Learn More</span>
        </span>
    </span>
</a>

Card Grid

Cards are arranged in a grid with consistent card heights in each row. They are ordered from left to right, with the first card positioned at the top left. The number of cards per row is determined by the size of the cards and adapts to the available screen real estate (up to 4 on larger screens, and down to 1 on smaller screens).

Card grid preview with six cards in rows of three

The example above is an image. View a full-screen preview of card grid.

Code Copied

Copy Code

<div class="spirit-card-grid spirit-card-grid--3-up">
    <a href="#" class="spirit-card" aria-label="Just Diagnosed? Start Here">
        <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
            <span class="spirit-image__image-wrap ">
                <img class="spirit-image__image" src="/images/card/diagnosed.jpg" alt="JDRF Walkers">
            </span>
        </figure>
        <span class="spirit-card__text">
            <h3 class="spirit-card__title">Just Diagnosed? Start Here</h3>
            <p class="spirit-card__body">Adjusting to life with T1D isn’t always easy, but we’re here to help. Find everything you need to establish your new normal.</p>
            <span class="spirit-card__cta">
                <span class="spirit-card__link">Learn More</span>
            </span>
        </span>
    </a>
    <a href="#" class="spirit-card" aria-label="T1D Basics">
        <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
            <span class="spirit-image__image-wrap ">
                <img class="spirit-image__image" src="/images/card/basics.jpg" alt="JDRF Walkers">
            </span>
        </figure>
        <span class="spirit-card__text">
            <h3 class="spirit-card__title">T1D Basics</h3>
            <p class="spirit-card__body">Learn what causes T1D, how it affects the body, what treatments are available, and how to find health insurance to help pay for care.</p>
            <span class="spirit-card__cta">
                <span class="spirit-card__link">Learn More</span>
            </span>
        </span>
    </a>
    <a href="#" class="spirit-card" aria-label="Living With T1D">
        <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
            <span class="spirit-image__image-wrap ">
                <img class="spirit-image__image" src="/images/card/living_with.jpg" alt="JDRF Walkers">
            </span>
        </figure>
        <span class="spirit-card__text">
            <h3 class="spirit-card__title">Living With T1D</h3>
            <p class="spirit-card__body">Get practical tips for dealing with T1D at all ages. Topics include nutrition, driving safety, and how to stay healthy while away at school or on vacation.</p>
            <span class="spirit-card__cta">
                <span class="spirit-card__link">Learn More</span>
            </span>
        </span>
    </a>
    <a href="#" class="spirit-card" aria-label="Technology">
        <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
            <span class="spirit-image__image-wrap ">
                <img class="spirit-image__image" src="/images/card/technology.jpg" alt="JDRF Walkers">
            </span>
        </figure>
        <span class="spirit-card__text">
            <h3 class="spirit-card__title">Technology</h3>
            <p class="spirit-card__body">Find out the latest on the T1D tech that helps you stay healthier.</p>
            <span class="spirit-card__cta">
                <span class="spirit-card__link">Learn More</span>
            </span>
        </span>
    </a>
    <a href="#" class="spirit-card" aria-label="For Healthcare Professionals">
        <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
            <span class="spirit-image__image-wrap ">
                <img class="spirit-image__image" src="/images/card/peak.jpg" alt="JDRF Walkers">
            </span>
        </figure>
        <span class="spirit-card__text">
            <h3 class="spirit-card__title">For Healthcare Professionals</h3>
            <p class="spirit-card__body">The JDRF PEAK program explores the environmental, dietary, physiological and psychological elements that impact physical activity in people with type 1 diabetes.</p>
            <span class="spirit-card__cta">
                <span class="spirit-card__link">Learn More</span>
            </span>
        </span>
    </a>
    <a href="#" class="spirit-card" aria-label="Recursos en Español">
        <figure class="spirit-image" itemprop="image" itemtype="http://schema.org/ImageObject">
            <span class="spirit-image__image-wrap ">
                <img class="spirit-image__image" src="/images/card/spanish.jpg" alt="JDRF Walkers">
            </span>
        </figure>
        <span class="spirit-card__text">
            <h3 class="spirit-card__title">Recursos en Español</h3>
            <p class="spirit-card__body">Ya sea que necesite asesoramiento de alguien que haya estado allí o que esté buscando herramientas educativas para ayudarlo a usted o a su ser querido a manejar la enfermedad, la JDRF está aquí para ayudarle.</p>
            <span class="spirit-card__cta">
                <span class="spirit-card__link">Aprende Más</span>
            </span>
        </span>
    </a>
    <!-- These placeholder items prevent any orphaned cards in the last row from stretching to fill the available space -->
    <div class="spirit-card-grid__placeholder"></div>
    <div class="spirit-card-grid__placeholder"></div>
</div>

As in this example, include two invisible placeholder cards to prevent the card grid from stretching orphaned cards unpredictably.

Responsive Layouts

Cards can be presented in various ways on extra small screens: stacked (default), as a list, or in a carousel.

Stacked

By default, cards stack into one column. Anatomy of a card

List

Cards can be shown in a list view to make comparisons across cards easier on small screens. Anatomy of a card

Carousel

Cards can be displayed in a carousel when the content of each card is unrelated to the others and needs no comparison. Use Spirit’s demonstration-only Javascript as a starting point for wiring up the carousel in your product. Anatomy of a card

Guidelines

Use When

Presenting multiple, easy-to-compare options.

Do not use when

Listing hierarchical or alphabetical options such as people, teams, donors, donations, events, or chapters. Use List.

Visual Language

Use a consistent arrangement of elements for every card in a card deck. For example, if some cards have an image and others don’t, consider using placeholder images or text cards, to keep the cards balanced and consistent.

Editorial

Titles

Make titles concise and scannable.
Set clear expectations about the card’s purpose.
Avoid using punctuation such as periods, commas, or semicolons.

Descriptions

Use full sentences with punctuation.
Do not include multiple paragraphs.

Calls To Action

Keep action labels terse. One or two words is ideal.
Lead with a strong verb that encourages action.

Code Reference

Class	Applies to	Outcome
`.spirit-card--small`	`.spirit-card`	Applies the small size to the card, when not in `spirit-card-grid`.
`.spirit-card--medium`	`.spirit-card`	Applies the (default) medium size to the card, when not in `spirit-card-grid`.
`.spirit-card--large`	`.spirit-card`	Applies the large size to the card, when not in `spirit-card-grid`.
`.spirit-card-grid--carousel`	`.spirit-card-grid`	Converts a card grid to a carousel on small viewports. See the code example above for the full structure. Requires Javascript.
`.spirit-card-grid--list`	`.spirit-card-grid`	Converts a card grid to a list on small viewports.
`.spirit-card-grid__placeholder`	`<div>`	Invisible placeholder cards prevent the card grid from stretching orphaned cards unpredictably. Place two at the end of any card grid.