Default Card
A subtle border and light background define the card boundaries.
Components
Semantic, accessible UI components built on the Fluid foundation. Each component respects user preferences and adapts to its container.
Buttons
Buttons invite interaction with clear affordance and gentle feedback.
Variants
Sizes
States & Modifiers
Button Group
Cards
Cards group related content with subtle elevation and container-query responsiveness.
Variants
Elevated Card
Floating appearance with shadow for emphasis.
Outlined Card
Border emphasis without background fill.
Interactive Cards
Clickable Card
The entire card is a link. Hover and focus states guide interaction.
Interactive Elevated
Click anywhere on this card to trigger an action.
Card with Media
Serene Landscapes
Finding peace in nature's quiet corners.
Horizontal Layout
Cards adapt to wider containers with horizontal media placement.
Stat Cards
2,847
Active Users
99.9%
Uptime
4.8
User Rating
Navigation
Guide users through your interface with clear, natural navigation patterns.
Tabs
Contained Tabs
Breadcrumbs
Pagination
Form Components
Forms that feel welcoming, with clear feedback and graceful validation.
Input Group
https://
Checkboxes
Radio Buttons
Toggle Switches
Form Layout
Status & Progress
A comprehensive system for displaying scores, progress, and status. Uses data-status as the single source of truth for all visual styling.
Score Legend / Thresholds
≥80%
Good
60-79%
Moderate
<60%
Needs Attention
Progress Bars by Status
Compliance Score
23
/
26
· 88%
Documentation Coverage
17
/
27
· 63%
Security Checks
4
/
10
· 40%
Pending Review
—
Progress Bar Sizes
Small
75%
Default
75%
Large
75%
Extra Large
75%
Progress with Threshold Markers
Overall Score
92%
Progress Score
72%
Risk Assessment
45%
Status Badges
Good
Moderate
Severe
Neutral
88%
63%
40%
Passing
Review
Failing
Active
Pending
Error
Badge Sizes
Small
Default
Large
Fraction Display
23
/
26
17
/
27
4
/
10
Status Cards
Compliance
Passing
88%
23 of 26 requirements met
Documentation
Review
63%
17 of 27 items documented
Security
Failing
40%
4 of 10 checks passing
Inline Status in Context
API Response Time
142ms
Memory Usage
78%
Error Rate
12.4%
Simple Progress (Percentage Only)
Upload Complete
100%
Processing...
67%
Low Storage
23%
Minimal Progress (Track Only)