Introduction

shortcode is a WordPress-specific code that lets you do nifty things with very little effort. With just one line shortcodes can embed files, create objects or determine layouts that would normally require more code. The actual code is handled behind the scenes, while shortcodes simply make reference to it and pass any additional attributes.  Shortcode = shortcut.

Using shortcodes to add elements within the site means that you can easily add preformatted elements and function that match the design and formatting of the website.

Note: Buttons should only be used for call-to-actions, external links and resources, but never for linking to other pages within the website.


Buttons

Button
[button link="http://www.yourlink.com"]Button[/button]
Green Button
[button link="http://www.yourlink.com" target="_blank"]Button[/button]

Buttons have three attributes, linktarget, and class, with only the link being required. The link must include “http://”. By default the link will open in the same window (_self), but if you’d like the link to open in a new window or tab (a good practice if you still want a user to have your website active in their browser) simply add the attribute:

target="_blank"

The class is an optional attribute that can modify the visual presentation of the button when predefined classes exist in your website’s style sheet. Multiple classes are separated by a single space.

Small Button
[button link="http://www.yourlink.com"]Small Button[/button]
Small Green Button
[button link="http://www.yourlink.com" class="green-button button-sm"]Small Green Button[/button]

Arrow Buttons

Arrow buttons are used only for call-to-action items.

Arrow Button
[arrow-button link="http://www.yourlink.com"]Arrow Button[/arrow-button]
Green Arrow Button
[arrow-button link="http://www.yourlink.com" class="green-button button-sm"]Small Green Arrow Button[/arrow-button]
Small Arrow Button
[arrow-button link="http://www.yourlink.com" class="button-sm"]Small Green Arrow Button[/arrow-button]
Small Green Arrow Button
[arrow-button link="http://www.yourlink.com" class="green-button button-sm"]Small Green Arrow Button[/arrow-button]

Section Divide (horizontal rule)

The section divider is a horizontal rule <hr> used to visually separate content sections. An example of its use can be seen in the separation of style guide sections.


[divide]

Accordion


Icons

Arrow

[icon-arrow]
Book

[icon-book]
Mic

[icon-mic]