Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A normal paragraph with strong text, bold text, emphasis, italic text, underlined text, small print, highlighted text, inserted text, deleted text, struck text and HTML. Press Ctrl + S to save. Water is H₂O and E = mc².

Here is a plain link, a secondary link, a contrast link and a link marked as current.

• First item
• Second item with children
  • Nested one
  • Nested two
• Third item

1. Open the box
2. Read the manual
   1. Skim the intro
   2. Read the warnings
3. Plug it in

Cascade

The order in which competing rules are resolved.

Specificity

How strongly a selector claims an element.

Simplicity is prerequisite for reliability.

Buttons

Primary Secondary Contrast Disabled

Primary outline Secondary outline Contrast outline Disabled outline

Link button Secondary link Contrast link Outline link Disabled link

Tables

Striped

Code

Inline display: grid, a keyboard shortcut Alt + Tab and program output Build finished in 1.2s.

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

console.log(greet("world"));

npm run build
Done.

Media

Forms

Components

Accordion

Card

Dropdown

Group

Loading

Loading paragraph

Nav

Progress

Tooltip

Top Bottom Left Right Button Plain text

Layout

Nested theme

RTL

نص تجريبي قصير لاختبار الاتجاه من اليمين إلى اليسار، مع رابط.

اقتباس قصير.