Cards
beta

Cards are a blank slate. You can put any combination of text, images and components in a card. Cards can be any width or height. By default, cards have 30px padding. Reduced padding can be applied by using .card-compact.

Cards can be fully clickable by using an anchor tag instead of a div.

Note: Resize window to view components at various breakpoints.

Today's weather

Forecast Chance of rain High Low
Cloudy 10% 32˙ 29˙
Sunny 2% 42˙ 30˙
[card body]

My goals

[card body]

Cards can have an accent at the top, and utilizes the charting colors to display a color. Use the <div class="accent chart-color-NUMBER chart-color-HUE"> inside the card element.

Find out the answers you've been looking for

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni cumque blanditiis odio deleniti unde, obcaecati inventore facilis doloribus magnam amet corrupti labore maiores modi earum, laborum similique ipsum, cupiditate explicabo?

Find out the answers you've been looking for

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni cumque blanditiis odio deleniti unde, obcaecati inventore facilis doloribus magnam amet corrupti labore maiores modi earum, laborum similique ipsum, cupiditate explicabo?

  

Heading

Body

A button can be used in a card's footer and take up the entire width of the card, with no padding. To use this variation, place a button with the .btn-block class inside of the <div class="card-footer"> and the button will show as the full width of card.

Find out the answers you've been looking for

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni cumque blanditiis odio deleniti unde, obcaecati inventore facilis doloribus magnam amet corrupti labore maiores modi earum, laborum similique ipsum, cupiditate explicabo?

Find out the answers you've been looking for

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni cumque blanditiis odio deleniti unde, obcaecati inventore facilis doloribus magnam amet corrupti labore maiores modi earum, laborum similique ipsum, cupiditate explicabo?

  

Heading

Body

Compact cards have reduced padding around the card and can be used with any card variation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequuntur quis sapiente aspernatur delectus consectetur magni nisi pariatur labore deserunt adipisci ullam ex numquam, libero, quam, debitis quo voluptas corporis?

[content]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequuntur quis sapiente aspernatur delectus consectetur magni nisi pariatur labore deserunt adipisci ullam ex numquam, libero, quam, debitis quo voluptas corporis?

[content]

Dismissible cards are available for both the default cards as well as the compact cards.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequuntur quis sapiente aspernatur delectus consectetur magni nisi pariatur labore deserunt adipisci ullam ex numquam, libero, quam, debitis quo voluptas corporis?

[content]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequuntur quis sapiente aspernatur delectus consectetur magni nisi pariatur labore deserunt adipisci ullam ex numquam, libero, quam, debitis quo voluptas corporis?

[content]

To make a column or columns of cards, simply put cards in a grid/column layout.
To make rows of cards, use the card-group class which can be used with the Design Language's responsive sizing for flex items.

The concept and class styles of the responsive card group mimics bootstraps 12-column grid system in both concept and style, so you can easily understand how to use these flex classes. Like the grid system where each group of columns needs to be wrapped in a row class, each group of cards must be wrapped in a card-group class. Any combination of default or secondary cards, with or without the dismiss button can be used in a card group.

The flex classes are organized in the same way as the column classes per breakpoint. Twelve cards maximum can be placed in each row of cards in the same way that twelve columns maximum can be used in the grid. For instance, if you want each card to appear on its own row on a mobile phone, use flex-xs-12; two in a row for a small tablet, add flex-sm-6; three in a row on a large tablet or small laptop add flex-md-4; and four in a row on a desktop, add flex-lg-3.

<div class="card flex-xs-12 flex-sm-6 flex-md-4 flex-lg-3">

The Design Langage also provides helper classes for left, center, or right alignment of the cards within the card group. card-left card-center card-right For example, to center the cards, you would use card-center in the card-group element. Left align is the default.

<div class="card-group card-center">

Note: You can resize the width of your browser and use your browser's development tools to see the example below in action.

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, dui eu ornare scelerisque, quam elit congue dolor, ut aliquam nulla eros quis ipsum.

Card 2

Ut eu lectus et augue facilisis dignissim. Donec mauris risus, pellentesque id mollis ut, consectetur at orci. Suspendisse vel hendrerit lectus. Nunc lectus ligula, iaculis at neque ac, ullamcorper finibus ante.

Card 3

Morbi molestie semper velit, nec dignissim nisi porttitor ac. Quisque id augue in tortor hendrerit varius.

Card 4

Donec ut eleifend magna, at aliquet leo. Vestibulum imperdiet elit ut egestas rutrum. Mauris eu vestibulum dui. Sed at semper lorem. Praesent tortor justo, molestie a elit ac, condimentum interdum orci. Fusce ante libero, luctus ut dolor non, porta rutrum nisi.

Card 5

Pellentesque nulla diam, semper non pellentesque vitae, faucibus nec orci.

Card 6

Phasellus feugiat ullamcorper aliquam. Etiam bibendum ac ligula vitae sodales. Sed quis dictum urna. Pellentesque sed ornare lectus.

Card 7

Vestibulum consequat venenatis rhoncus. Vivamus posuere lorem in cursus suscipit. Morbi nisi lacus, varius condimentum tincidunt ut, sagittis sed purus.

[Content goes here]
[Content goes here]
[More cards go here]

Action required

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate delectus

Action required

second card

  
[content]

Cards with images may be used to enhance the visual appeal of cards. Images take up the full width of the card but stil show the border. Images in cards may appear above, below, or underneath card content.

Cards may contain images above or below the .card-body or .card-footer wrapper elements. To use an image as a background in a card, use the .card-background-image as a variation of card types. This should be used instead of .card-primary or .card-secondary.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus non, itaque eum animi maxime blanditiis nisi facilis laboriosam labore. Cupiditate deserunt iste saepe totam dolor ex, provident quis illum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus non, itaque eum animi maxime blanditiis nisi facilis laboriosam labore. Cupiditate deserunt iste saepe totam dolor ex, provident quis illum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, accusamus non, itaque eum animi maxime blanditiis nisi facilis laboriosam labore. Cupiditate deserunt iste saepe totam dolor ex, provident quis illum.
  
[content]
[content]
[content]