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

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a card supports.

Select card type:

Select background color:

Select link type:

Select visual type:

Select illustration type:

Select image ratio:

Select background size:

Select image position X:

Select image position Y:

First ride is on us

Responsible Pet Ownership

Through 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

Card variations and features
Variation name	Unique features
Mini card	horizontal layout with an image asset on the left only contains an image and title options meant to be used as a click through to a content page smaller footprint
Regular card	vertical layout with the visual asset at the top allows for more content such as description (optional) allows for a variety of visual assets such as images, icons, illustrations or videos (all optional) can contain all the information or be used as a click through to a content page flexible usage

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.