Skip to component standard
Components

OverlaysVisual draft 0.1

Accordion

Expands sections in a vertically stacked information set.

CoreFoundational primitiveHTML first
01 / Preview

The current Angle direction.

How store credit works

Angle uses Shopify’s native store credit so value stays clear and usable online or in store.

Where members see rewards

Angle uses Shopify’s native store credit so value stays clear and usable online or in store.

When credit expires

Angle uses Shopify’s native store credit so value stays clear and usable online or in store.

02 / Decision

What this component must preserve.

Angle component decision

Use when section titles remain useful while content is hidden. Do not conceal essential instructions.

03 / Anatomy

Parts with a specific job.

Item01
Trigger02
Chevron03
Panel04
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 when section titles remain useful while content is hidden. Do not conceal essential instructions.

Avoid

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