Typography
h1
Display Heading One
h2
Section Heading Two
h3
Subsection Three
h4
Card Title Four
body
The quick brown fox jumps over the lazy dog. Body text at default size, line-height 1.6.
lead
A larger introductory paragraph for page openers.
muted
Secondary, de-emphasized text for supplemental context.
code
const framework = 'Arx';
quote
Design is not just what it looks like — it's how it works.
Colours
Brand & Semantic
Primary
Subtle
Secondary
Subtle
Success
Subtle
Danger
Subtle
Warning
Subtle
Info
Subtle
Surfaces & Backgrounds
Body
Surface
Raised
Border
Text
Default text
Secondary text
Muted text
Inverse text
arx-text-primary
arx-text-success
arx-text-danger
arx-text-warning
arx-text-muted
Buttons
Grid System (12-Column)
col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-md-8
col-md-4
col
col
col
Forms
We never share your email with anyone.
Looks good!
Please enter a valid email address.
https://
Cards
User Profile
Lachlan Janke
Full-stack developer working on the Arx Framework and DarkVision Library.
Statistics
12 Plugins
Active plugins in the library with demo and documentation pages.
No Header Card
A card with only a body — no header or footer sections.
Navbar
Alerts
Information
Your account settings have been updated successfully.
Success
Plugin deployed to production. All systems nominal.
Warning
Your API rate limit is at 80%. Consider upgrading your plan.
Error
Authentication failed. Please check your credentials and try again.
Badges
Primary
Secondary
Success
Danger
Warning
Info
Primary
Secondary
Success
Danger
Warning
Info
Primary
Secondary
Success
Danger
Warning
Info
Small
Default
Large
12
New feature Beta
9
Tables
| # | Plugin Name | Category | Status | Version |
|---|---|---|---|---|
| 1 | Framework (Arx) | CSS | Stable | 1.0.0 |
| 2 | Modal | UI | In Progress | — |
| 3 | Dropdown | Navigation | Planned | — |
| 4 | Tooltip | UI | Planned | — |
| Property | Light Value | Dark Value |
|---|---|---|
--arx-bg | #ffffff | #070a0e |
--arx-primary | #0d6efd | #00c8ff |
--arx-text | #212529 | #a8bfcc |
--arx-border | #dee2e6 | #1c2a3a |
Nav
List Group
Static items
- Active item
- A plain list item
- Another item
- Disabled item
Clickable (hover to see)
Contextual variants
- Primary item
- Success item
- Warning item
- Danger item
- Info item
Numbered
- First numbered item
- Second numbered item
- Third numbered item
Breadcrumb
Pagination
Progress
66%
Spinners
Close Button
Form Extras — Switch, Range & Floating Labels
Stack & HStack
Vertical stack (gap-2)
Item One
Item Two
Item Three
Horizontal stack with divider
Figure