Card title
Some quick example text to build on the card.
.alert-icon.The workspace is read-only on Sunday between 02:00 and 04:00 UTC. Exports queued during that window run as soon as it closes.
The card issuer refused the last charge. Update the billing details or pick another card to keep the workspace active.
Admonition with a tinted title bar and body on the page surface. The border follows the intent.
Intent tints the title bar, border, and icon. The body uses var(--surface).
Some quick example text to build on the card.
Card with intent class.
Body with link
| Name | Role | Status |
|---|---|---|
| Alice | Developer | Active |
| Bob | Designer | Away |
| Charlie | Manager | Offline |
Right click a detail below, or use More. The menu reports the exact detail that opened it.
Create a project and invite your team. The dashboard shows activity at a glance.
Manage your subscription, update payment methods, and view invoices.
Configure webhooks, API keys, and custom domains.
General settings panel. Edit profile.
Security settings: 2FA, password, sessions.
Billing panel: plan, invoices, payment method.
Please wait
Content obscured while loading.
Press Ctrl + K to open.
Section label
The speed dial is fixed to the viewport's bottom-end corner. Activate the
primary button to open its native <details> action list.
Use the theme selector at the top to switch data-theme.
A nested [data-theme="forest"] island must recompute the
theme-derived aliases from its own tokens, not inherit the parent's
resolved values: pressed button, selected/disabled choices, card shadow,
focus ring, and text selection should all follow the island's green
palette.
Its shadow follows the island's --shadow-color.
Three contexts that reach components by inheritance. Each block sets one scope on its container; nothing inside restates it.
Contextual text follows the inverted foreground.
A card keeps its own surface inside the block.
sm
Badgedefault
Badgelg
Badge