Card

A card is a container for displaying related content in a concise way.

General Guidelines

A card is used when you want to apply a container around a related grouping of information, so users can quickly scan or take action upon the content.

The card should be flat when displaying information that is not clickable, and a drop shadow should be used when the whole container is a clickable item. Cards that can be dragged will be displayed with a dash border and, upon hover the cursor should change to a drag icon.

A card is made up of three sections:

Header (optional)
Body
Footer (optional)

Placement

For layout purposes, when a card has an adjacent card, the first one will provide the margins to provide spacing between them.

Voice and Tone

Headers should be in title case, unless they ask a question. Questions should always be in sentence case.

Grammar and Mechanics

Column headers should be presented in ALL CAPS.
Section headers should be title case.
Content headers should be limited to two or three words.

Usage

Configurations	When
Image cards	When you need to display content in a concise way.
Clickable image cards	Limited information is visible in the container and the user has to click on it for additional details.
Draggable cards	The user is able to rearrange containers.

Do's and Don'ts

Do use cards to group information and content into a container

Do use the drag icon when a card can be dragged and dropped

Don’t use a flat card when a card is clickable

A card is a container for displaying related content in a concise way.

Size and Padding

Card Voice Style

Card ExampleS

A card is a container for displaying related content in a concise way.

Examples

For details on when to use this component, please see the Usage tab.

Variants

The variants of this component are as follows:

Shadow

I am the standard card variation. I look forward to working with you!

<div class="iris-card iris-card--shadow">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Shadow card</h4>
    </div>

    <div class="iris-card__content">
        I am the standard card variation. I look forward to working with you!
    </div>

    <div class="iris-card__footer flex-justify--center">
        <button class="iris-button iris-button--ghost">
            <span class="font-icon-sync iris-button__icon"></span>
            <span class="iris-button__text">Retry</span>
        </button>
    </div>
</div>

Flat

I'm way too cool for shadows. Minimalist design FTW!

<div class="iris-card iris-card--flat">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Flat card</h4>
    </div>

    <div class="iris-card__content">
        I'm way too cool for shadows. Minimalist design FTW!
    </div>

    <div class="iris-card__footer flex-justify--end">
        <button class="iris-button iris-button--secondary">
            <span class="iris-button__text">Cancel</span>
        </button>
        <button class="iris-button iris-button--primary">
            <span class="iris-button__text">Primary</span>
        </button>
    </div>
</div>

Image Cards

<div class="iris-card iris-card--shadow iris-card--image">
    <div class="iris-card__header">
        <h4 class="iris-card__title">All the Images!</h4>
    </div>

    <div class="iris-card__content">
        <div class="iris-card__overlay">
            <div class="iris-avatar" data-size="large" data-modifier="inverted">
                <div class="iris-avatar__inner">
                    <span class="iris-avatar__icon font-icon-fi" role="img" aria-label="Apply for a mortgage today"></span>
                </div>
            </div>
        </div>

        <img class="iris-card__image" alt="" src="IMAGE_SOURCE" />
    </div>

    <div class="iris-card__footer flex-justify--between">
        <span>Checking Account</span>
        <button class="iris-button iris-button--ghost" data-modifier="compressed">
            <span class="iris-button__text">Apply Now</span>
        </button>
    </div>
</div>

<div class="iris-card iris-card--shadow iris-card--image" data-size="medium">
    <div class="iris-card__content">
        <div class="iris-card__overlay">
            <div class="iris-avatar" data-size="large" data-modifier="inverted">
                <div class="iris-avatar__inner">
                    <span class="iris-avatar__icon font-icon-fi" role="img" aria-label="Apply for a mortgage today"></span>
                </div>
            </div>
        </div>
        <img class="iris-card__image" alt="" src="URL" />
    </div>

    <div class="iris-card__footer flex-justify--between">
        <span>Sans header</span>
        <button class="iris-button iris-button--ghost" data-modifier="compressed">
            <span class="iris-button__text">Apply Now</span>
        </button>
    </div>
</div>

<div class="iris-card iris-card--shadow iris-card--image" data-size="medium">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Sans Footer</h4>
    </div>

    <div class="iris-card__content">
        <div class="iris-card__overlay">
            <div class="iris-avatar" data-size="large" data-modifier="inverted">
                <div class="iris-avatar__inner">
                    <span class="iris-avatar__icon font-icon-fi" role="img" aria-label="Apply for a mortgage today"></span>
                </div>
            </div>
        </div>
        <img class="iris-card__image" alt="" src="URL" />
    </div>
</div>

States

I'm a card that can be dragged around. You can see my cursor change when you hover over me.

<div class="iris-card iris-card--shadow iris-card--draggable">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Draggable</h4>
    </div>

    <div class="iris-card__content">
        I'm a card that can be dragged around. You can see my cursor change when you hover over me.
    </div>

    <div class="iris-card__footer flex-justify--end">
        <button class="iris-button iris-button--secondary">
            <span class="iris-button__text">Cancel</span>
        </button>
        <button class="iris-button iris-button--primary">
            <span class="iris-button__text">Primary</span>
        </button>
    </div>
</div>

Decorators

Hover on me to see the effect.

<div class="iris-card iris-card--shadow" data-size="medium" data-hoverable>
    <div class="iris-card__header">
        <h4 class="iris-card__title">Hoverable</h4>
    </div>
    <div class="iris-card__content">
        Hover on me to see the effect.
    </div>
    <div class="iris-card__footer flex-justify--center">
        <button class="iris-button iris-button--ghost">
            <span class="font-icon-sync iris-button__icon"></span>
            <span class="iris-button__text">Hover</span>
        </button>
    </div>
</div>

I am a small card.

<div class="iris-card iris-card--shadow" data-size="small">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Small card</h4>
    </div>
    <div class="iris-card__content">
        I am a small card.
    </div>
    <div class="iris-card__footer flex-justify--center">
        <button class="iris-button iris-button--ghost">
            <span class="font-icon-sync iris-button__icon"></span>
            <span class="iris-button__text">Retry</span>
        </button>
    </div>
</div>

I am a medium card.

<div class="iris-card iris-card--shadow" data-size="medium">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Medium card</h4>
    </div>
    <div class="iris-card__content">
        I am a medium card.
    </div>
    <div class="iris-card__footer flex-justify--center">
        <button class="iris-button iris-button--ghost">
            <span class="font-icon-sync iris-button__icon"></span>
            <span class="iris-button__text">Retry</span>
        </button>
    </div>
</div>

I am a large card.

<div class="iris-card iris-card--shadow" data-size="large">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Large card</h4>
    </div>
    <div class="iris-card__content">
        I am a large card.
    </div>
    <div class="iris-card__footer flex-justify--center">
        <button class="iris-button iris-button--ghost">
            <span class="font-icon-sync iris-button__icon"></span>
            <span class="iris-button__text">Retry</span>
        </button>
    </div>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

Always use a <h4> element for the title of the card to maintain the header hierarchy for screen readers.
When using the image variant, use an empty alt="" attribute to indicate the image is purely for decoration.
When using the image variant with an icon, make sure to add a role="image" and appropriate aria-label on the icon to describe the meaning to the user.

Variables

The variables used in this component are as follows:

// Border Variables
$card-border-default: $alto;
$card-border-draggable: $dove-gray;

// Box shadow variables
$card-box-shadow-default: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
$card-box-shadow-hover: 0 15px 20px -5px rgba(0, 0, 0, 0.3);

// Text color variables
$card-text-color-default: $dove-gray;

// Margin variables
$card-margin-default: 20px;
$card-margin-footer: 40px 20px 20px;

// Width variables
$card-width-default: 300px;