Plain card
A standard card has a header, a body, and an optional footer. Use for product tiles, dashboards, settings groups.
Components
Every common element styled by the active theme. Tweak colours at /theme to see this page recolour live.
Typography
Heading 1 - display title
Heading 2 - section title
Heading 3 - subsection
Heading 4 - block title
Body paragraph. The quick brown fox jumps over the lazy dog. An inline link looks like this, strong and emphasis too. Inline code('like-this') stands out.
“A framework should disappear into the work - visible only when something breaks, invisible the rest of the time.”
- Unordered list item one
- Unordered list item two
- Nested item
- Nested item
- Unordered list item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
// A code block preserves whitespace and uses a monospace font.
$user = $db->row("SELECT * FROM users WHERE id = :id", ['id' => 42]);Forms
Alerts
Info. The next deploy ships an updated SEO bundle. Nothing to do on your side.
Saved. Your changes are live across all themes.
Heads up. Your last backup is older than 7 days.
Failed. Couldn't reach the database - check
db.host in .env.Badges & pills
Primary
Secondary
Success
Warning
Danger
Muted
New
Live
Beta
Deprecated
Cards
Highlighted card
The same card with an accent-coloured border to draw the eye. Pair with a status pill to clarify state.
No-chrome card
Header and footer omitted when the title is the body. Lower visual weight, useful for repeating lists.