Cards
A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.
Usage
Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.
When to use
Use a card layout when displaying content that:
- As a collection, comprises multiple data types, such as images, videos, and text
- Does not require direct comparison (a user is not directly comparing images or text)
- Supports content of highly variable length, such as comments
- Contains interactive content, such as like buttons or comments
- Would otherwise be in a grid list but needs to display more content to supplement the image
Basic card
A basic card consists of a card header and a card body. The body can hold any information such as text, images and form elements.
Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.
Basic card title
Curabitur blandit tempus porttitor...
Styles
No header
Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus.
Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.
...
Extra padding
You can add the class .extra-padding to double the default padding of the card body. The extra padding is applied for larger screen only.
...
Header underlined
You can add the class .card-underline to create a visually seperated box of the card head.
Basic card title
...
Card action
Teaser card
A teaser card can be used for Drupal teasers. The teaser can have image but it is not mandatory. Teasers can have one or two buttons which are at the bottom and are flat buttons. Content hierarchy is achieved by the order of fields and the use of typography. Try to limit the amount of information and actions in a teaser. On mobile the image field is not displayed. On tablet and wider the maximum height of the teaser card should match the heigth of the image style.
