---
title: Collection (React) - USWDS + Tailwind
description: Display related articles, events, or other items in a compact
  collection, with heading, calendar, and thumbnail examples.
---

# Collection

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

## Examples

### Default

```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

```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

```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

```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.