Skip to content

role container

Card draft v0.1.0

A surface that groups a title and related content as one unit.

A card gathers what belongs together, a title and its content, on a raised surface with its own edge, so a page of many things reads as a grid of units: a project in a list of projects, a plan in a pricing page, a setting group. It is a surface, not a control: a card that opens something holds a link or a button; a card is never itself clickable. Its surface level follows the Color foundation.

Playground

Quantum Design System

Technology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation.

HTML 
<div class="ds-card" data-surface="level-1">
  <h3
    class="ds-card__title"
    data-part="title"
  >Quantum Design System</h3>
  <p
    class="ds-card__description"
    data-part="description"
  >Technology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation.</p>
</div>