Switcher Web Style Guide
A little something to show what styles are available for the Switcher Studio website. This should be ever-evolving just like the Switcher brand.
Last updated on January 14th, 2021
Colors
Primary
Orange
#ed5623
Secondary
Blue Dark
#042c3b
Blue
#0c4f60
Gray Light
#f4f5f6
Orange Light
#0c4f60
Tertiary
Teal Light
#1ebdc1
Teal
#138f99
Gray
#515151
Gray Dark
#3f4e57
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Fancy Heading Styles
All headings can have classes added them to create the displayed header style. The use of modifier classes allows us to change the location and color of decorative underline. Available modifiers currently are fancy--center and fancy--reverse
Fancy Heading
A Fancy Centered Heading
A Fancy Centered and Reversed Heading
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
- List item one
- List item two
- List item three
- List item one
- List item two
- List item three
- List item four
- 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 |
Buttons
Graphic Patterns
Form Elements
Utility Classes
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
This will automatically calculate the height of the content and split it into two columns. Unlike a flex layout where you have to make the two columns manually in the code. This will also eliminate unwanted spacing between columns on the mobile layout.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
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
Column 1
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Column 2
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.