Card

How to use it

Use to summarize one item -- a report, an article, a plan -- with a short title, one or two lines of description, and a single link to the full content. Keep exactly one primary link per card so it is clear what happens when it is activated.

Accessibility

The card is built from plain, semantic block elements (article, heading, paragraphs, link) so its reading order and structure match what is shown visually, with no roles needed. Body text is 10.35:1 contrast and the link is 6.70:1, both well above 4.5:1.

Source (copy-ready)

<article class="dcl-card">
  <p class="dcl-card__eyebrow">Report</p>
  <h3 class="dcl-card__title">Weekly usage report</h3>
  <p class="dcl-card__description">A plain-language summary of account activity, sent every Monday morning.</p>
  <a href="#" class="dcl-card__link">Read the latest report</a>
</article>
<style>
.dcl-card { max-width: 20rem; padding: 1rem; border-radius: 8px; background-color: #ffffff; border: 1px solid #e2e8f0; }
.dcl-card__eyebrow { margin: 0 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #334155; background-color: #ffffff; }
.dcl-card__title { margin: 0 0 0.5rem; color: #0f172a; background-color: #ffffff; }
.dcl-card__description { margin: 0 0 0.75rem; color: #334155; background-color: #ffffff; }
.dcl-card__link { color: #1d4ed8; background-color: #ffffff; text-decoration: underline; }
.dcl-card__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
</style>