Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Buttons

Default Button Primary Button Secondary Button Tertiary Button

Paragraphs

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio architecto pariatur assumenda voluptate ea explicabo maxime, tenetur, dicta at molestias cupiditate asperiores perspiciatis ducimus sint! Eos sapiente ipsam suscipit. Amet deserunt commodi dolore, dicta aspernatur pariatur veritatis id ab eum porro quae, vitae debitis impedit. Voluptate labore nesciunt explicabo dolore!

<em>

This is some text with a bit of emphasis applied to it. That is to say, it's italicized.

<strong>

This text is making a strong statement. In other words, it's some bold text.

Tooltips

Unordered List

  • This is a list item
  • This is another list item
  • This is a third list item

Ordered List

  1. This is a list item
  2. This is another list item
  3. This is a third list item

Image

Placeholder Image
This is a caption on a placeholder image, and this is a link.

Tables

Simple Table

NameFavorite Color
BobYellow
MichellePurple

Complex Table

A complex table
Invoice #12345678914 January 2025
Pay to:
Acme Billing Co.
123 Main St.
Cityville, NA 12345		 Customer:
John Smith
321 Willow Way
Southeast Northwestershire, MA 54321
Name / DescriptionQty.@Cost
Paperclips10000.0110.00
Staples (box)1001.00100.00
Subtotal 110.00
Tax 8%8.80
Grand Total$ 118.80

Blockquotes

With <cite>:

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 (citation)

With <q>:

Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text with quotation marks.

Forms