Skip to content
aidsgnaidsgnaidsgn

Card

aidsgn-card is a passive light-DOM container for a related piece of content. It supplies a surface, border, spacing, and restrained elevation without implying that the whole area is interactive.

Starter planFor an individual project.
<aidsgn-card>
  <strong>Starter plan</strong>
  <span>For an individual project.</span>
</aidsgn-card>

Place an explicit Button or link inside a Card for an action. Do not attach a click handler to a passive card.

Usage guidelines

Section titled “Usage guidelines”
A Starter plan Card contains an explicit View plan details link.A Starter plan Card contains an explicit View plan details link.
Do

Provide an explicit action

Place a Link or Button inside the Card so the action and its semantics are unambiguous.

A Card is incorrectly annotated as one large clickable surface without an explicit descendant action.A Card is incorrectly annotated as one large clickable surface without an explicit descendant action.
Don’t

Keep the passive surface passive

Do not attach click behavior to the whole Card; an explicit descendant action communicates its purpose and interaction model.

A Card groups a project name, status, owner, and due date for one coherent project.A Card groups a project name, status, owner, and due date for one coherent project.
Do

Group one coherent subject

Use Card to contain content that belongs to the same subject or task rather than for decoration alone.

One Card incorrectly wraps unrelated weather, billing, and team sections only to add a border and shadow.One Card incorrectly wraps unrelated weather, billing, and team sections only to add a border and shadow.
Don’t

Avoid decorative grouping

Do not nest unrelated sections merely to obtain a border and shadow.