Hero

Default

Hero Title

This is a hero description.

Centered

Long Hero Title That Spans Multiple Lines to Test Wrapping Behavior

Call to Action

Typography

Heading 1

Heading 2

Heading 3

Heading 4

This is a paragraph.

Section Title

With icon before

Section Title

With chevron after (link)

Section Title

With icon before + chevron after (link)

Section Title

h2 tag, h3 size, tight chevron

Section Title

Long two-line title (h3 size)

This Is a Very Long Section Title That Wraps to Two Lines

Long two-line title (h2 size)

This Is a Very Long Section Title That Wraps to Two Lines

Long two-line title with icon before (h2 size)

This Is a Very Long Section Title That Wraps to Two Lines

Buttons

Link Primary Link Secondary Link Outline

With label (resize to see desktop)

Icon only

Input Styles

Border Input (any surface)

Filled Input (on white surface)

White Input (on gray surface)

Border Input (on gray surface)

Input with Label + Hint Text

Format: +1 XXX XXX XXXX

Input with Label + Error Message

Phone number is required

Select — Bordered (any surface)

Select — Filled, borderless (on white surface)

Select — White, borderless (on gray surface)

Select — Bordered (on gray surface)

Input Group

Text prefix (input-addon)

t.me/

Text suffix (input-addon)

USD

Input + one button

Input + two buttons

Select + two buttons

Select + Text Save Button (row, separated — current app style)

Select + Text Save Button, with label + hint

Current review status of the application

Select + input + button (e.g. phone)

Forms

Radio Buttons
Checkboxes

Pagination

Left Aligned (default)

Center Aligned

Right Aligned

Alerts

This is an info alert with neutral message.
This is a success alert confirming an action.
This is a warning alert about potential issues.
This is an error alert indicating a failure.

Alert with Title

Important Notice

This is a warning alert with a title, followed by a longer description explaining the issue in more detail.

Badges

Primary Secondary Success Warning Danger

Inline usage: Notifications 3 and status Active badges.

Avatar

XS
SM
MD
LG
XL

Placeholder (no image)

A
BK
CL
DM
EN

Row (flex layout)

Horizontal flex with 1rem gap. No default alignment — state it. Different words per axis, so the two "centers" never collide: vertical (align-items) .top / .middle / .bottom; horizontal (justify-content) .start / .center / .end / .between.

Vertical — .top / .middle / .bottom

top-aligned
middle = vertically centered
bottom-aligned

Horizontal — .center / .between / .end

center = horizontally centered
left right
pushed to end

Combine axes — .row.middle.between

Action

Gap modifiers — .xs / .sm / .md / default

Override the default 1rem gap. Compose with alignment modifiers.

A B C .xs — 0.25rem
A B C .sm — 0.5rem
A B C .md — 0.75rem
A B C default — 1rem

Grid

Responsive CSS grid. Collapses to 1 column on mobile (≤48rem).

Combine grid + cols-N (desktop) + sm-cols-N (mobile) + gap-N (spacing).

2 columns

Column 1
Column 2

3 columns

Column 1
Column 2
Column 3

4 columns → 2 on mobile cols-4 sm-cols-2

Column 1
Column 2
Column 3
Column 4

4 columns → 4 on mobile cols-4 sm-cols-4

Column 1
Column 2
Column 3
Column 4

Custom gap cols-3 gap-6

Column 1
Column 2
Column 3

Description List

Label/value metadata (<dl>). Wrap each <dt><dd> pair in a <div>; pick a layout modifier.

Colour is not baked in — add .text-muted to the <dt> (muted label, the common case) or to the <dd> (muted value) as needed.

.vertical — label above value

Category
Buy & Sell
Language
Uzbek
Status
muted value instead
A very long label that itself runs past a single line of text
And a long value too — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.horizontal — side by side

Category
Buy & Sell
Language
Uzbek
Subscribers
30,425
A very long label that now takes up to half the row
And a long value too — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, wrapping inside the value column.

.between — value pushed to the end

Category
Buy & Sell
Language
Uzbek
Subscribers
30,425
A very long label on the left side
And a long value too — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.horizontal — dd containing a form (select + save button, for review)

Category
Buy & Sell
Status

Emphasis — no new classes

Black label, muted value — <dd class="text-muted">:

Category
Buy & Sell
Language
Uzbek
Subscribers
30,425

Bold label, regular value — both black, wrap the label in <strong>:

Category
Buy & Sell
Language
Uzbek
Subscribers
30,425

Regular label, bold value — wrap the <dd> in <strong>:

Category
Buy & Sell
Language
Uzbek
Subscribers
30,425

Vertical — bold label above regular value:

Category
Buy & Sell
Language
Uzbek
Subscribers
30,425

Table — Simple

Name Role
Alice Admin
Bob Editor

Table — Normal

Name Category Status
Item One Longer Name Category A Active
Item Two Category B Pending
Item Three Medium Category A Inactive

Table — Complex (with alignment)

# Product Description Qty Price Total Status
1 Premium Wireless Headphones Noise-cancelling, 40hr battery, Bluetooth 5.3 2 $149.99 $299.98 In Stock
2 USB-C Hub 7-in-1, 4K HDMI, SD card 1 $59.00 $59.00 In Stock
3 Mechanical Keyboard Cherry MX Brown, RGB backlit, full-size aluminum frame 1 $189.00 $189.00 Low Stock
4 Monitor Stand Adjustable height, cable management 3 $34.50 $103.50 Out of Stock
5 Webcam HD 1080p, autofocus, built-in mic 2 $79.99 $159.98 In Stock

Table — Rowspan (top-aligned label)

When a label cell spans multiple rows (rowspan), the browser default is to vertical-center it across the merged height. Add .align-top to pin it to the top-left instead — reads better when each row below has its own distinct content (e.g. one document with several uploaded files, each on its own row).

File Document name
Certificate
2 files
 Download
Download
PDF Passport copy Download

Table — With Form Elements

Select User Email Role Active Actions
Sarah Connor [email protected]
John Doe [email protected]
Maria Garcia [email protected]

Table — Rich Content

Name Email Location Project Last Active Revenue Status
Anna
Anna Lee [email protected] 123 Main Street
San Francisco, CA 94102		 Dashboard Redesign 2 hours ago $12,450.00 Active
Mark
Mark Chen [email protected] 456 Oak Avenue, Apt 12B
New York, NY 10001		 API Integration 3 days ago $8,200.00 Away
SM
 Sara Müller [email protected] — — Never — Inactive
James
James Wright [email protected] 789 Pine Road
Austin, TX 73301		 Mobile App v2 Just now $23,100.50 Active

Table — Inline Editing

# Task Assignee Due Date Priority Actions
1
2
3

Divider

Content above divider.

Content below divider.

Lists

Unordered List

Ordered List

  1. First step in ordered process
  2. Second step with more detail
  3. Third and final step

Unstyled List

Blockquote

This is a blockquote for highlighting important text, quotes, or callouts. It uses a left border for visual emphasis.

Code

Inline code: use font-family: monospace for code elements. 

// Code block example
function greet(name) {
    return "Hello, " + name;
}

greet("World");

Empty States

Empty State: Icon + Title + Description + CTA

Empty State Title

Empty state description text explaining why content is missing and what to do next.
Primary Action

Empty State: Icon + Title + CTA

Empty State Title Without Description

Primary Action

Empty State: Icon + Title + Description

Empty State Title Without Action

Empty state description text with no call-to-action button below.

Empty State: Title + Description + CTA

Empty State Title Without Icon

Empty state description text without icon above the title.
Secondary Action

Empty State: Title + CTA

Empty State Minimal

Primary Action

Empty State: Icon + Description

Empty state with icon and description only, no title or action.

Disclosure

Disclosure: Default (closed)

Disclosure Summary Closed

Disclosure content revealed after clicking summary. Hidden by default.

Disclosure: Open by Default

Disclosure Summary Open

Disclosure content visible on load. Can be collapsed by clicking summary.

Disclosure: With Longer Content

Disclosure Summary With Longer Content

First paragraph of disclosure content with more detail.

Second paragraph showing that disclosure can contain multiple elements and longer text blocks.

Disclosure: FAQ Style (multiple)

Disclosure FAQ Question One

Answer to first question in FAQ-style disclosure group.

Disclosure FAQ Question Two Longer

Answer to second question with more detail in the response.

Disclosure FAQ Question Three

Answer to third question in FAQ-style disclosure group.

Cards

Card Title

This is a card description.

Card Title

See answer →

Upload Card

Dropzone-style file input. Click anywhere on the card to open the file picker; the chosen file previews instantly client-side (image thumbnail via URL.createObjectURL(), or a file icon + name for non-images like PDFs) — no upload round-trip needed to see what was picked. The remove button clears the selection and returns to the empty state.

Empty state (click to upload) — field label always visible, like any other input

Multiple files (e.g. passport — front and back, or any number of pages)