Card
A bordered content container, usually in a grid of peers.
-
Dog Licenses
Renew or register through the Town Clerk.
-
Vital Records
Birth, death and marriage certificates.
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>
</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).
- Card grids are lists: item count is announced, and reading order is source order.