Section Surfaces
Section Surfaces
Glass Card — padding
The general-purpose section surface. padding: none · sm · md · lg.
sm — 12px
Section content sits inside the padding.
md — 16px (default)
Section content sits inside the padding.
lg — 24px
Section content sits inside the padding.
Glass Card — accent
A status glow that survives every Card Style: healthy · warning · critical · info.
Healthy
All services responding.
Warning
Disk at 82% on api-3.
Critical
Queue worker is down.
Info
Maintenance window tonight.
Glass Card — clickable and inner panel
onClick (or hoverable) adds the hover state; followCardStyle={false} keeps an inner panel plain.
Outer section
Inner panel — plain glass, not a card inside a card.
Form Page Section — flat
The default: a title and stacked fields, no background of its own.
Contact
Flat — sits directly on the page.
Form Page Section — glass
glass wraps the fields in a card surface that follows Card Style.
Form Page Section — glass, two columns
columns={2} lays the fields out in two columns on large screens, stacked below.
Preference Card
The settings section — GlassCard with an icon, a help-enabled title and a status slot.
Security alerts
Who is told when a sign-in looks unusual.
Digest
A daily summary instead of one message per event.