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 the compact class. You can make a card dismissable, or accented by adding the appropriate class. Cards can be fully clickable by using an anchor tag <a> instead of a div tag <div>. You can have buttons or images that fill the full width of the card, or a card with a background image. Adding a combination of classes will give you a combination of styles.

The Design Language provides responsive card groups.

Today's weather

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

Today's weather

[More content…]

My goals

My goals

[More content…]

Today's weather

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

Today's weather

[More content…]

My goals

My goals

[More 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…]

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

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

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

Primary Card

Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo aliquam venenatis sed sed lectus.

Secondary Card

Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo aliquam venenatis sed sed lectus.

Primary Compact Card

Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo aliquam venenatis sed sed lectus.

Secondary Compact Card

Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo aliquam venenatis sed sed lectus.

[Content…]

Clickable cards are structured similarly to any other card. They use an anchor tag <a> instead of a div tag <div>. A clickable card must never contain links or buttons.

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

Find out the answers you've been looking for

Nulla a luctus erat, non lobortis enim. Morbi euismod ex odio. Cras aliquet ipsum elit, non imperdiet justo mattis eget. Pellentesque at magna sollicitudin, auctor odio non, congue nunc. Praesent eget turpis nulla. Phasellus sed turpis molestie massa scelerisque molestie.

Find out the answers you've been looking for

[More content…]

Find out the answers you've been looking for

Nulla a luctus erat, non lobortis enim. Morbi euismod ex odio. Cras aliquet ipsum elit, non imperdiet justo mattis eget. Pellentesque at magna sollicitudin, auctor odio non, congue nunc. Praesent eget turpis nulla. Phasellus sed turpis molestie massa scelerisque molestie.

Find out the answers you've been looking for

[More content…]

Cards with images may be used to enhance their visual appeal. There are three ways to include images in a card:
  1. Normally, as content in the card-body or card footer.
  2. Full width of the card but still showing the border.
  3. As a background image.

Images may display above or below the card-body or card-footer wrapper elements. To display an image as a background, use the card-background-image class 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.

[content]

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]

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]

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]

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 bootstrap's 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 primary, secondary, or background-image cards, with or without variations 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-group-left card-group-center card-group-right For example, to center the cards, you would use card-group-center in the card-group element. Left align is the default.

<div class="card-group card-group-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 – Primary

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

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 – Primary/Dismissable

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

Card 4 – Primary/Accent

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

Card 5 – Clickable

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

Card 6 – Background-Image

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 7 – Background-Image

Plus Full Width Button

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

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