Alerts

Hey, you! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[alert style="info" close="true"]<strong>Hey, you!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]

Options

Argument Default Description
style info Style of alert – info, success, danger, warning.
close false Whether to show close button – true, false.

Styles

This is an “info” alert.
[alert style="info"]This is an "info" alert.[/alert]
This is a “success” alert.
[alert style="success"]This is a "success" alert.[/alert]
This is a “danger” alert.
[alert style="danger"]This is a "danger" alert.[/alert]
This is a “warning” alert.
[alert style="warning"]This is a "warning" alert.[/alert]
[divider]

Jumbotron

The Jumbotron, also known as “Hero” unit, comes from Bootstrap’s Jumbotron feature.

[raw] [jumbotron title=”Hello, world!”] This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

[/jumbotron] [/raw]
[raw]
[jumbotron title="Hello, world!"]
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

[button link="http://google.com" color="primary" size="large"]Learn More[/button]
[/jumbotron]
[/raw]

Options

Argument Default Description
title None Title of unit.
text_align left How to align text – left, right, center.
align None How to align unit – left, right, center, blank for no alignment.
max_width None Maxiumum width of unit, meant to be used with align left/right/center – 300px, 50%, etc.
class None Any additional CSS classes.
wpautop true Whether to apply wpautop on content. Shortcode will work best if you leave this set to true and wrap the [jumbotron] shortcode in the [raw] shortcode as shown in the example above. This way, WordPress’s automatic formatting will be applied when the shortcode is rendered, and will turn out nicer.
[divider]

Panels

[panel title=”Panel heading” footer=”Optional footer text”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[panel title="Panel heading" footer="Optional footer text"]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.
[/panel]

Styles

[raw]
[panel title=”Style: default” style=”default”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel] [/fusion_builder_column_inner]
[panel title=”Style: primary” style=”primary”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[clear]
[panel title=”Style: success” style=”success”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel] [/fusion_builder_column_inner][/fusion_builder_row_inner]
[panel title=”Style: info” style=”info”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[clear]
[panel title=”Style: warning” style=”warning”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel] [/fusion_builder_column_inner]
[panel title=”Style: danger” style=”danger”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam.[/panel]
[clear] [/raw]

Options

Argument Default Description
style default Style of panel – default, primary, success, info, warning, danger.
title None Optional text for header title.
footer None Optional text for the footer.
text_align left How to align text – left, right, center.
class None Any additional CSS classes.
wpautop true Whether to apply wpautop on content.
[divider]

These come from the Bootstrap modal javascript component.

[popup text=”Click me to see a popup” header=”Title of popup”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad veniam.[/popup]
[popup text="Click me to see a popup" header="Title of popup"]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.
[/popup]
[popup text=”This popup will animate in” header=”Title of popup” animate=”true”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.[/popup]
[popup text="This popup will animate in" header="Title of popup" animate="true"]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ad minim veniam.
[/popup]
[popup text=”Contact Us!” color=”primary” icon_before=”envelope” header=”Contact Us” animate=”true”] This popup has a contact form inserted via Contact Form 7’s shortcode.[contact-form 1] [/popup]
[popup text="Contact Us!" color="primary" icon_before="envelope" header="Contact Us" animate="true"]
This popup has a contact form inserted via Contact Form 7's shortcode.
[contact-form 1]
[/popup]
Argument Default Description
text (required) None Text of button to popup.
title None Title tag of button to popup, will default to $text if left blank.
color default Color of button to popup (view button colors).
icon_before None Icon before text of button to popup (view icons).
Ex: arrow-right, chevron-right, twitter, etc.
Note: Do not prefix icon ID with fa-.
icon_after None Icon after text of button to popup (view icons).
Ex: arrow-right, chevron-right, twitter, etc.
Note: Do not prefix icon ID with fa-.
size default Size of button – mini, small, default, large.
animate false Whether popup slides in or not – true, false.
header None Header text for popup.
[divider]

Quote

The [blockquote] shortcode can be useful to help you format a quote and a source that looks nice with our baked-in version of Twitter Bootstrap, without having to mess with any HTML.

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”John Smith”]
[blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel." source="John Smith"]

Quote aligned left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”John Smith” align=”left” max_width=”300px”]

Praesent congue turpis quis lacus viverra accumsan. Nunc ullamcorper est eleifend ante aliquet elementum. Vivamus at accumsan dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec viverra elit id vehicula tristique.

Morbi scelerisque libero faucibus justo mollis euismod. Phasellus quam velit, egestas ut feugiat non, sodales vel libero. Nullam orci sapien, euismod a nunc in, sollicitudin rutrum sapien. Fusce in velit non dolor fringilla iaculis. Nunc fringilla dolor felis. Maecenas nec nisi ac lectus pharetra volutpat non eget ligula. Suspendisse potenti.

[blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel." source="John Smith" align="left" max_width="300px"]

Quote aligned right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

[blockquote quote=”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel.” source=”John Smith” align=”right” max_width=”300px”]

Praesent congue turpis quis lacus viverra accumsan. Nunc ullamcorper est eleifend ante aliquet elementum. Vivamus at accumsan dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec viverra elit id vehicula tristique.

Morbi scelerisque libero faucibus justo mollis euismod. Phasellus quam velit, egestas ut feugiat non, sodales vel libero. Nullam orci sapien, euismod a nunc in, sollicitudin rutrum sapien. Fusce in velit non dolor fringilla iaculis. Nunc fringilla dolor felis. Maecenas nec nisi ac lectus pharetra volutpat non eget ligula. Suspendisse potenti.

[blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel." source="John Smith" align="right" max_width="300px"]

Options

Argument Default Description
quote (required) None The text for the quote.
source None Optional source of the quote.
Ex: John Smith
source_link None An optional URL to link the source to.
Ex: http://google.com
align None How to align quote – left, right, or leave blank for no alignment.
max_width None Set a maximum width for the quote, to be used with align left or right. Ex: 300px, 50%, etc.
class None Any additional CSS classes you want to add to the blockquote.
[divider]

Progress Bars

Get creative with this one. — We honestly couldn’t think of a whole lot of real-world uses for this shortcode, but we thought it was too cool of a Boostrap feature to leave out.

[progress_bar percent=”30″]
[progress_bar percent="30"]
[progress_bar percent=”60″ striped=”true”]
[progress_bar percent="60" striped="true"]
[progress_bar percent=”90″ striped=”true” animate=”true”]
[progress_bar percent="90" striped="true" animate="true"]

Options

Argument Default Description
percent 100 A percentage of how far the bar is – 25, 50, 80, etc.
color default Color of bar – default, danger, success, info, warning.
striped false Whether the bar is striped or not – true, false.
animate false Whether the bar is animated or not – true, false
Note: For the bar to be animated, it must also be striped.

Colors

[raw]
Color Example
Default [progress_bar percent=”30″] [progress_bar percent=”60″ striped=”true”] [progress_bar percent=”90″ striped=”true” animate=”true”]
Danger [progress_bar percent=”30″ color=”danger”] [progress_bar percent=”60″ color=”danger” striped=”true”] [progress_bar percent=”90″ color=”danger” striped=”true” animate=”true”]
Success [progress_bar percent=”30″ color=”success”] [progress_bar percent=”60″ color=”success” striped=”true”] [progress_bar percent=”90″ color=”success” striped=”true” animate=”true”]
Info [progress_bar percent=”30″ color=”info”] [progress_bar percent=”60″ color=”info” striped=”true”] [progress_bar percent=”90″ color=”info” striped=”true” animate=”true”]
Warning [progress_bar percent=”30″ color=”warning”] [progress_bar percent=”60″ color=”warning” striped=”true”] [progress_bar percent=”90″ color=”warning” striped=”true” animate=”true”]
[/raw] [divider]

Icon Lists

After you’ve inserted a standard unordered list, wrap it in the [icon_list] shortcode to make it stand out a little more.

General Usage

[raw]
[icon_list]
  • List item 1
  • List item 2
  • List item 3
[/icon_list]
[icon_list] <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> [/icon_list] [/fusion_builder_column_inner]
[icon_list icon=”star”]
  • List item 1
  • List item 2
  • List item 3
[/icon_list]
[icon_list icon="star"]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/icon_list]
[icon_list icon=”star” color=”#eec627″]
  • List item 1
  • List item 2
  • List item 3
[/icon_list]
[icon_list icon="star" color="#eec627"]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/icon_list]
[clear] [/raw]

Options

Argument Default Description
icon caret-right Icon to be used (view icons).
Ex: arrow-right, chevron-right, twitter, etc.
Note: Do not prefix icon ID with fa-.
color None Color CSS value to get applied to icon, will default to current text color.
Ex: #660000.