Reference Page

Heading 2 & Amp

Heading 3

Heading 4

Heading 5 & 6

Heading with paragraphs

Morbi vel imperdiet dui. Vivamus eu gravida leo, at placerat sapien. Nullam mollis dui sit amet accumsan luctus. Nullam eget odio non metus lacinia lacinia. Nunc vehicula felis a dolor fringilla, nec congue dui tristique. Aenean finibus fringilla risus, vitae imperdiet dui auctor vitae. Nunc tincidunt justo lectus, at varius nunc interdum at. Aliquam a molestie sapien, id hendrerit nunc.

Heading 2

Heading 3

Heading 4

Heading 5

Fusce consectetur augue lacus, ac dapibus neque maximus a. Maecenas sollicitudin metus sodales, venenatis sapien at, fringilla enim. Suspendisse dapibus pulvinar nunc, in pretium neque condimentum eu. Donec nec sollicitudin

Pellentesque purus quam, facilisis quis mi non, porttitor malesuada mi. Sed a hendrerit neque. Sed malesuada ex lorem, eget sagittis est semper sed. Praesent convallis est in auctor lacinia. Praesent eu tortor sed massa venenatis volutpat nec id erat. Mauris blandit mollis est a aliquet. Nam convallis leo at blandit vehicula. Vestibulum a tellus in orci viverra consectetur et suscipit justo. Integer finibus placerat ligula at cursus. Morbi laoreet nibh euismod porttitor hendrerit. Suspendisse volutpat et neque placerat molestie. Vivamus justo ligula, accumsan rhoncus tristique vitae, efficitur a justo. Donec vel accumsan mi. Nam bibendum malesuada efficitur.

Prose content and global styles kitchen sink

A paragraph inside an article. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

An unvisited link and a visited link.

Some emphasized text, strong text, underlined text, highlighted text and small text.

~~This text was deleted.~~ This text was inserted.

January 1^st, 1970. H₂O.

The maths kind of variable, x.

Inline code, printf("Hello, world!");, and sample output, Hello, world!.

To exit Emacs, press C-x C-c.

Blockquote styles are the context for this heading level 2 which is long for testing leading and balance

Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elite. Crass mattes bonsektetui Purus sit amt ferment um.

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
Aldo's Huxley, Brave New World

Details and summary

Toggle the details element

Previously hidden content until the details element is in its open state.

Colors

--color-green-light--color-green--color-green-dark

--color-blue-light--color-blue--color-blue-dark

--color-pink-light--color-pink--color-pink-dark

--color-yellow-light--color-yellow--color-yellow-dark

--color-red-light--color-red--color-red-dark

--color-bg--color-bg-accent

--color-fg--color-fg-accent

--color-primary

Tables

Tables inspired by Booktabs
Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9
Footer 1	Footer 2	Footer 3

Table without head
Person	Number
Someone Lastname	900
Person Name	1200
Another Person	1500
Last One	2800

Definition lists

A description list term: A description list detail
Another term: A slightly longer details element to work with.; This is the second one, which is a bit longer

Lists

A simple undordered list

List item one
List item two
List item three, which is a longer item to make sure our marker styles work well for mult-line list items
Nested list item
- Level 3, item one
- Level 3, item two
List item four

Order, numbered lists are next

List item one
List item two
List item three, which is a longer item to make sure our marker styles work well for mult-line list items
Nested list item
1. Level 3, item one
2. Level 3, item two
List item four

A mix of both

Banana
Apple
1. First
2. Second
  - Blue
  - Yellow
  - Green
3. Third
Date

Preformatted text or blocks of code

.flow {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  --flow-space: var(--vspace, 1em);
}

.flow > * {
  /* ↓ Any extant vertical margins are removed */
  margin-block: 0;
}

.flow,
.flow > * + * {
  /* ↓ Top margin is only applied to successive elements */
  margin-block-start: var(--flow-space)
}

Images, figures, pictures and videos

An image in a figure with a caption

A Tokyo street in the early evening dusk. The shot is from under a steel bridge where there is a store, lit up, which in turn, lights up the surrounding area. — Tokyo, Japan, looking stunning in the early evening. By ayumi kubo

An image with lazy loading enabled

A picture element

A video element

Forms

Email address with placeholderNumberPasswordSearchTelephone numberTextUrl with placeholderColorDateDate and timeMonthWeekTimeExample selectYour favorite food:Example datalistExample textareaExample textarea with no rows attributeFile inputA disabled inputA readonly input

Input and select element side by side

Your age: I'm under 18 I'm over 18

I am a legend element for radio inputs We put the label text in a span because we can use :has() to style radios and checkboxes with flexbox The second option should de-select option 1 This one is disabled and can’t be selected

I am also a legend but this time for checkboxes Checkbox number one Checkbox number two has a longer label to make sure our CSS is top notch Checkbox number three is disabled and cant’t be checked

See also button classes on the utilities page.