⌥ Normal text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Lite text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Bold text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Bold text `xbold`

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Bold text `xxbold`

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Italic text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Strikethrough text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Underline text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

⌥ Overline text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nihil minima labore soluta, recusandae fuga repellendus nulla explicabo aspernatur assumenda aut nobis totam eius eum ex. Fugiat sunt, aliquid fugit?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

⌥ Normal table

⌥ Table with border

⌥ Sortable table with border

⌥ Sortable table with border and content filtering

⌥ Basic progress

⌥ Progress with label (Chrome only)

⌥ Left navigation

⌥ Right navigation

⌥ Large buttons

⌥ Large outline buttons

⌥ Normal buttons

⌥ Normal outline buttons

⌥ Small buttons

⌥ Small outline buttons

⌥ Button groups

Button » Button » Button »

⌥ Normal cards

⌥ Cards with outlines

⌥ With arrows (default)

1. Home

1. Home
2. Sub-level

1. Home
2. Sub-level
3. Sub-sub-level

⌥ With slashes

1. Home

1. Home
2. Sub-level

1. Home
2. Sub-level
3. Sub-sub-level

⌥ Normal pagination (default)

• « Previous
• 1
• 2
• 3
• 4
• 5
• 11
• 12
• 13
• 14
• 15
• Next »

⌥ Full width distributed pagination

• « Previous
• 1
• 2
• 3
• 4
• 5
• 11
• 12
• 13
• 14
• 15
• Next »

⌥ Small spinners (default)

⌥ Large spinners

Hover over me to show top tooltip Tooltip text

Hover over me to show bottom tooltip Tooltip text

⌥ Show only on mobile

⌥ Show only on desktop and tablet

⌥ Show only on tablet

Works only when user has dark theme enabled through global OS theme settings. This features uses prefers-color-scheme to determine if dark theme should be used.

To enable dark mode add `enable-dark-mode` to body class attribute.

You can test this feature by clicking on this two buttons. Must have dark mode enabled system wide!

Enable dark mode Disable dark mode

If you don't have dark mode enabled you can view this video that demonstrates how it works.