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 30 pixels padding on all sides. Reduced padding can be applied by using the card-compact class, 15 pixels padding on all sides. If a card has an action, it should use the card-interactive class. You can make a card accented by adding the appropriate classes. Cards can be fully clickable by using an anchor tag <a> or button tag <button> 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.

 

There are three basic types of cards: Basic <class="card"> is a card of any size with 30 pixel padding on all sides; Primary <class="card card-primary"> has the addition of a border; Compact <class="card card-primary card-compact"> reduces the padding to 15 pixels.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, ipsa quis autem tempore distinctio dolorem magni, repellendus possimus natus alias reiciendis deserunt ea. Repudiandae maxime unde, vel dolor eum magni.*

[Content]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, ipsa quis autem tempore distinctio dolorem magni, repellendus possimus natus alias reiciendis deserunt ea. Repudiandae maxime unde, vel dolor eum magni.*

[Content]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, ipsa quis autem tempore distinctio dolorem magni, repellendus possimus natus alias reiciendis deserunt ea. Repudiandae maxime unde, vel dolor eum magni.*

 

[Content]

Interactive cards have actions associated with them. All cards with actions should be interactive cards. For cards to be fully clickable use a button or anchor tag instead of a div tag. Replace <div class="card card–interactive"> with <a href="#" class="card card–interactive"> or <button class="card card–interactive">.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, ipsa quis autem tempore distinctio dolorem magni, repellendus possimus natus alias reiciendis deserunt ea. Repudiandae maxime unde, vel dolor eum magni.

[Content]

Cards can have an accent at the top, and utilize the accent colors to display a color. Use the classes "accent-color-NUMBER" inside the card element, where NUMBER is between 1 and 11. <div class="accent-color-2">

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

[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 with or without card-primary.

Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo.
[Content]
Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo.
[Content]
Maecenas dapibus tellus quam, ac tristique justo posuere quis. Nam a metus vitae leo.
[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 borderless, primary, interactive, 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 header 1

Lorem ipsum.

Card header 2

Lorem ipsum.

Card header 3

Lorem ipsum.

Card header 4

Lorem ipsum.

Card header 5

Lorem ipsum.

Card header 6

Lorem ipsum.

[Content]
[Content]
[More cards]