Search
Close this search box.

Style Guide

Heading Styles

Heading 1 (h1)

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Heading 2 (h2)

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Heading 3 (h3)

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Heading 4 (h4)

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Heading 5 (h5)

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Heading 6 (h6)

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Alternative Heading Styles

Primary Font Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Secondary Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading Pairings

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Another Pairing

These look great too

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

This is a Great Pairing

Break up the content 

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Column Gaps

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Second Column

Ulorum suffragio omnium nominati sunt. Duo Reges: constructio interrete. This is a link. Lorem ipsum dolor sit hover link amet, consectetur adipiscing elit. Aenean pulvinar tempus velit, in suscipit nibh rhoncus eget. In dictum id erat lacinia tristique. Nulla condimentum ullamcorper arcu ac commodo. Vivamus id metus non neque tincidunt fringilla.

Button Styles

There are 5 different button styles for you to choose from. Some sizes work best on  light backgrounds and others on dark backgrounds.

Toggles, Accordions & Tabs

Tabs, toggles, and accordions are great ways to organize large amounts of text content.
They keep the content concise and looking organized for your visitors to see easily.

Toggles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Accordions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Tabs
Dark BG Toggles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Dark BG Accordions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Dark BG Tabs

Flip Box Styles

Example Title

Important Information

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Get More InFo

Example Title

Important Information

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Get More InFo

Example Title

Important Information

Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Get More InFo

Image Slider

Slide 1 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 3 Heading
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Previous slide
Next slide