Buttons
Cards
Cards are glass by default. Two variants: plain, and hover + status edge.
Add data-fw-motion="lively" to any ancestor and every card inside automatically
gains breathe + ring + drop — no extra classes.
Calm (default)
Glass card
Hover + status edge
Coloured hover highlight — hover each; the border + glow use the card's status colour
Brand (default)
Success
Warning
Danger
Lively data-fw-motion="lively"
Glass card — lively
Hover + status edge — lively
Stat cards
$0
Revenue
0
Uptime %
42
Servers
30s
Poll
Forms
Enter a valid email
Nav tabs
Overview pane
Activity pane
Settings pane
Segmented bar — .fw-tabs--segmented, optional .fw-tab__count; active glows when lively
Card-tabs — .fw-cardtabs / .fw-cardtab; a selector styled as cards, only the active one goes lively
89
Total
55
Online
0
Offline
0
Attention
Dropdown / settings panel
Widgets
Modal & toast
Confirm action
This is a frikwork modal. Press Escape, click the backdrop, or the × to close.
Badges & severity
Primary
Online
Warning
Danger
Critical
High
Medium
Low
Table
| Server | Status | Load |
|---|---|---|
| amorphis | Online | 0.42 |
| sirenia | Warn | 1.87 |
Accordion
▸ Section one
Native <details> accordion body.
▸ Section two
Second body.
Progress, spinner, tooltip
Hover me
Lively motion live sample
This grid is wrapped in data-fw-motion="lively", so its plain
.fw-cards automatically drop in — last card first, first card
last — then settle into a slow breathing glow with a conic border
ring travelling the edge. Hit replay to watch the staggered entrance again. Everything disables
under prefers-reduced-motion.
Card 1
Drops in last.
Card 2
Third to land.
Card 3
Second to land.
Card 4
Drops in first.
Extras (opt-in)
Load frikwork-extras.js and call frikwork.hero(cardEl, {report:'Up $505'}) for the takeover effect.