Important Note: When using shortcodes, there should not be a space after the first bracket and the element name. The spaces used in the examples below are for display purposes only.

If you are copying and pasting any of the code below, make sure you delete the extra space after the first bracket. You also may want to check out the glossary below.

---

Tabs

Displays a group of tabs which show and hide associated content. This shortcode has two parts, the tab and the tab-area. All of the tabs should be list elements (each shortcode should be a list point or <li> element).

Attributes for tab

• for – A name which specifies which tab content area this tab controls.
• text – The text which will be displayed on the tab.
• initial – (optional) Use this if you want this tab to be already open when the page load. Obviously, you can only use this on one of the tabs.
• [ tab for=”tab1″ text=”2010″]
• [ tab for=”tab2″ text=”2011″]
• [ tab for=”tab3″ text=”2012″ initial=”true”]
• [ tab for=”tab4″ text=”2013″]

Attributes for tab-area

name – – The name used by the tab to know what content area to control.

[ tab-area name="tab1"]Content in area one.[/tab-area]
[ tab-area name="tab2"]Content in area two.[/tab-area]
[ tab-area name="tab3"]Content in area three.[/tab-area]
[ tab-area name="tab4"]Content in area four.[/tab-area]

Putting the two examples above together yields:

---

Columns

Create columns on a page. These columns turn into full width when viewed on a mobile device. There is an outer shortcode columns and an inner shortcode for each column column.

Attributes for [ columns] (wrapper shortcode)

• sizes: (optional) Specify percentages for uneven columns or to override auto-sizing of columns. If not specified, all columns will be equal width. For example, sizes=”33-66″ would be a column of one-third width on the left and a two-thirds column on the right. sizes=”20-40-20-20″ would be four columns with the second being twice as large as the others. Providing a single size like sizes=”50″ will force all columns to be 50% width, even if there are more than 2 columns. This will cause the columns to wrap down the page, and could be useful for having many 50%-width blocks which cascade down. You can combine any of the following widths: 20, 25, 33, 40, 50, 60, 66, 75, or 80.
• reverse: (optional) Set this to “true” or “on” to stack the rightmost column on top when in mobile view. By default, the columns are stacked left-to-right.

Attributes for [ column] (inner shortcode)

• gutter: (optional) Set to “no” or “off” to leave no space between columns. Defaults to on (space between columns).
• style: (optional) Specify css styles to apply to the column.
• class: (optional) Specify a classname to apply to the column.
• padding-top (optional)  How much space to give the top of the column. Use a percentage or other css unit.
• padding-right: (optional) How much space to give the right side of the column. Use a percentage or other css unit.
• padding-bottom: (optional) How much space to give the bottom of the column. Use a percentage or other css unit.
• padding-left:(optional) How much space to give the left side of the column. Use a percentage or other css unit.

[ columns]
   [ column]1/4[/column] 
   [ column]1/4[/column] 
   [ column]1/4[/column] 
   [ column]1/4[/column]
[/columns]

[ columns sizes="33-66"]
   [ column]1/3[/column]
   [ column]2/3[/column]
[/columns]

[ columns sizes="25-75" reverse="true"]
   [ column]1/4[/column]
   [ column]3/4[/column]
[/columns]

[ columns sizes="40-40-20"]
   [ column]2/5[/column]
   [ column]2/5[/column]
   [ column]1/5[/column]
[/columns]

[ columns sizes="50"]
   [ column]left half, first row[/column]
   [ column]right half, first row[/column]
   [ column]left half, second row[/column]
   [ column]right half, second row[/column]
   [ column]left half, third row[/column]
   [ column] etc.[/column]
[/column]

Colors are shown to simply display the differences of columns. When columns are applied to any page the background colors will not show.

---

Glossary

Attribute

Part of the shortcode which specifies that a certain name equals a certain value.

name="value"

This is always found inside the first part of the shortcode, between the brackets.

Opening/Closing Tag

Some shortcodes have a single element like

[example]

and some have a start and ending element like

[example] content [/example]

The first element, the [example], is the opening tag, and the second one, the [/example] is the closing tag. Note the closing tag has a /.

Content Area

In shortcodes with both an opening and closing tag, the space between the tags is the content area. Highlighted below:

[example name="value"] This is the content area. [/example]

---