Skip to component standard
Components

Data displayVisual draft 0.1

Card

Groups content that must be understood and acted on as one unit.

CoreFoundational primitiveHTML first
01 / Preview

The current Angle direction.

Available store credit
$128.40

Updated after the member’s latest return.

02 / Decision

What this component must preserve.

Angle component decision

Use borders and spacing before shadow. Do not wrap every section in a card or nest cards without a behavioral reason.

03 / Anatomy

Parts with a specific job.

Container01
Header02
Content03
Footer or action04
04 / States

The happy path is only one state.

01Default
02Hover
03Active
04Focus
05Disabled
06Loading
07Success
08Error
05 / Guidance

Use the contract, not the screenshot.

Do

Use borders and spacing before shadow. Do not wrap every section in a card or nest cards without a behavioral reason.

Avoid

Do not create a one-off version that bypasses shared states, tokens, focus behavior, or the component decision documented here.