1. Home
  2. Design System
  3. Components
  4. Collection


A collection displays a short list of related items. Each item includes a heading linked to the original source and a description. You can choose to add optional metadata such as date, byline, or tags.

Use it to

  • Present headings with descriptions and additional details
  • Feature up to six related items
  • Combine related items about the same topic
  • Link to content from multiple sources

Do not use it to

  • Feature more than six items
  • Show a large group of related content, like a catalog or library
  • Display images and other media with a larger footprint

Follow these rules


  • Comply with character limits:
    • Headings: 160 or fewer
    • Tags: 20 or fewer
    • Descriptions: 1,000 or fewer
  • Use the correct heading level
  • Include one link per item
  • Do not include images
  • Create meaningful titles, such as “Recent research” or “How-to videos”
  • Group items based on similar features, like topic, type of content, or publication date
  • Be selective about what you show

Visual style and functionality

  • Consider different width options for displaying collections (1/3, 1/2, 2/3, or full-page). If paired with cards in the same row, use a 1/3 to 2/3-page-width or 1/2 to 1/2-page-width layout.
  • Add an external website indicator under any heading linked to an external website.
  • Include a link or button at the bottom to direct users to more related content.
  • Place a collection inside a highlight box if you want it to stand out. 


Date Last Reviewed: