Style Guide

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Elements

This is a paragraph.

This is strong text.
This is emphasized text.
This is marked text.
This is deleted text.
This is inserted text.
This is subscript text.
This is superscript text.
This is a blockquote with the class .fit-content.
This is preformatted text.
  It preserves whitespace and line breaks.
  Pre-formatted text does not wrap, and is typically not mobile friendly.
  It also has the class .fit-content.
# This is inline code.
# For multi line code snippets use pre with a code tag inside.

# This example uses the utility classes
  - .fit-content to fit the code to the content width
  - .wrap to wrap the code to the next line if it is too long.

# It also uses the code specific class .multiline to indicate 
# that the code is multiline.

def hello_world():
print("Hello, World!")

# Call the function
hello_world()

Lists

Unordered List

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3

Ordered List

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

Definition List

Definition term 1
Definition description 1
Definition term 2
Definition description 2

Tables

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Buttons

Forms

Images

Image Types

Placeholder Image

PNG image

Placeholder Image

JPEG image

Placeholder Image

SVG image

Figure

Placeholder Image
Figcaption for the image.

Audio and Video

Canvas