Black & White

#fff

#000

Primary

100

200

300

400

500

600

700

800

900

Secondary

100

200

300

400

500

600

700

800

900

Gray

100

200

300

400

500

600

700

800

900

Red

100

200

300

400

500

600

700

800

900

Orange

100

200

300

400

500

600

700

800

900

Yellow

100

200

300

400

500

600

700

800

900

Green

100

200

300

400

500

600

700

800

900

Teal

100

200

300

400

500

600

700

800

900

Blue

100

200

300

400

500

600

700

800

900

Indigo

100

200

300

400

500

600

700

800

900

Purple

100

200

300

400

500

600

700

800

900

Pink

100

200

300

400

500

600

700

800

900

Family

system-ui

-apple-system

BlinkMacSystemFont

"Segoe UI"

Roboto

"Helvetica Neue"

Arial

"Noto Sans"

sans-serif

"Apple Color Emoji"

"Segoe UI Emoji"

"Segoe UI Symbol"

"Noto Color Emoji"

Style

weight

hairline ¹⁰⁰

thin ²⁰⁰

light ³⁰⁰

normal ⁴⁰⁰

medium ⁵⁰⁰

semibold ⁶⁰⁰

bold ⁷⁰⁰

extrabold ⁸⁰⁰

black ⁹⁰⁰

italic

hairline italic

thin italic

light italic

normal italic

medium italic

semibold italic

bold italic

extrabold italic

black italic

Headings

h1. Heading 40px

h2. Heading 32px

h3. Heading 28px

h4. Heading 24px

h5. Heading 20px

h6. Heading 16px

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Address

Rotala, Inc.

Green Office

1-1 Alpha, Beta, Somewhere

+00-11-2222-3333 (Main)

first.last@example.com

Semantic Elements

I18Nabbr

Boldstrongb

Citationcite

Hello World!code

~~Deleted~~del

Emphasisem

Italici

Insertedins

Ctrl + Skbd

Highlightedmark

漢 kan字 ji ruby

~~Strikethrough~~s

Samplesamp

Text _Subscriptedsub

Text ^{Superscripted}sup

Text italic

Underlineu

x = y + 2var

Code

<!-- code snippets -->
  F12
  <p>This is an example</p>
  <a>This is an example</a>
  <span>This is an example</span>
  <b>This is an example</b>

List

Unordered List

Item 1
Item 2
- Sub-Item 1
- Sub-Item 2
Item 3

Ordered List

Item 1
Item 2
1. Sub-Item 1
Item 3

Description List

Item 1: Description for Item 1
Item 2: Description for Item 2
Item 3: Description for Item 3

Accordion

checkbox accordion with indicator

One

Two

radio accordion with indicator

One

Two

Avatar

avatar initial

avatar image

avatar initial rounded

avatar image rounded

avatar status

avatar icon status

Badge

status badge

text badge

Breadcrumb

default

disabled

Button

default

disabled

outline

outline disabled

primary

primary disabled

secondary

secondary disabled

Checkbox

default

Check 1 Check 2

disabled

Check 1 Check 2

indeterminate

Check 1 Check 2

Drawer

left

This is a drawer

right

This is a drawer

top

This is a drawer

bottom

This is a drawer

Divider

default

vertical

left

right

horizontal content

vertical content

left

right

Input

input default

input disabled

textarea default

textarea disabled

input outline

input outline disabled

textarea outline

textarea outline disabled

input with label

a label

textarea with label

a label

Link

default

link

disabled

link

underline

link

underline disabled

link

Modal

default

fullscreen

scrollable

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.