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
Button Button Button Button Mini Mini Mini
Small Small Small Small Small Small Small
Medium Medium Medium Medium Medium Medium Medium
Large Large Large Large Large Large Large
Block Level
Block Level
Block Level
Block Level
Block Level
Block Level
Block Level
[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.
Large Button[/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!
[tabs style=”nav-tabs”]
[tab title=”Standard Style”]
[/tab]
[tab title=”Smaller and Blue”]
[/tab]
[tab title=”Tiny and Red”]
[/tab]
[tab title=”Huge and Green”]
[/tab]
[tab title=”LOL”]
[/tab]
[/tabs]
[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
[one_half]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_half]
[one_half_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_half_last]
[clear]
[one_third]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_third]
[one_third]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_third]
[one_third_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_third_last]
[clear]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fourth]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fourth]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fourth]
[one_fourth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fourth_last]
[clear]
[one_fifth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fifth]
[one_fifth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fifth]
[one_fifth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fifth]
[one_fifth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fifth]
[one_fifth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_fifth_last]
[clear]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_sixth]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_sixth]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_sixth]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_sixth]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_sixth]
[one_sixth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_sixth_last]
[clear]
[one_third]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_third]
[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]
[clear]
[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]
[one_third_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_third_last]
[clear]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_fourth]
[three_fourth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/three_fourth_last]
[clear]
[three_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/three_fourth]
[one_fourth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_fourth_last]
[clear]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_fourth]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_fourth]
[one_half_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_half_last]
[clear]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_fourth]
[one_half]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_half]
[one_fourth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_fourth_last]
[clear]
[one_half]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada
[/one_half]
[one_fourth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_fourth]
[one_fourth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque.
[/one_fourth_last]
[clear]
[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]
[one_fifth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_fifth_last]
[clear]
[one_fifth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_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]
[clear]
[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]
[clear]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. a
[/one_sixth]
[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]
[clear]
[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]
[one_sixth_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/one_sixth_last]
[clear]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_sixth]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_sixth]
[one_sixth]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_sixth]
[one_half_last]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada.
[/one_half_last]
[divider_top]
Lists
[tabs style=”nav-tabs”]
[tab title=”Black Icons”][one_fourth]
[lists style=”plus”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”liked”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”star”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”check”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[one_fourth]
[lists style=”right-thin”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”right”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”right-open”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”x”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[one_fourth]
[lists style=”tag”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”help-circled”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”info-circled”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”attention”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[one_fourth]
[lists style=”minus”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”pencil”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”thumbs-up”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[/one_fourth_last][/tab]
[tab title=”…Or Any Color You Want”]
[one_fourth]
[lists style=”plus” color=”#dd3333″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”liked” color=”#dd9933″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”star” color=”#b1d742″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”check” color=”#1e73be”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[one_fourth]
[lists style=”right-thin” color=”#8224e3″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”right” color=”#1dbfc1″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”right-open” color=”#dbd111″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”x” color=”#dd3333″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[one_fourth]
[lists style=”tag” color=”#e012e8″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”help-circled” color=”#10f2d7″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”info-circled” color=”#933901″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”attention” color=”#878787″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[one_fourth]
[lists style=”minus” color=”#eded00″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”pencil” color=”#096d00″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”thumbs-up” color=”#bbff00″]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[/one_fourth_last][/tab]
[/tabs]
[clear]
[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:
Large Button[/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 Top[/popover] [popover title=”Popover Title” body=”You can put content in the body” placement=”bottom”]Popover Bottom[/popover] [popover title=”Popover Title” body=”You can put content in the body” placement=”left”]Popover Left[/popover] [popover title=”Popover Title” body=”You can put content in the body” placement=”right”]Popover 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 Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/table]
Striped table style:
[table style=”table-striped”]
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/table]
Bordered table style:
[table style=”table-bordered”]
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/table]
This table has hover effect on rows:
[table style=”table-hover”]
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/table]
Condensed table style:
[table style=”table-condensed”]
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/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:
[tabs style=”nav-tabs”]
[tab title=”First Tab”]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.[/tab]
[tab title=”Second Tab”]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.[/tab]
[/tabs]
Left placement:
[tabs placement=”tabs-left” style=”nav-tabs”]
[tab title=”First Tab”]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.[/tab]
[tab title=”Second Tab”]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.[/tab]
[/tabs]
Right placement:
[tabs placement=”tabs-right” style=”nav-tabs”]
[tab title=”First Tab”]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.[/tab]
[tab title=”Second Tab”]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.[/tab]
[/tabs]
Bottom placement:
[tabs placement=”tabs-below” style=”nav-tabs”]
[tab title=”First Tab”]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.
[/tab]
[tab title=”Second Tab”]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.
[/tab]
[/tabs]
“Pill” style variation:
[tabs style=”nav-pills”]
[tab title=”First Tab”]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.[/tab]
[tab title=”Second Tab”]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.[/tab]
[/tabs]
[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
[icons icon=”icon-gauge” color=”#FFF” size=”20″] Icons In A Button [icons icon=”icon-right” color=”#000000″ size=”20″][divider]
Table + Modal + Columns + Button + Popover
[table style=”table-striped”]
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell |
[modal heading=”Shortcode Inception!” dismiss_header=”dismiss_header” dismiss_footer=”dismiss_footer” text=”Trigger modal box” size=”btn-medium” variation=”btn-danger”]
[one_third]This is a three column shortcode inside a modal. You can do really cool thins with shortcode combinations.[/one_third] [clear] [/modal] |
Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/table]
[divider]
Tabs + Accordion + Columns + List + Carousel + Hero Unit + Modal + Table + Tooltip
[tabs style=”nav-tabs”]
[tab title=”Tab With Accordion”]
[toggles behavior=”accordion”]
[toggle title=”Hero unit”]
[hero heading=”Hero unit containing a modal” tagline=”Click the button below to open a modal dialog containing even more shortcodes”]
[modal heading=”Shortcode Inception!” dismiss_header=”dismiss_header” dismiss_footer=”dismiss_footer” text=”Trigger modal” size=”btn-large” variation=”btn-primary”]
Hover over the tooltip enabled links inside the table for a tooltip effect
[table style=”table-hover”]
Table Cell | Table Cell | Table Cell |
[tooltip text=”Tooltip text” placement=”top”]Tooltip enabled[/tooltip] | [tooltip text=”Tooltip text” placement=”top”]Tooltip enabled[/tooltip] | [tooltip text=”Tooltip text” placement=”top”]Tooltip enabled[/tooltip] |
Table Cell | Table Cell | Table Cell |
[/table]
[/modal]
[/hero]
[/toggle]
[toggle title=”Columns with lists”][one_fourth]
[lists style=”plus”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”liked”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth]
[lists style=”star”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth]
[one_fourth_last]
[lists style=”check”]
- List Item
- List Item
- List Item
[/lists]
[/one_fourth_last]
[clear]
[/toggle]
[toggle title=”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]
[/toggle]
[/toggles]
[/tab]
[tab title=”Tab With Table”]
[table style=”table-hover”]
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
[/table]
[/tab]
[/tabs]