Shortcodes

Alert Boxes

Less padding:

[alert dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis.[/alert]
[alert variation=”alert-error” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis.[/alert]
[alert variation=”alert-success” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis.[/alert]
[alert variation=”alert-info” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis.[/alert]

More padding:

[alert size=”alert-block” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis. Nam vestibulum sapien ut libero congue semper.[/alert]
[alert size=”alert-block” variation=”alert-error” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis. Nam vestibulum sapien ut libero congue semper.[/alert]
[alert size=”alert-block” variation=”alert-success” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis. Nam vestibulum sapien ut libero congue semper.[/alert]
[alert size=”alert-block” variation=”alert-info” dismiss=”dismiss”]Proin mattis, odio a dapibus varius, felis lacus mattis enim, malesuada dignissim ante tortor eget turpis. Nam vestibulum sapien ut libero congue semper.[/alert]

[divider_top]

Buttons

[divider_top]

Carousel

[carousel arrows=”display” buttons=”display” caption=”display”]
[panel title=”This is the title of this panel” description=”You can put a caption description here as well.”][/panel]
[panel title=”Second panel” description=”More description here”][/panel]
[panel title=”You can make as many panels as you want” description=”With the magic of the theme’s shortcode generator.”][/panel]
[/carousel]

[divider_top]

Hero Unit

[hero heading=”This is a hero unit” tagline=”You can put a tagline here.”]You can put any content you want here, including other shortcodes, Here’s a button, for instance.

[/hero]

[divider_top]

Available Icons

These are all of the built-in icons inserted via shortcodes. The icons can scale to any size and they can even be any color!

[divider_top]

Labels and Badges

[label]Label Text[/label] [label variation=”label-success”]Label Text[/label] [label variation=”label-warning”]Label Text[/label] [label variation=”label-important”]Label Text[/label] [label variation=”label-info”]Label Text[/label] [label variation=”label-inverse”]Label Text[/label]

[badge]6[/badge] [badge variation=”badge-success”]6[/badge] [badge variation=”badge-warning”]6[/badge] [badge variation=”badge-important”]6[/badge] [badge variation=”badge-info”]6[/badge] [badge variation=”badge-inverse”]6[/badge]

[divider_top]

Columns

[two_third_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada

[/two_third_last]

[two_third]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada

[/two_third]

[four_fifth]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada

[/four_fifth]

[four_fifth_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada

[/four_fifth_last]

[two_fifth]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.

[/two_fifth]
[three_fifth_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada

[/three_fifth_last]

[five_sixth_last]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuad

[/five_sixth_last]

[five_sixth]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuad

[/five_sixth]

[divider_top]

Lists

[divider_top]

Modal Dialog Box

Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

[modal heading=”Sweet Modal Dialog Box” dismiss_header=”dismiss_header” dismiss_footer=”dismiss_footer” text=”Click Me!” size=”btn-medium” variation=”btn-primary”]This is the body of the modal dialog box. You can put anything in here, including other shortcodes if you want. For instance here’s a button shortcode:

[/modal]

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.

[divider_top]

Popovers

Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

[popover title=”Popover Title” body=”You can put content in the body” placement=”top”]

[/popover] [popover title=”Popover Title” body=”You can put content in the body” placement=”bottom”]

[/popover] [popover title=”Popover Title” body=”You can put content in the body” placement=”left”]

[/popover] [popover title=”Popover Title” body=”You can put content in the body” placement=”right”]

[/popover]

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.

[divider_top]

Progress Bars

[progress size=”40″]
[progress size=”50″ variation=”progress-info”]
[progress size=”60″ variation=”progress-success”]
[progress size=”50″ variation=”progress-warning”]
[progress size=”40″ variation=”progress-danger”]
[progress size=”55″ striped=”progress-striped”]
[progress size=”65″ variation=”progress-info” striped=”progress-striped”]
[progress size=”75″ variation=”progress-success” striped=”progress-striped”]
[progress size=”65″ variation=”progress-warning” striped=”progress-striped”]
[progress size=”55″ variation=”progress-warning” striped=”progress-striped”]
[progress size=”70″ striped=”progress-striped” animated=”active”]
[progress size=”80″ variation=”progress-info” striped=”progress-striped” animated=”active”]
[progress size=”90″ variation=”progress-success” striped=”progress-striped” animated=”active”]
[progress size=”80″ variation=”progress-warning” striped=”progress-striped” animated=”active”]
[progress size=”70″ variation=”progress-danger” striped=”progress-striped” animated=”active”]

[divider_top]

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In id massa ac sapien lobortis pellentesque quis sit amet nunc. Proin ut augue felis, eu sollicitudin lectus. Praesent ullamcorper massa magna. Curabitur ac dui nisl, vitae sollicitudin mauris. Praesent faucibus pellentesque placerat.

[blockquote cite=”Citation here”]Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.[/blockquote]

Pellentesque nec lacus non nisi adipiscing tincidunt. Curabitur feugiat adipiscing accumsan. Integer id libero arcu, vitae egestas risus. Sed iaculis volutpat tincidunt. Vestibulum imperdiet fermentum auctor. In hac habitasse platea dictumst. [blockquote right=”pull-right” cite=”Citation here”]Vivamus lobortis egestas magna non rutrum.
Sed sit amet neque nunc, nec rutrum leo.
Aliquam quis nisi arcu.[/blockquote] In lacus sem, consequat eu posuere sodales, egestas vel diam. Suspendisse potenti. Sed tempor magna ac justo lacinia semper. Pellentesque at odio vitae enim dignissim laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper aliquet ante ut cursus.Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque.

[divider_top]

Signoffs

An unlimited number of signoffs can be created in the theme options and they will be available in the drop down when creating the shortcode. Or you can create one-off signoffs on a per-post basis. All theme icons are available to use for all signoffs, these are just a few examples.

[signoff predefined=”Movie Review Signoff” icon=”icon-quote-circled”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-help-circled”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-star”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-liked”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-username”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-cog-alt”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-pencil”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-thumbs-up”][/signoff]
[signoff predefined=”Movie Review Signoff” icon=”icon-coffee”][/signoff]

[divider_top]

Tooltips

Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis. [tooltip text=”This is the text of the tooltip” placement=”top”]Top tooltip[/tooltip], [tooltip text=”This is the text of the tooltip” placement=”bottom”]bottom tooltip[/tooltip], [tooltip text=”This is the text of the tooltip” placement=”left”]left tooltip[/tooltip], [tooltip text=”This is the text of the tooltip” placement=”right”]right tooltip[/tooltip]. Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a.

[divider_top]

Tables

Default table style:

[table]

[/table]

Striped table style:

[table style=”table-striped”]

[/table]

Bordered table style:

[table style=”table-bordered”]

[/table]

This table has hover effect on rows:

[table style=”table-hover”]

[/table]

Condensed table style:

[table style=”table-condensed”]

[/table]

[divider_top]

Toggles and Accordions

Toggle behavior:

[toggles behavior=”toggle”]
[toggle title=”First Toggle”]Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.[/toggle]
[toggle title=”Second Toggle”]Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.[/toggle]
[toggle title=”There is no limit to number of toggles”]Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.[/toggle]
[/toggles]

Accordion behavior:

[toggles behavior=”accordion”]
[toggle title=”First Accordion Toggle”]Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.[/toggle]
[toggle title=”Second Accordion Toggle”]Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.[/toggle]
[toggle title=”There is no limit to number of accordion toggles”]Etiam sit amet faucibus justo. Proin odio dui, lacinia eu semper et, luctus vitae arcu. Donec non nulla sed diam pretium euismod eu ut neque. Vivamus lobortis egestas magna non rutrum. Sed sit amet neque nunc, nec rutrum leo. Aliquam quis nisi arcu. Quisque ipsum nisl, mattis a posuere sed, vehicula eu felis.

Nunc quis neque massa, in facilisis tortor. Aenean ut tincidunt felis. Etiam ligula leo, fringilla quis malesuada vel, commodo in orci. In hac habitasse platea dictumst. Cras hendrerit consectetur purus, in iaculis metus congue a. Curabitur feugiat turpis sed dui ornare consequat. Integer malesuada hendrerit nibh nec pretium.[/toggle]
[/toggles]

[divider_top]

Tabs

Top placement:

Left placement:

Right placement:

Bottom placement:

“Pill” style variation:

[divider_top]

Advanced Shortcode Combinations

Here are a few examples of the combinations you can create using shortcodes. There is almost no limit to what you can do.

Button + Different-Colored Icons

[divider]

Table + Modal + Columns + Button + Popover

[table style=”table-striped”]

[/table]

[divider]

Tabs + Accordion + Columns + List + Carousel + Hero Unit + Modal + Table + Tooltip