Style Guide

Shortcodes

Shortcodes will work inside all content wysiwygs / editors.

Buttons

[button__1 title="New Tab" href="#" target="_blank"]
[button__1 title="New Tab" href="#" target="_blank"]
[button__2 title="Button Title" href="#"]
[button__2 title="Button Title" href="#"]

Colors

white
TXT CLASS: .txc__white
BG CLASS: .bgc__white
HEX: #ffffff
RGB: 255, 255, 255
black
TXT CLASS: .txc__black
BG CLASS: .bgc__black
HEX: #111111
RGB: 17, 17, 17
teal
TXT CLASS: .txc__teal
BG CLASS: .bgc__teal
HEX: #55b7b3
RGB: 85, 183, 179
orange
TXT CLASS: .txc__orange
BG CLASS: .bgc__orange
HEX: #d5441c
RGB: 213, 68, 28
purple
TXT CLASS: .txc__purple
BG CLASS: .bgc__purple
HEX: #87319a
RGB: 135, 49, 154
gray
TXT CLASS: .txc__gray
BG CLASS: .bgc__gray
HEX: #666666
RGB: 102, 102, 102
html
TXT CLASS: .txc__html
BG CLASS: .bgc__html
HEX: #ffffff
RGB: 255, 255, 255
accent
TXT CLASS: .txc__accent
BG CLASS: .bgc__accent
HEX: #55b7b3
RGB: 85, 183, 179
yellow
TXT CLASS: .txc__yellow
BG CLASS: .bgc__yellow
HEX: #df9237
RGB: 223, 146, 55
lime
TXT CLASS: .txc__lime
BG CLASS: .bgc__lime
HEX: #afc86b
RGB: 175, 200, 107

Gradients

Borders

Typography

Font Weight | txw__100 - 900

txw__100
txw__200
txw__300
txw__400
txw__500
txw__600
txw__700
txw__800
txw__900

Leading | txw__x1 - 5

txs__6Aenean venenatis leo
txs__61Aenean venenatis leo
txs__62Aenean venenatis leo
txs__64Aenean venenatis leo
txs__65Aenean venenatis leo

Typescale | txs__1 - 10

txs__1
txs__2
txs__3
txs__4
txs__5
txs__6
txs__7
txs__8
txs__9
txs__10

Headings

Heading H1

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H2

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H3

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H4

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H5

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Paragraph

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Blockquote

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Lists

  • Aenean venenatis leo ac nunc lobortis gravida.
  • Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  • Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    • Aenean venenatis leo ac nunc lobortis gravida.
    • Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    • Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    • Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
    • Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  • Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
  • Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  1. Aenean venenatis leo ac nunc lobortis gravida.
  2. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  3. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    1. Aenean venenatis leo ac nunc lobortis gravida.
    2. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    3. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    4. Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
    5. Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  4. Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
  5. Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.

Grid