Feature cards are designed to highlight smaller content blocks with similar patterns—making it easier to compare information between cards as well as view a group of content as a single unit. By default feature cards have two sections, one for an image and another for content. Images can use any ratio and content can be formatted a variety of ways within the card.
Examples
Feature cards are the same in every way as the default with the exception of the image.
Examples
Usage
Rules
- Cards group content into a succinct a unit
- A card within a set should aim to match content attributes with the other cards in the set
- When used as lead-ins each card should have a heading
Constraints
- Cards are for short-form content
Principles
- Cards are ideal for comparing content or providing lead-ins to fuller content sections
Accessibility
- Use semantic hierarchy for content within a card
- Images in cards are often not key to understanding the card content and should be treated as such with empty
alttags (Images are also before the card content section so in that way would not fall under the hierarchy of a heading within a card)
Class Names
| card Required |
Use on the card container |
| card-feature Modifier |
Use with |
| card-img-top Required |
Use on the container of card image |
| card-block Required |
Use on the container of the card content |
- Last updated June 11, 2018
- Authorable - Yes
- Core - Feature Cards