Typography & Headings

This is an H2 Heading

This is an H3 Heading

This is an H4 Heading

This is a paragraph with bold text, italic text, and a link. The paragraph uses the secondary text color for comfortable reading on dark backgrounds.

Inline code snippets can be used for technical terms or file names like config.json.

This is small text, useful for captions or metadata.

Buttons

Badges

Default Primary Success Warning Error

Success text • Warning text • Error text

Alerts

Success! Your changes have been saved successfully.

Warning! Please review your settings before continuing.

Error! Something went wrong. Please try again.

Form Controls

Text Input

Email Input

Select

Textarea

Checkboxes, Radios & Sliders

Remember me Send notifications

Option A Option B

Enable dark mode Auto-save drafts

Volume

Code Block

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));

Table

Name	Status	Role	Actions
Alice Johnson	Active	Admin	Edit
Bob Smith	Pending	User	Edit
Carol Williams	Inactive	User	Edit

Card One

This is a card in a 3-column grid layout. Perfect for dashboards or feature showcases.

Card Two

Cards automatically stack on smaller screens thanks to responsive breakpoints.

Card Three

The gap between cards uses the --content-gap variable for consistency.