Collection

Display related articles, events, or other items in a compact collection, with heading, calendar, and thumbnail examples.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Gears of Government President's Award winners
Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes contributions across the federal workforce.
- By Sondra Ainsworth and Constance Lu
- September 30, 2020
- NEW
- PMA
- OMB
Women-owned small business dashboard
In honor of National Women's Small Business Month, this dashboard highlights data about women-owned small businesses.
- By Constance Lu
- September 30, 2020
- SBA
September 2020 updates show progress on cross-agency and agency priority goals
Progress updates highlight recent milestones and initiatives across federal agencies.
- By Eric L. Miller
- September 17, 2020
- QUARTERLY UPDATE
- CAP GOAL
- APG

collection-demo.tsx

import { Collection } from '@uswds-tailwind/react/collection'
import { Link } from '@uswds-tailwind/react/link'
import { Tag } from '@uswds-tailwind/react/tag'

export default function CollectionDemo() {
  return (
    <Collection.Root>
      <Collection.List>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>Gears of Government President's Award winners</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes contributions across the federal workforce.
          </Collection.Description>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>By Sondra Ainsworth and Constance Lu</Collection.MetaListItem>
            <Collection.MetaListItem><time dateTime="2020-09-30">September 30, 2020</time></Collection.MetaListItem>
          </Collection.MetaList>
          <Collection.MetaList aria-label="Topics" className="flex-row">
            <Collection.MetaListItem><Tag variant="vivid-orange">NEW</Tag></Collection.MetaListItem>
            <Collection.MetaListItem><Tag variant="light-gray">PMA</Tag></Collection.MetaListItem>
            <Collection.MetaListItem><Tag variant="light-gray">OMB</Tag></Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>Women-owned small business dashboard</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            In honor of National Women's Small Business Month, this dashboard highlights data about women-owned small businesses.
          </Collection.Description>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>By Constance Lu</Collection.MetaListItem>
            <Collection.MetaListItem><time dateTime="2020-09-30">September 30, 2020</time></Collection.MetaListItem>
          </Collection.MetaList>
          <Collection.MetaList aria-label="Topics" className="flex-row">
            <Collection.MetaListItem><Tag variant="light-gray">SBA</Tag></Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>September 2020 updates show progress on cross-agency and agency priority goals</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            Progress updates highlight recent milestones and initiatives across federal agencies.
          </Collection.Description>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>By Eric L. Miller</Collection.MetaListItem>
            <Collection.MetaListItem><time dateTime="2020-09-17">September 17, 2020</time></Collection.MetaListItem>
          </Collection.MetaList>
          <Collection.MetaList aria-label="Topics" className="flex-row">
            <Collection.MetaListItem><Tag variant="light-gray">QUARTERLY UPDATE</Tag></Collection.MetaListItem>
            <Collection.MetaListItem><Tag variant="light-gray">CAP GOAL</Tag></Collection.MetaListItem>
            <Collection.MetaListItem><Tag variant="light-gray">APG</Tag></Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
      </Collection.List>
    </Collection.Root>
  )
}

Headings Only

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

The eight principles of mobile-friendliness
- Digital.gov
The USWDS maturity model
- U.S. Web Design System
A news item that's on our own site
The key role of product owners in federated data projects
- 18F
Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs)
- Performance.gov

collection-headings-demo.tsx

import { Collection } from '@uswds-tailwind/react/collection'
import { Link } from '@uswds-tailwind/react/link'

export default function CollectionHeadingsDemo() {
  return (
    <Collection.Root>
      <Collection.List className="*:py-2">
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>The eight principles of mobile-friendliness</Link></h4>
          </Collection.Heading>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>
              <div className="flex items-center gap-1">
                <div className="icon-[material-symbols--globe] size-4" />
                <span>Digital.gov</span>
              </div>
            </Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>The USWDS maturity model</Link></h4>
          </Collection.Heading>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>
              <div className="flex items-center gap-1">
                <div className="icon-[material-symbols--globe] size-4" />
                <span>U.S. Web Design System</span>
              </div>
            </Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>A news item that's on our own site</Link></h4>
          </Collection.Heading>
        </Collection.Item>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>The key role of product owners in federated data projects</Link></h4>
          </Collection.Heading>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>
              <div className="flex items-center gap-1">
                <div className="icon-[material-symbols--globe] size-4" />
                <span>18F</span>
              </div>
            </Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
        <Collection.Item>
          <Collection.Heading>
            <h4><Link href="#" isExternal>Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs)</Link></h4>
          </Collection.Heading>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>
              <div className="flex items-center gap-1">
                <div className="icon-[material-symbols--globe] size-4" />
                <span>Performance.gov</span>
              </div>
            </Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
      </Collection.List>
    </Collection.Root>
  )
}

Calendar

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Sep
30
Gears of Government President's Award winners
Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes contributions across the federal workforce.
Sep
30
Women-owned small business dashboard
In honor of National Women's Small Business Month, this dashboard highlights data about women-owned small businesses.
Sep
17
September 2020 updates show progress on cross-agency and agency priority goals
Progress updates highlight recent milestones and initiatives across federal agencies.

collection-calendar-demo.tsx

import { Collection } from '@uswds-tailwind/react/collection'
import { Link } from '@uswds-tailwind/react/link'

export default function CollectionCalendarDemo() {
  return (
    <Collection.Root>
      <Collection.List>
        <Collection.Item startElement={(
          <Collection.Calendar dateTime={new Date(2020, 8, 30)}>
            <Collection.CalendarMonth />
            <Collection.CalendarDate />
          </Collection.Calendar>
        )}
        >
          <Collection.Heading>
            <h4><Link href="#" isExternal>Gears of Government President's Award winners</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes contributions across the federal workforce.
          </Collection.Description>
        </Collection.Item>
        <Collection.Item startElement={(
          <Collection.Calendar dateTime={new Date(2020, 8, 30)}>
            <Collection.CalendarMonth />
            <Collection.CalendarDate />
          </Collection.Calendar>
        )}
        >
          <Collection.Heading>
            <h4><Link href="#" isExternal>Women-owned small business dashboard</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            In honor of National Women's Small Business Month, this dashboard highlights data about women-owned small businesses.
          </Collection.Description>
        </Collection.Item>
        <Collection.Item startElement={(
          <Collection.Calendar dateTime={new Date(2020, 8, 17)}>
            <Collection.CalendarMonth />
            <Collection.CalendarDate />
          </Collection.Calendar>
        )}
        >
          <Collection.Heading>
            <h4><Link href="#" isExternal>September 2020 updates show progress on cross-agency and agency priority goals</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            Progress updates highlight recent milestones and initiatives across federal agencies.
          </Collection.Description>
        </Collection.Item>
      </Collection.List>
    </Collection.Root>
  )
}

Media Thumbnail

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Gears of Government President's Award winners
Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes contributions across the federal workforce.
- By Sondra Ainsworth and Constance Lu
- September 30, 2020
- NEW
- PMA
- OMB
Women-owned small business dashboard
In honor of National Women's Small Business Month, this dashboard highlights data about women-owned small businesses.
- By Constance Lu
- September 30, 2020
- SBA

collection-thumbnail-demo.tsx

import { Collection } from '@uswds-tailwind/react/collection'
import { Link } from '@uswds-tailwind/react/link'
import { Tag } from '@uswds-tailwind/react/tag'

export default function CollectionThumbnailDemo() {
  return (
    <Collection.Root>
      <Collection.List>
        <Collection.Item startElement={(
          <Collection.Thumbnail>
            <img src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
          </Collection.Thumbnail>
        )}
        >
          <Collection.Heading>
            <h4><Link href="#" isExternal>Gears of Government President's Award winners</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            Today, the Administration announces the winners of the Gears of Government President's Award. This program recognizes contributions across the federal workforce.
          </Collection.Description>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>By Sondra Ainsworth and Constance Lu</Collection.MetaListItem>
            <Collection.MetaListItem><time dateTime="2020-09-30">September 30, 2020</time></Collection.MetaListItem>
          </Collection.MetaList>
          <Collection.MetaList aria-label="Topics" className="flex-row">
            <Collection.MetaListItem><Tag variant="vivid-orange">NEW</Tag></Collection.MetaListItem>
            <Collection.MetaListItem><Tag variant="light-gray">PMA</Tag></Collection.MetaListItem>
            <Collection.MetaListItem><Tag variant="light-gray">OMB</Tag></Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
        <Collection.Item startElement={(
          <Collection.Thumbnail>
            <img src="https://raw.githubusercontent.com/IHIutch/uswds-tailwind/68343230edc85966427c380f8a0442c6cbda2721/apps/docs/public/assets/images/preview.jpg" alt="" />
          </Collection.Thumbnail>
        )}
        >
          <Collection.Heading>
            <h4><Link href="#" isExternal>Women-owned small business dashboard</Link></h4>
          </Collection.Heading>
          <Collection.Description>
            In honor of National Women's Small Business Month, this dashboard highlights data about women-owned small businesses.
          </Collection.Description>
          <Collection.MetaList aria-label="More information">
            <Collection.MetaListItem>By Constance Lu</Collection.MetaListItem>
            <Collection.MetaListItem><time dateTime="2020-09-30">September 30, 2020</time></Collection.MetaListItem>
          </Collection.MetaList>
          <Collection.MetaList aria-label="Topics" className="flex-row">
            <Collection.MetaListItem><Tag variant="light-gray">SBA</Tag></Collection.MetaListItem>
          </Collection.MetaList>
        </Collection.Item>
      </Collection.List>
    </Collection.Root>
  )
}

Component API

Use List and Item for a collection of related entries. Choose the calendar or thumbnail parts for the media in each item.

Root`<div>`

Place List inside Root.

List`<ul>`

Contains collection entries.

Item`<li>`

Use startElement for media before the entry text.

Prop	Type	Description
`startElement`	`ReactNode`	Adds media or another leading element.

Heading`<div>`

Styles the entry heading.

Description`<div>`

Put the entry summary below Heading.

MetaList`<ul>`

Groups entry metadata.

MetaListItem`<li>`

Use one item per metadata value.

Calendar`<time>`

Displays a date block.

Prop	Type	Description
`dateTime`	`Date (required)`	Supplies the month and day text and the time element date.

CalendarDate`<div>`

Displays the day number.

CalendarMonth`<div>`

Displays the month label.

Thumbnail`<div>`

Holds thumbnail media.

Collection

Examples

Default

Headings Only

Calendar

Media Thumbnail

Component API

Root<div>

List<ul>

Item<li>

Heading<div>

Description<div>

MetaList<ul>

MetaListItem<li>

Calendar<time>

CalendarDate<div>

CalendarMonth<div>

Thumbnail<div>

Root`<div>`

List`<ul>`

Item`<li>`

Heading`<div>`

Description`<div>`

MetaList`<ul>`

MetaListItem`<li>`

Calendar`<time>`

CalendarDate`<div>`

CalendarMonth`<div>`

Thumbnail`<div>`