Skip to main content

Cards

Cards contain content and actions about a single subject.

Cards should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed within them in a way that clearly indicates hierarchy.

Accessibility

Ensure the element used as a title for the card is the appropriate headline level for the flow of your document (ex. h3 if following an h2). You can use typography classes if needed to adjust the visual styling.

Basic Card

Create basic variations by applying variations available to base Paper component to the .u-card element.

Media Card

By default, we use the combination of a <div> element and a background image to display the media, resulting in needing to define height or width (depending on card orientation).

If the component prop is defined as an 'img', the image will take up the full width of the card (or card-internal container), and adopt a proportionate height. This potentially will result in a stretched image, or — if multiple cards are in use — variance in image height if not using a pre-constrained image size.

We recommend that you either:

  • Set the image constraints application-wide and/or leverage the helper class of u-card__media--16-91 so that the .u-card__media component can have an explicitly set height; or
  • Use an img within u-card__media and enforce a consistent image size or ratio.

These settings reduce variability.

Card Header

Add a preformatted card header with a primary and optional secondary title.

Customized Card Layout

Here is a media card leveraging the grid to create a custom layout.

Properties