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.

Examples

Quantum Design System

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

surface="level-1"
title="Quantum Design System"
description="Technology-agnostic component specifications, DTCG tokens and a vanilla CSS reference implementation."

Open in playground

Team plan

Up to 20 members, unlimited projects and priority support.

surface="level-2"
title="Team plan"
description="Up to 20 members, unlimited projects and priority support."

Open in playground

Notifications

surface="level-1"
title="Notifications"

Open in playground