Reference Page

Heading 2 & Amp

Heading 3

Heading 4

Heading 5

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

Prose content and global styles kitchen sink

A paragraph inside an article will start with an initial letter in drop style. 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 elit. Cras mattis consectetur purus sit amet fermentum.

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

Details and summary

Toggle the details element

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

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 and a long third column
Person	Number	Third Column
Someone Lastname	900	Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name	1200	Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person	1500	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One	2800	Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Table with column headers
	Person	Number	Third Column
This column’s heading	Someone Lastname	900	Nullam quis risus eget urna mollis ornare vel eu leo.
Another column heading	Person Name	1200	Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Code in tables should have more paired back styles	Another Person	`1500`	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last column header	Last One	2800	Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

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 placeholder

Number

Password

Telephone number

Text

Url with placeholder

Color

Date

Date and time

Month

Week

Time

Example select

Example multiple select

Example datalist

Example textarea

Example textarea with no rows attribute

File input

A disabled input

A readonly input

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.