Skip to main content

Cards

Cards are snapshots of content that are typically used in a group to present collections of related information. Cards can represent any quickly consumable information. Avoid trying to create a narrative on a card. Instead, focus on bite sized content chunks consumed at a glance.

Example

Title 1

1

Title 2

2

Title 3

3

Title 4

4

Title 5

5

Title 6

6

Best practices

Cards create an opportunity to present a collection of related content in a rich and dynamic way. Cards offer flexible layout options that can be used interchangeably with cards using other options; often a requirement when the content available is not consistent.

Users creating their own types of cards will use this card as a base. The new card is then given a semantic name or type, which can be used to bind styles and behavior to.

Use cards when:

  • There are many content items that need to be displayed.
  • The content available between each content item is not consistent resulting in many different sizes and layouts that can be used together.
  • The content items need to be sorted in various ways that can't rely on a curated layout. However, Cards can also be used for curated layouts.

Do

Use cards when displaying a feed of content or when a stronger isolation between each content items is needed.

Cards are also well suited for scenarios where the content is not consistent and requires different fields, image sizes, or content, which is often the case in a feed.

Don’t

  • Avoid trying to create a narrative on a card. Instead, focus on bite sized content chunks consumed at a glance.

Options

  • Single: Add a class name f-single to a card to create a single card.
  • Double: Add a class name f-double to create a 1x2 card.
  • Feed layout: Add a classname f-feed to change the card group layout to feed
  • Channel layout: Add a classname f-channel to change the card group layout to channel
  • Customized cards: cards can be on five different attributes: background-color, min-width, max-width, gutter width, and height.

Customization

To customize cards the following CSS needs to be overridden in your site:

Default values:

$color = #FFF
$min-width = 240px;
$max-width = 336px;
$gutter-width = 2% (default, f-feed) || 24px (f-channel);
$height = 360px;

The example provided below has variables ($height etc), please replace them with actual values for the CSS

Customizing Cards background colors:

.m-card-group .c-card .c-card-content {
    background-color:  $color;
}

Customizing Cards max-width, min-width, and gutter width:

Default cards & Card Feed

.m-card-group .c-card {
    margin-left: calc($gutter-width / 2);
    margin-right: calc($gutter-width / 2);
}

.m-card-group .c-card.f-single {
    max-width:  $max-width;
    min-width:  $min-width;
}

.m-card-group .c-card.f-double {
    max-width:  calc(2 * $max-width + $gutter-width);
    min-width:  calc(2 * $min-width + $gutter-width);
}

@media screen and (max-width: 540px) {
    .m-card-group .c-card.f-double {
        min-width: $min-width;
        max-width: $max-width;
    }
}

@media screen and (min-width: 540px) {
    .m-card-group.f-feed .c-card.f-single {
        width: calc(50% - $gutter-width)
    }

    .m-card-group.f-feed .c-card.f-double {
        width: calc(100% - $gutter-width)
    }
}

@media screen and (min-width: 768px) {
    .m-card-group.f-feed .c-card.f-single {
        width: calc(33% - $gutter-width)
    }

    .m-card-group.f-feed .c-card.f-double {
        width: calc(66% - $gutter-width)
    }
}

@media screen and (min-width: 1084px) {
    .m-card-group.f-feed .c-card.f-single {
        width: calc(25% - $gutter-width)
    }

    .m-card-group.f-feed .c-card.f-double {
        width: calc(50% - $gutter-width)
    }
}

Card Channel

.m-card-group.f-channel {
    grid-column-gap: $gutter-width;
    grid-row-gap: $gutter-width;
}

.m-card-group.f-channel {
    grid-template-columns: minmax($min-width, $max-width);
    -ms-grid-columns: minmax($min-width, $max-width);
}

@media screen and (min-width: 540px) {
    .m-card-group.f-channel {
        grid-template-columns: minmax($min-width, $max-width) minmax($min-width, $max-width);
        -ms-grid-columns: minmax($min-width, $max-width) $gutter-width minmax($min-width, $max-width);
    }
}

@media screen and (min-width: 768px) {
    .m-card-group.f-channel {
        grid-template-columns: minmax($min-width, $max-width) minmax($min-width, $max-width) minmax($min-width, $max-width);
        -ms-grid-columns: minmax($min-width, $max-width) $gutter-width minmax($min-width, $max-width) $gutter-width minmax($min-width, $max-width);
    }
}

@media screen and (min-width: 1084px) {
    .m-card-group.f-channel {
        grid-template-columns: minmax($min-width, $max-width) minmax($min-width, $max-width) minmax($min-width, $max-width) minmax($min-width, $max-width);
        -ms-grid-columns: minmax($min-width, $max-width) $gutter-width minmax($min-width, $max-width) $gutter-width minmax($min-width, $max-width) $gutter-width minmax($min-width, $max-width);
    }
}

Customizing Card Height:

Default cards

.m-card-group .c-card .c-card-content {
    height: $height;
}

Card feed

.m-card-group.f-feed .c-card .c-card-content {
    height: $height;
}

@media screen and (max-width: 540px) {
    .m-card-group.f-feed .c-card.f-single .c-card-content{
        height: calc($height / 2);
    }
}

Card Channel

.m-card-group.f-channel .c-card .c-card-content {
    height: $height;
}

.m-card-group.f-channel .c-card.f-single .c-card-content{
    height: calc($height / 2);
}

@media screen and (min-width: 540px) {
    .m-card-group.f-channel .c-card.f-single .c-card-content {
        height: $height;
    }
}

@media screen and (min-width: 768px) {
    .m-card-group.f-channel .c-card.f-single:nth-last-child(-n + 2) .c-card-content {
        height: calc($height / 2);
    }
}

@media screen and (min-width: 1084px) {
    .m-card-group.f-channel .c-card.f-single:nth-last-child(-n + 2) .c-card-content {
        height: $height;
    }
}

Specifications

Browser support IE10+, Edge, Safari, Firefox, and Chrome

Development

  • Schema definition: The cards schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Cards Module with feed reflow

Title 1

1

Title 2

2

Title 3

3

Title 4

4

Title 5

5

Title 6

6

<div class="m-card-group">
    <div class="c-card f-double">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 1</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">1</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 2</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">2</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 3</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">3</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 4</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">4</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 5</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">5</p>
        </div>
    </div>
    <div class="c-card f-double">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 6</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">6</p>
        </div>
    </div>
</div>

Cards Module with channel reflow

Title 1

1

Title 2

2

Title 3

3

<div class="m-card-group f-channel">
    <div class="c-card f-double">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 1</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">1</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 2</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">2</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 3</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">3</p>
        </div>
    </div>
</div>

Cards Module with channel reflow with all single cards

Title 1

1

Title 2

2

Title 3

3

Title 4

1

<div class="m-card-group f-channel">
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 1</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">1</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 2</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">2</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 3</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">3</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 4</h6>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">1</p>
        </div>
    </div>
</div>

Cards Module with linked headers and feed reflow

<div class="m-card-group">
    <div class="c-card f-double">
        <div class="card-heading">
            <a href="#" class="c-hyperlink">
                <h6 class="c-heading-6">Title 1</h6>
            </a>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">1</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <a href="#" class="c-hyperlink">
                <h6 class="c-heading-6">Title 2</h6>
            </a>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">2</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <a href="#" class="c-hyperlink">
                <h6 class="c-heading-6">Title 3</h6>
            </a>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">3</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <a href="#" class="c-hyperlink">
                <h6 class="c-heading-6">Title 4</h6>
            </a>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">4</p>
        </div>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <a href="#" class="c-hyperlink">
                <h6 class="c-heading-6">Title 5</h6>
            </a>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">5</p>
        </div>
    </div>
    <div class="c-card f-double">
        <div class="card-heading">
            <a href="#" class="c-hyperlink">
                <h6 class="c-heading-6">Title 6</h6>
            </a>
        </div>
        <div class="c-card-content">
            <p class="c-heading-3" style="text-align: center">6</p>
        </div>
    </div>
</div>

Clickable Card Module with channel reflow

Title 1

1

Title 2

2

Title 3

3

Title 4

4

<div class="m-card-group f-channel">
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 1</h6>
        </div>
        <a class="c-card-content" href="#">
            <p class="c-heading-3" style="text-align: center">1</p>
        </a>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 2</h6>
        </div>
        <a class="c-card-content" href="#">
            <p class="c-heading-3" style="text-align: center">2</p>
        </a>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 3</h6>
        </div>
        <a class="c-card-content" href="#">
            <p class="c-heading-3" style="text-align: center">3</p>
        </a>
    </div>
    <div class="c-card f-single">
        <div class="card-heading">
            <h6 class="c-heading-6">Title 4</h6>
        </div>
        <a class="c-card-content" href="#">
            <p class="c-heading-3" style="text-align: center">4</p>
        </a>
    </div>
</div>