List cards

List cards are used on pages with data lists – they often are the list of results on a filtering component. They are not clickable but might have links within their content. They are used to display small sets of information in a consistent format.

Shown here are various different list cards – one for projects, one for real-time travel alerts, and one for route times.

List cards can have a tag indicating a status, a title that may or may not link, tags showing categories that this content belongs to, and detail content.

Specs

• Drop shadow: list item card shadow

• Padding: 16px

• Space between lines: 8px

• Tag

  • Margin-left: 0 padding

  • 8px from the top of the card

  • Padding: 2px 4px

Type sizes vary, and scale up/down in the standard formula outlined in the Typography section.

Inspect card components in public site components in Figma