Shortcodes

Intro Text

Shortcode Example: [intro]My intro text to be styled[/intro]

Directions: Wrap this around any text that you want to emphasize and it will add the “intro” class around it.

Output: My intro text to be styled

Email Encode

Shortcode Example: [email url="email@address.com"]My Email[/email] or [email]email@address.com[/email]

Directions: The url is optional. If not used, the content between the shortcode will be used as the email address. This shortcode also encodes the e-mail address to help prevent spam caused by web bots.

Output: My Email

Buttons

Shortcode Example: [button class="btn btn-primary" url="" target=""][/button]

Directions:
Color Classes: btn-default / btn-primary / btn-secondary /btn-tertiary /btn-quaternary
Size Classes: btn-extra-large / btn-large / btn-medium / btn-small / btn-extra-small

Output: Button

Grid Wrap / Grids

Shortcode Example: [grid-wrap][grid class="grid-20 grid-sm-100"][/grid][/grid-wrap]

Directions: Use class=”grid-‘size’” to set widths of columns.
Sizes are set in multiples of 5’s and 10’s i.e.: grid-10, grid-20, grid-25, etc.
To change the sizes of grids on smaller screen sizes use:

grid-‘size’ (1280px +)
grid-md-‘size’ (768px – 1279px)
grid-sm-‘size’ (480px – 767px)
grid-xs-‘size’ (320px – 479px)

Note* Always wrap these columns in a grid-wrap to keep them contained together using the shortcode [grid-wrap][/grid-wrap]

Output:

XL Buttons
Default XL Primary XL Secondary XL

Large Buttons
Default L Primary L Secondary L

Medium Buttons
Default M Primary M Secondary M

Small Buttons
Default SM Primary SM Secondary SM

XS Buttons
Default XS Primary XS Secondary XS

Quote

Shortcode Example: [quote class="" source="Source Name" url=""][/quote]
Directions: Use the quote_source parameter to set a citation source. Using the url parameter will link the quote source. The class parameter is an optional parameter which can be used for custom styles.
Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis dignissim mauris, et euismod risus vehicula sed.

Source Name

Blockquote

Shortcode Example: [blockquote class=""][/blockquote]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mollis dignissim mauris, et euismod risus vehicula sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Accordion / Accordion Item

Shortcode Example: [accordion class=""][accordion-item title=""][/accordion-item][accordion-item title=""][/accordion-item][/accordion]

Output:

Accordion Item #1

Item #1 Content

Accordion Item #2

Item #2 Content

Responsive Table

Shortcode Example: [table]<table><tr><td></td</tr></table>[/table]
Directions: Use this shortcode to wrap any table to make it’s width fluid and includes a horixontal scroll-bar on smaller screens.

Output:

Table Caption
Table Header
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

General Styles

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget egestas odio. Cras a tortor sem. Sed sed mattis eros. Integer ut quam ac velit consequat venenatis eu nec purus. Nullam pharetra consectetur urna, eu varius nisl malesuada eget. Sed nisl tortor, porttitor sit amet mauris vel, condimentum tristique lectus. Cum sociis natoque penatibus et.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Unordered list item
Unordered list item
Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
Unordered list item
Unordered list item
Unordered list item

Ordered list item 1
Ordered list item 2
Ordered list item 3
1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3
Ordered list item 1
Ordered list item 1
Ordered list item 2

Definition list title: Definition list division 1; Definition list division 2; Definition list division 3

“Blockquote Maecenas tristique, dui vel ultricies mattis, nibh velit cursus ex, augue enim massa.”

Aenean elementum, risus id commodo laoreet, tortor mauris porttitor velit, vitae imperdiet magna nulla id enim. In semper turpis quis mauris fringilla scelerisque. Quisque venenatis imperdiet nisi nec consequat. Cum sociis natoque penatibus et magnis dis parturient montes

Quote Source

Button Default

Button Default

Button Default

Button Default

Button Default

Panel Title

Panel Content

Accordion Title 1

Accordion Content 1

Accordion Title 2

Accordion Content 2

Accordion Title 3

Accordion Content 3

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

Tab Content 5

Table Caption
Table Header
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

Table Caption
Table Header	Table Data	Table Data	Table Data
Table Header	Table Data	Table Data	Table Data
Table Header	Table Data	Table Data	Table Data

Table Caption
	Table Header	Table Header	Table Header
Table Header	Table Data	Table Data	Table Data
Table Header	Table Data	Table Data	Table Data
Table Header	Table Data	Table Data	Table Data

Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, turpis dignissim quis lectus. Morbi in turpis Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat. Praesent purus massa, pretium non finibus non, dignissim quis lectus. Morbi in turpis vitae tellus viverra condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus magna, pharetra eu consequat ut habitant morbi tristique habitant morbi habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent eleifend massa nibh. Donec risus magna, pharetra eu consequat ut, gravida ac nisi. Aliquam erat volutpat.

Image Caption