Card

A bordered content container, usually in a grid of peers.

The default card is a quiet surface. Use cc-card--accent to feature an item, or cc-card--raised when a surface needs a small amount of elevation.

Town Clerk · Online service

Renew your dog license

Keep your companion covered for the year ahead. Have your current license number and vaccination record ready.

Read the card guidance

Show the markup

<article class="cc-card cc-card--accent cc-card--raised">
  <p class="cc-meta">Town Clerk · Online service</p>
  <h2 class="cc-heading cc-heading--md">Renew your dog license</h2>
  <p class="cc-paragraph">Keep your companion covered for the year ahead. Have your current license number and vaccination record ready.</p>
  <a class="cc-link" href="#card-guidance">Read the card guidance <svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#arrow-right"/></svg></a>
</article>

Dog Licenses

Renew or register through the Town Clerk.
Vital Records

Birth, death and marriage certificates.
Town Hall renovation

Images inside a card scale to fit and pick up the small radius.

Show the markup

<ul class="cc-card__grid">
  <li class="cc-card">
    <h3 class="cc-heading cc-heading--sm"><a class="cc-link" href="#">Dog Licenses</a></h3>
    <p class="cc-paragraph cc-paragraph--sm">Renew or register through the Town Clerk.</p>
  </li>
  <li class="cc-card">
    <h3 class="cc-heading cc-heading--sm"><a class="cc-link" href="#">Vital Records</a></h3>
    <p class="cc-paragraph cc-paragraph--sm">Birth, death and marriage certificates.</p>
  </li>
  <li class="cc-card">
    <img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&q=80" alt="A brick town hall with a white clock tower">
    <h3 class="cc-heading cc-heading--sm"><a class="cc-link" href="#">Town Hall renovation</a></h3>
    <p class="cc-paragraph cc-paragraph--sm">Images inside a card scale to fit and pick up the small radius.</p>
  </li>
</ul>

Dog Licenses

Renew or register through the Town Clerk.
Trash & Recycling

Pickup days, bulk items and the transfer station.
Pay a Bill

Property tax, water and excise.

Show the markup

<ul class="cc-card__grid">
  <li class="cc-card cc-card--icon">
    <span class="cc-card__icon" aria-hidden="true"><svg class="cc-icon"><use href="/assets/curbcut-icons.svg?v=1ac57b0#dog"/></svg></span>
    <h3 class="cc-heading cc-heading--sm"><a class="cc-link" href="#">Dog Licenses</a></h3>
    <p class="cc-paragraph cc-paragraph--sm">Renew or register through the Town Clerk.</p>
  </li>
  <li class="cc-card cc-card--icon">
    <span class="cc-card__icon" aria-hidden="true"><svg class="cc-icon"><use href="/assets/curbcut-icons.svg?v=1ac57b0#trash-2"/></svg></span>
    <h3 class="cc-heading cc-heading--sm"><a class="cc-link" href="#">Trash &amp; Recycling</a></h3>
    <p class="cc-paragraph cc-paragraph--sm">Pickup days, bulk items and the transfer station.</p>
  </li>
  <li class="cc-card cc-card--icon">
    <span class="cc-card__icon" aria-hidden="true"><svg class="cc-icon"><use href="/assets/curbcut-icons.svg?v=1ac57b0#receipt"/></svg></span>
    <h3 class="cc-heading cc-heading--sm"><a class="cc-link" href="#">Pay a Bill</a></h3>
    <p class="cc-paragraph cc-paragraph--sm">Property tax, water and excise.</p>
  </li>
</ul>

Accessibility

The heading link is the card's action — don't wrap the whole card in an anchor (nested interactive content and unreadable link text).
The icon is decorative. In an icon card the heading carries the meaning, so the tile is aria-hidden. Never let the icon be the only thing that distinguishes two cards.
A card is never just an image. The heading is required; an image may support it, above the heading, but cannot replace it. An image-only card has no accessible name, nothing for a screen reader to announce in the grid, and nothing to act on.
Card grids are lists: item count is announced, and reading order is source order.