Brand Colors
Primary
Teal
#34a4a6
Secondary
Dark Teal
#11495d
Tertiary
Red
#e63927
Quaternary
Orange
#f7941e
Quinary
Yellow
#ffd040
Senary
Dark Gray
#2b2b2a
Alternate Brand Colors
Primary
#34a4a6
Primary
(Dark)
#287e7f
Primary
(Light)
#47c3c6
Secondary
#11495d
Secondary
(Dark)
#092732
Secondary
(Light)
#196b88
Tertiary
#e63927
Tertiary
(Dark)
#c32717
Tertiary
(Light)
#eb6355
Quaternary
#f7941e
Quaternary
(Dark)
#da7a08
Quaternary
(Light)
#f9ab4f
Quinary
#ffd040
Quinary
(Dark)
#ffc30d
Quinary
(Light)
#ffdd73
Senary
#2b2b2a
Senary
(Dark)
#111111
Senary
(Light)
#454543
Default Brand Colors
Black
#000000
Black
(Light)
#3b3b3b
Border
#dedede
Gray
#cccccc
Gray
(Dark)
#b3b3b3
Gray
(Light)
#e6e6e6
White
#ffffff
White
(Dark)
#f2f2f2
Brand Typography
H1. This is a sample H1 heading block. It is a lengthy header to gauge line height and other typography elements.
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
H2. This is a sample H2 heading block. It is a lengthy header to gauge line height and other typography elements.
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
H3. This is a sample H3 heading block. It is a lengthy header to gauge line height and other typography elements.
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
H4. This is a sample H4 heading block. It is a lengthy header to gauge line height and other typography elements.
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
H5. This is a sample H5 heading block. It is a lengthy header to gauge line height and other typography elements.
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
H6. This is a sample H6 heading block. It is a lengthy header to gauge line height and other typography elements.
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
Paragraph Blocks
Paragraph. This is a sample reusable paragraph block. We’ll use it to show general paragraph properties and characteristics, including font family, font size, font styles such as italic text and linked text, as well as line height, font weights such as bold text and more. Thank you for viewing this custom brand guide, we hope it’s a helpful resource for you as the website owner and content creator.
Paragraph small. This is a sample of a small paragraph text block. It is the second smallest text size option, and is typically used for captions or other descriptive text. This text is different from the regular website text copy, and is therefore differentiated hierarchically by its small size and is occasionally italicized as well.
Paragraph x small. This is a sample of an extra small paragraph text block. It is the smallest text size option for this theme, and is typically used for legalese, copyright or other required informational text. This text is different from the regular website text copy and is therefore differentiated hierarchically by its extra small size and is often italicized as well. This is an example of an extra small paragraph text block. It is the smallest text size option for this theme, and is typically used for legalese, copyright or other required informational text. This text is different from the regular website text copy and is therefore differentiated hierarchically by its extra small size and is often italicized as well.
List Item Blocks
Unordered List
- Unordered list item. This is a sample of an unordered list item in a list block. We’ll use it to show general list item properties and characteristics, including list style, font size and more. Generally, list items default to the default paragraph size and styles.
- Unordered list item. This is a sample of an unordered list item in a list block. We’ll use it to show general list item properties and characteristics, including list style, font size and more. Generally, list items default to the default paragraph size and styles.
Ordered List
- Ordered list item. This is a sample of an ordered list item in a list block. We’ll use it to show general list item properties and characteristics, including list style, font size and more. Generally, list items default to the default paragraph size and styles.
- Ordered list item. This is a sample of an ordered list item in a list block. We’ll use it to show general list item properties and characteristics, including list style, font size and more. Generally, list items default to the default paragraph size and styles.
Buttons Block
Solid Buttons
Solid Arrow Buttons
Ghost Buttons
Tabs Block
Yes indeed it’s true, lefties are a very unique ten (ish) percent! They’re typically super versatile, interesting humans, with a strong and proud underground culture. August 13th is Left-Handers day, and some fun facts include having eight former U.S. presidents and 1 in 4 Apollo astronauts being lefties. Studies also found that lefties adjust easier to seeing underwater, are better drivers, live to be nine years younger than right-handers.
The highest rates of left-handedness can be found in North America, Australia, New Zealand and western Europe.
Omg this totally matters, and the answer is most definitely over the top. The primary goal here is to always have the end of the roll as visible and easily reachable/accessible as possible. This way the user will most efficiently complete their task and never become irritated or confused.
Yes, this is answer three. This is just test content for the third frequent question.
Tabs (Vertical) Block
Yes indeed it’s true, lefties are a very unique ten (ish) percent! They’re typically super versatile, interesting humans, with a strong and proud underground culture. August 13th is Left-Handers day, and some fun facts include having eight former U.S. presidents and 1 in 4 Apollo astronauts being lefties. Studies also found that lefties adjust easier to seeing underwater, are better drivers, live to be nine years younger than right-handers.
The highest rates of left-handedness can be found in North America, Australia, New Zealand and western Europe.
Omg this totally matters, and the answer is most definitely over the top. The primary goal here is to always have the end of the roll as visible and easily reachable/accessible as possible. This way the user will most efficiently complete their task and never become irritated or confused.
Yes, this is answer three. This is just test content for the third frequent question.
Tabs -> Accordion Block
Yes indeed it’s true, lefties are a very unique ten (ish) percent! They’re typically super versatile, interesting humans, with a strong and proud underground culture. August 13th is Left-Handers day, and some fun facts include having eight former U.S. presidents and 1 in 4 Apollo astronauts being lefties. Studies also found that lefties adjust easier to seeing underwater, are better drivers, live to be nine years younger than right-handers.
The highest rates of left-handedness can be found in North America, Australia, New Zealand and western Europe.
Omg this totally matters, and the answer is most definitely over the top. The primary goal here is to always have the end of the roll as visible and easily reachable/accessible as possible. This way the user will most efficiently complete their task and never become irritated or confused.
Yes, this is answer three. This is just test content for the third frequent question.
Accordion Block
Yes indeed it’s true, lefties are a very unique ten (ish) percent! They’re typically super versatile, interesting humans, with a strong and proud underground culture. August 13th is Left-Handers day, and some fun facts include having eight former U.S. presidents and 1 in 4 Apollo astronauts being lefties. Studies also found that lefties adjust easier to seeing underwater, are better drivers, live to be nine years younger than right-handers.
The highest rates of left-handedness can be found in North America, Australia, New Zealand and western Europe.
Omg this totally matters, and the answer is most definitely over the top. The primary goal here is to always have the end of the roll as visible and easily reachable/accessible as possible. This way the user will most efficiently complete their task and never become irritated or confused.
Yes, this is answer three. This is just test content for the third frequent question.
Table (Responsive) Block
| School Name | City | State | Time Frame | Status |
|---|---|---|---|---|
| College | ||||
| Art Institutes International, Minnesota | Minneapolis | Minnesota | 2005 – 2007 | Graduated |
| South Dakota State University | Brookings | South Dakota | 1994 – 1999 | Graduated |
| High School | ||||
| Lincoln High School | Sioux Falls | South Dakota | 1992 – 1994 | Graduated |
| Middle School | ||||
| Patrick Henry Middle School | Sioux Falls | South Dakota | 1989 – 1991 | Passed |
| Elementary | ||||
| Longfellow Elementary | Sioux Falls | South Dakota | 1987 – 1988 | Passed |
| Horace Mann Elementary | Sioux Falls | South Dakota | 1986 | Passed |
| Hayward Elementary | Sioux Falls | South Dakota | 1982 – 1985 | Passed |
Video Embed Blocks
Vimeo Embed Block
YouTube Embed Block
Call-to-Action Bars (CTA Bars)
Popups, popovers & tooltips
There are various ways to display content within a popup. Here are examples for Vimeo videos, YouTube videos, inline content, offcanvas elements and modal elements.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Popovers and tooltips are very similar. Popovers require the user to click the link in order to activate the popup, whereas tooltips simply require the user to hover over the link. Popovers can also stay active until a second user action, whereas the tooltip will disappear once the user has hovered off of the region.
Default feature module, wide width
This is a Sample Feature Module
This is a two-column “feature” module, displayed with the wide width setting. You can reorder the columns and change the background, text and/or button colors if you wish.
Rearranged columns, rounded image, wide width
Sample Feature Module Heading
This is a two-column “feature” module, displayed with the wide width setting. You can reorder the columns and change the background, text and/or button colors if you wish.
Colored feature module, rounded image, default width
Sample FPO Feature Module
This is a two-column “feature” module, displayed with the wide width setting. You can reorder the columns and change the background, text and/or button colors if you wish.
Colored feature module, rounded image, default width
Sample FPO Feature Module
This is a two-column “feature” module, displayed with the wide width setting. You can reorder the columns and change the background, text and/or button colors if you wish.
Basic Columns
For fast scaling, remove the column style you don’t want and then duplicate the column style of choice.
Basic Column
This is a basic column layout, containing only a heading and paragraph block, both of which contain left-justified, default-colored text.
Colored Column
Padded with white text
This is a bit more involved column layout, containing multiple styles of heading blocks as well as a paragraph block, both of which contain center-justified, white-colored text.
Two-Column Layout (Blank Cards with Buttons)
Column One
This is an example of a two-column content layout. Choose to have an image, headings, paragraph(s), buttons, etc.
Column Two
This is an example of a two-column content layout. Choose to have an image, headings, paragraph(s), buttons, etc.
Three-Column Layout (Blank Cards, Wide Width)
Column One
This is an example of a three-column content layout. Choose to have an image, headings, paragraph(s), buttons, etc.
Column Two
This is an example of a three-column content layout. Choose to have an image, headings, paragraph(s), buttons, etc.
Column Three
This is an example of a three-column content layout. Choose to have an image, headings, paragraph(s), buttons, etc.
Equal Height Columns
Equal Height
Default Margin Top
Here are four equal height columns with cards. The columns contain a background color, zero block spacing and use cards to group their content.
This allows us to symmetrically align the content where the buttons have the same baseline.
Columns
Adjusted Margin Top
Here are four equal height columns with cards. The columns contain a background color, zero block spacing and use cards to group their content.
With Cards
Here are four equal height columns with cards.
Equal Height
Default Margin Top
Here are four equal height columns with cards. The columns contain a background color, zero block spacing and use cards to group their content.
This allows us to symmetrically align the content where the buttons have the same baseline.
Columns with
Adjusted Margin Top
Here are equal height columns containing cover blocks as cards. The Cover blocks are also equal height and contain a background color with opacity.
Equal Height
Here are equal height columns containing cover blocks as cards. The Cover blocks are also equal height and contain a background color with opacity.
These Cover block cards then contain groups of the standard card-body and card-footer classes for alignment.
Equal Height
Default Margin Top
Here are equal height columns containing cover blocks as cards. The Cover blocks are also equal height and contain a background color with opacity.
These Cover block cards then contain groups of the standard card-body and card-footer classes for alignment.