Primary

Secondary

Tertiary

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph Styles

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.

Integer posuere dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.

 

---

 

Lists

Unordered

• List item one
• List item two
• List item three
  • List item one
  • List item two
  • List item three
  • List item four
• List item four

Ordered

1. List item one
2. List item two
3. List item three
   • List item one
   • List item two
   • List item three
   • List item four
4. List item four

Definition

Coffee

Black hot drink

Milk

White cold drink

Comp List

• Display Facebook comments live in your video for real-time engagement.
• Show real-time scores for live sports streams with our customizable Scoreboard extension.
• Connect your audio mixer to ensure perfect audio for viewers.
• Share to multiple Facebook destinations at once with Facebook crossposting.
• Share your phone or computer screen with the world.
• Schedule your livestream on Facebook to notify followers early.
• Access tons of video tutorials and step-by-step guides.
• Get prompt email support for specific questions.
• Find inspiration and camaraderie in our lively Facebook group of Switcher enthusiasts.

Checklists

• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.

• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.
• Maecenas faucibus mollis interdum.

 

---

 

Blockquote

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. 

 

---

 

Inline Elements

This is a link in its most default state.

You can use the <mark> tag to highlight text.

You can use the <abbr> tag to format abbreviations, like HTML.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

 

---

 

Tables

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

Text Input
Select Something Another Thing A Third Thing

Background Colors

Orange

bg-orange

Orange Dark

bg-orange-dark

Orange Light

bg-orange-light

Blue

bg-blue

Dark Blue

bg-dblue

Gray

bg-gray

Teal

bg-teal

Teal Light

bg-teal-light

White

.bg-white

Text Colors

Switcher Blue

color-blue

Switcher Orange

color-orange

Switcher Teal

color-Teal

Text Alignment

Align Left

left

Align Center

center

Align Right

right

Misc. Text

Uppercase

uppercase

SemiBold

semibold

Strikethrough

strikethrough

Underline

underline

Opacity

Opacity Half

opacity-half

Spacing

We have a convenient selection of classes that add margin or padding to the top or bottom of an element. The structure of the class is as follows, "Type of padding, m for margin, p for padding" + "Placement: t for top, b for bottom" + "-" + "0-10 for amount of em's, 1 = 1em and so on". So a class for margin top of 3em will look like "mt-3".

Spacing Examples

Margin Top 3em

mt-3

Margin Bottom 5em

mt-5

Padding Top 7em

pt-7

Padding Bottom 1em

pt-1

Visibility

Show

show

Invisible

invisible

Visible Phone

visible-phone

Visible Tablet

visible-table

Visible Desktop

visible-desktop

Hidden

hidden

Hidden Phone

hidden-phone

Hidden Tablet

hidden-tablet

Hidden Desktop

hidden-desktop

Layout

2 CSS columns on tablet and up

columns-two

Container

container

Flex Classes

A flex layout can be achieved by surrounding items in a .row, .row-top, or .row-wrap class. Each child item should contain a class of .column to take up any available space evenly.

Row Flex Container Aligned Center

row

Row Flex Container Top Aligned

row-top

Row Wrapped on Tablet and Up

row-wrap

Column

column