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

Shadow card

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

Flat card

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

All the Images!

<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>

Sans Footer

<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

Draggable

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

Hoverable

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>

Small card

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>

Medium card

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>

Large card

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;

Themeability

Nothing is themeable in this component.

Variant: *Shadow** | State: None | Decorator: None*

Shadow

Secondary text here with some information about something important to convey to the user.
<div class="iris-card iris-card--shadow "  data-size="medium" >
    <div class="iris-card__header">
        <h4 class="iris-card__title">Shadow</h4>
    </div>
    <div class="iris-card__content">
        Secondary text here with some information about something important to convey to the user.
    </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>

Variant: *Shadow** | State: None | Decorator: Hoverable*

Shadow

Secondary text here with some information about something important to convey to the user.
<div class="iris-card iris-card--shadow "  data-size="medium" data-hoverable="true">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Shadow</h4>
    </div>
    <div class="iris-card__content">
        Secondary text here with some information about something important to convey to the user.
    </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>

Variant: *Shadow** | State: Draggable | Decorator: None*

Shadow

Secondary text here with some information about something important to convey to the user.
<div class="iris-card iris-card--shadow iris-card--draggable"  data-size="medium" >
    <div class="iris-card__header">
        <h4 class="iris-card__title">Shadow</h4>
    </div>
    <div class="iris-card__content">
        Secondary text here with some information about something important to convey to the user.
    </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>

Variant: *Shadow** | State: Draggable | Decorator: Hoverable*

Shadow

Secondary text here with some information about something important to convey to the user.
<div class="iris-card iris-card--shadow iris-card--draggable"  data-size="medium" data-hoverable="true">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Shadow</h4>
    </div>
    <div class="iris-card__content">
        Secondary text here with some information about something important to convey to the user.
    </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>

Variant: *Flat** | State: None | Decorator: None*

Flat

Secondary text here with some information about something important to convey to the user.
<div class="iris-card iris-card--flat "  data-size="medium">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Flat</h4>
    </div>
    <div class="iris-card__content">
        Secondary text here with some information about something important to convey to the user.
    </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>

Variant: *Flat** | State: Draggable | Decorator: None*

Flat

Secondary text here with some information about something important to convey to the user.
<div class="iris-card iris-card--flat iris-card--draggable"  data-size="medium">
    <div class="iris-card__header">
        <h4 class="iris-card__title">Flat</h4>
    </div>
    <div class="iris-card__content">
        Secondary text here with some information about something important to convey to the user.
    </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>

Variant: *Image** | State: None | Decorator: None*

All the Images!

<div class="iris-card iris-card--image "  data-size="medium">
    <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" title="Home Costs">
                <div class="iris-avatar__inner">
                    <span class="iris-avatar__icon font-icon-fi"></span>
                </div>
            </div>
        </div>
        <img class="iris-card__image" src="https://images.unsplash.com/photo-1505428215601-90f0007b9e83?dpr=1&auto=compress,format&fit=crop&w=500&h=&q=80&cs=tinysrgb&crop=" />
    </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>

Variant: *Image** | State: Draggable | Decorator: None*

All the Images!

<div class="iris-card iris-card--image iris-card--draggable"  data-size="medium">
    <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" title="Home Costs">
                <div class="iris-avatar__inner">
                    <span class="iris-avatar__icon font-icon-fi"></span>
                </div>
            </div>
        </div>
        <img class="iris-card__image" src="https://images.unsplash.com/photo-1505428215601-90f0007b9e83?dpr=1&auto=compress,format&fit=crop&w=500&h=&q=80&cs=tinysrgb&crop=" />
    </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>