Skip to main content
An official website of the United States government

Collection

A collection dynamically displays a list of related items like articles or events. The list links each item to its original source.

View in Figma

Overview

Collection overview
  1. Headline
  2. Byline (optional)
  3. Date (optional)
  4. Description
  5. Media thumbnail or calendar icon (optional)
  6. Tag (optional)

Variations

Choose from the following types of collection components based on your page’s content design or organizational needs.

Variant
Default CollectionUse the default collection component to include a headline and description for each of your collection items. The following attributes are also available but optional: media thumbnail or calendar date, and/or metadata such as a publishing date, byline, and tags.
Condensed CollectionUse the condensed collection to only include a collection item’s heading and an optional website name, reducing the amount of space between collection items.

Usage

  • Do not add list items to a collection that use both the calendar and media icons.
    • When showcasing a group of events in a collection use the optional calendar icon.
    • To provide users with quick visual cues for each specific item in your collection use the optional media thumbnail.
  • Use the optional byline when providing the name of a content item’s author.
  • Add an optional byline and/or date after your collection item’s headline to create a sense of content hierarchy within each of your items.
  • Only include tags for your collection items if your website uses taxonomies to organize content.
  • Include a heading before your collection to introduce your list items.
    • Use descriptive terms as your heading to group your list items, such as their collective content type, whether the items are timely, etc.
  • If collection items do not need further context within a description to be understood by a user, use the condensed collection variant to only feature collection items’ headings within a list.

Where to use

  • Use this component on homepages, landing pages, and inner pages.

When to use

  • To group related content (articles, pages, events, etc.) together based on content type, topic, or timeliness.

When to consider something else

  • Displaying large images or other media. Collection list items can feature small images to provide users with quick visual cues for specific item; however, these items are not the focal point for this component.
  • When featuring items or CTAs that are not relevant to one another and should not be grouped together, or showcasing CTAs for major initiatives or content marketing items that should be described further through an image and description.
  • Showcasing one primary CTA that should be more prominently displayed than all other information on the page.

Best Practices

Character limits

Character limits are strongly recommended to ensure text is concise, scannable, and not visually distorted.

Character limits are based on best practices and when a line of text will be forced to wrap onto a second line of text on desktop.

  • Collection heading (Use for the collection pattern only): 45 characters
  • Headline: 75 characters
  • Description: Concise, 2-3 sentence description of the page content

Accessibility

  • Use unordered lists and list items. Use a ul for a collection and an li for each item. This allows screen readers to enumerate the items in the collection and allows shortcuts between list items.
  • Ensure link names are unique. Unique names not only help users using assistive technology distinguish between links, but help all users scan the page.

Code Snippets

Default collection

The optional dates displayed within a collection should use a <time> html element and include a datetime attribute. The datetime attribute translates dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

See MDN for more information on the <time> element.

Component Preview

Condensed collection

Component Preview

Default with media

Component Preview

Default with calendar

Component Preview

Packages

Import one of the following Sass partials into your stylesheet.

@forward 'usa-collection';


// You may also need to import the following packages if not previously imported:
@forward 'usa-tag';
@forward 'usa-link';