Card
When a page contains a lot of content, it may take more time for users to sift through it. Inability to quickly locate the content that they need, may discourage some users and abandon the page.
Cards combine visual and textual elements to introduce, sort and group topics that are related to page content. They can also provide very clear navigation support for users by highlighting key connections to other pages. Because they are responsive, they offer a consistent experience on both mobile and desktop screens.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files
Functional grouping: Containers
Demo
Configure: select the dropdowns below to display the variety of options that a card supports.
First ride is on us
Responsible Pet OwnershipThrough the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.
Code
Responsive preview
Usage best practices
Cards are used across different components such as card set, card slider and card set menu.
Consider using cards to:
- display images/videos with text
- highlight specific/grouped information on a page
- link to related content or pages
Usage examples:
- displaying significant amounts of data at a glance
- displaying high level article information and linking to corresponding article pages
Variation name | Unique features |
---|---|
Mini card |
|
Regular card |
|
Do
Make sure that the image ratio of the image and the selected image ratio one the card match.
Ensure that the card titles are descriptive and easy to understand.
Use only one link or call to action per card.
Apply 100 character limit to the mini card title to reduce visual clutter and avoid text overruns.