Component

Card

Published on

Description

The Card component groups related content and actions into a single visual container. Cards typically display a preview image, heading, short description, and a call-to-action link.

Use cards when presenting collections of similar items such as articles, products, or features. Avoid cards for single items where a simpler layout would suffice.

Example

Open in new tab
View HTML markup 
  <ul>
  <li>
    <article is="ds-card" aria-labelledby="card-1">
      <div class="text">
        <h3><a href="#" aria-describedby="1">Card title </a></h3>
        <p>Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur</p> <span aria-hidden="true" id="1">Read more</span>
      </div>
      <div class="img">
        <picture><img alt="" decoding="async" fetchpriority="low" loading="lazy" height="179" width="320" src="/img/placeholder/16_9.320x179.png" onload="this.__e=event" onerror="this.__e=event" /></picture>
      </div>
    </article>
  </li>
</ul>

Accessibility

  • The card heading contains the primary link, making the entire card purpose clear to screen readers.
  • The call-to-action text uses aria-describedby to associate it with the card, and aria-hidden="true" to avoid duplicate announcements.
  • Images should include meaningful alt text or an empty alt="" for decorative images.

References

  • Links — for standalone navigation without card styling
  • Dialog — for modal content that requires user attention

Variables

None