Buttons

Default

Link button

Outline variant

Ghost variant

Custom colors

Input buttons

Typography

Font sizes

Size 1 — Hero headline

Size 2 — Page title

Size 3 — Section heading

Size 4 — Subheading

Size 5 — Lead text

Size 6 — Body (default)

Size 7 — Small text

Size 8 — Caption

Font weights

Light (300) Normal (400) Bold (700)

Text styles

Italic Uppercase

Text element

Paragraphs and links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. At vero eos et accusam et justo duo dolores et ea rebum. Italic text here.

Unordered lists (nested)

Level 1 — square
Level 1 item
- Level 2 — disc
- Level 2 item
  - Level 3 — circle
  - Level 3 item
Level 1 item

Ordered lists (nested)

Level 1 — decimal
Level 1 item
1. Level 2 — lower-alpha
2. Level 2 item
  1. Level 3 — lower-roman
  2. Level 3 item
Level 1 item

Blockquote

This is a blockquote with an accent-colored left border. It can contain multiple paragraphs.

Second paragraph inside the blockquote.

Code

Inline code element inside a paragraph.

// Code block
    const greeting = "Hello, cleacss!";
    console.log(greeting);

Horizontal rule

Inline elements

Use mark to highlight important text.

Press Ctrl + Shift + P to open the command palette.

The W3C maintains web standards.

Bold text and italic text and underlined text.

Dialog

Details / Summary (Accordion)

Single

Click to expand this section

This is the hidden content that appears when the details element is open.

Accordion group

Section one

Content for section one. The borders merge between stacked details elements.

Section two

Content for section two.

Section three

Content for section three.

Progress

25% 50% 75% 100%

Table

Name	Role	Status
Alice	Developer	Active
Bob	Designer	Pending
Charlie	Manager	Inactive
3 members total

Title element

Title h1

Title h2

Title h3

Title h4

Title h5

Title h6

Form inputs

Text Helpful message

Email

Password

Number

Date

Color

File

Range

Textarea

Select

Readonly

Disabled

With error This field has an error.

Toggle switch

Disabled switch

Checkbox option

Radio option A

Radio option B

Text color utilities

Neutral

0 50 100 200 300 400 500 600 700 800 900 1000

Semantic

Accent Success Warning Error Info

Background color utilities

Neutral backgrounds

0 50 100 200 300 400 500 600 700 800 900 1000

Accent backgrounds

Accent

Semantic backgrounds

Success Warning Error Info

Border radius utilities

has-radius-0

has-radius-s

has-radius

has-radius-rounded

Width & height utilities

has-w-full (100% width)

has-h-full inside 200px parent

Visibility utilities

is-hidden / is-visible

This text is hidden on medium+ screens (is-hidden:m)

This text is visible on medium+ screens only (is-visible:m)

This text is visible on large+ screens only (is-visible:l)

Screen reader only

The button below has a visually hidden label:

Loading skeleton

Loading title

Loading text line

Loading button

Spacing utilities

has-p-2xs

has-p-xs

has-p-s

has-p-m

has-p-l

has-p-xl

Alignment utilities

has-text-left

has-text-center

has-text-right

Flex direction

Column on mobile

Row on medium+

Container queries

The .container class sets container-type: inline-size for use with @container queries in your CSS.

This is a container query context. Write @container rules in your CSS to respond to this element's width.

::selection styling

Select this text to see the custom selection colors (accent text on base background). Selection colors are customizable via --selection-background and --selection-color.

Anchor scroll margin

Click this link to jump to the Buttons section. The :target pseudo-class applies scroll-margin-top so content isn't hidden behind sticky headers.

Max width utilities

max-width-1 Torquent gravida luctus

max-width-2 gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

max-width-3 Torquent gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

max-width-4 Torquent gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

max-width-5 Torquent gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

max-width-6: optimal reading width Torquent gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

max-width-7 Torquent gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

max-width-8 Torquent gravida luctus tempus sodales ad viverra lacinia donec ipsum tellus faucibus ut sem nam, imperdiet suscipit habitant ex ante aenean senectus dapibus fringilla quisque facilisi ligula auctor.

Accessibility

This page respects prefers-reduced-motion: reduce. When enabled, all animations and transitions are effectively disabled, and scroll-behavior is set to auto.