Shortcodes

Accordion & Tabs

Accordions and Toggles are perfect for adding multiple sections of information with varying content and titles.

[clear gap=”60″]

[column size=”1/2″]
[accordions]
[accordion title=”First Accordion”]
Ut iaculis lacinia diam, sed rutrum mi convallis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dictum ipsum, nec dictum mi. In sed mi rutrum, pellentesque neque quis, pellentesque diam.
[/accordion]
[accordion title=”Second Accordion” opened=”yes”]
Sed aliquam suscipit nulla, sit amet eleifend ipsum molestie non. Aenean ex massa, varius eu porttitor non, lobortis sit amet sapien. Maecenas facilisis, diam in porttitor elementum, ante libero rutrum massa.
[/accordion]
[accordion title=”Third Accordion”]
Molestie diam arcu sit amet sapien. Integer convallis pulvinar felis, sit amet consequat ante eleifend et. Ut dui turpis, pharetra vel mi commodo, gravida iaculis erat. Sed semper felis ligula, ac accumsan.
[/accordion]
[/accordions]
[/column]
[column size=”1/2″]
[tabs]
[tab title=”Tab 1″]
Maecenas ullamcorper nisi nec justo dictum ullamcorper. Nam ac sagittis arcu, a condimentum magna. Ut ut urna tellus. Sed ac velit quis augue facilisis varius. Etiam ante lacus, viverra in turpis non, pulvinar condimentum leo. Nam pretium sed nulla et ornare. Sed ultricies consectetur nisl, malesuada pulvinar.

Nam neque mauris, pulvinar convallis mattis eu, molestie a sapien. Sed arcu dui, venenatis ac ipsum non, pretium mollis erat. Nunc nec nisi auctor purus placerat lacinia. Quisque ac interdum tortor, non fringilla nulla. Nam id sollicitudin erat.
[/tab]
[tab title=”Tab 2″]
Cras eu convallis odio. Proin et lacinia purus, eu aliquet arcu. Aenean quam ante, lacinia non fringilla ut, ultrices id elit. Suspendisse tempus sem felis, in bibendum neque imperdiet ac. Suspendisse fringilla lacus massa, sit amet tristique.

Aenean posuere dui nec tortor pulvinar placerat. Cras ut libero purus. Cras tincidunt a turpis id bibendum. Mauris eget molestie quam, vitae viverra enim. Mauris ut purus urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent egestas volutpat ligula, dictum ullamcorper tristique.
[/tab]
[tab title=”Tab 3″]
Nullam vitae malesuada lorem. Curabitur eget ipsum vitae dolor malesuada feugiat in vulputate libero. Sed sed nisl gravida, tempus tortor nec, bibendum turpis. Donec at rhoncus eros. Integer non varius velit, condimentum feugiat nulla. Curabitur imperdiet semper dolor sed hendrerit. Donec tellus risus.

Curabitur massa sapien, lobortis nec nisl ac, tempus finibus nisl. Maecenas est eros, condimentum in ipsum sit amet, placerat ultrices ligula. Aenean aliquam elit diam, sit amet vehicula leo porta sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit libero risus.
[/tab]
[/tabs]
[/column]

[clear gap=”60″]

Promotion Boxes

Royal’s promotion box is very versatile and has numerous meta options for easy customization.

[clear gap=”60″]

[column size=”1/1″]
[promotion title=”These boxes are customizable with numerous options to choose from!”]Mauris accumsan, massa rhoncus varius varius, tortor metus bibendum turpis, ut rhoncus felis ex pretium sem. Phasellus sagittis ex a ornare.[/promotion][/column]
[column size=”1/2″]
[promotion title=”This is a promo box in a one half column.” style=”two”]Cras tristique sed purus et fermentum. Pellentesque sed metus rhoncus ante vestibulum rhoncus eu ut mi. Maecenas sit amet erat hendrerit.[/promotion]
[/column]
[column size=”1/2″]
[promotion title=”This is a promo box in a one half column.” style=”three”]In pharetra vestibulum lacus, nec euismod nisl egestas vitae. Mauris semper ullamcorper blandit. Curabitur mattis ullamcorper malesuada.[/promotion]
[/column]

[clear gap=”60″]

Alert Messages

Alert messages can be used throughout the site.
There are 4 styles – success, information, warning and danger.

[clear gap=”60″]

[column size=”1/2″]
[alert title=”Well done!” type=”info”]Aliquam tincidunt libero vitae justo fringilla iaculis. Donec justo eros, rhoncus consequat pulvinar euismod, dignissim vel felis diam.[/alert][alert title=”Heads up!” type=”success”]Vivamus condimentum dapibus euismod. Pellentesque fermentum sodales lorem, eu bibendum nulla cursus. Nunc consectetur egestas.[/alert]
[/column]
[column size=”1/2″]
[alert title=”Warning!” type=”warning”]Suspendisse volutpat ultrices auctor. Vestibulum consequat porttitor tempor. Vivamus vel urna quis justo eleifend congue.[/alert][alert title=”Oh snap!” type=”danger”]Vestibulum ultrices purus imperdiet felis malesuada fringilla. Duis varius tincidunt nulla. Nullam eget venenatis tortor amet mattis.[/alert]
[/column]

[clear gap=”60″]

Counters & Bars

Royal includes 2 different sets of animated counters: circles and bars.

[clear gap=”60″]

[bars]
[bar value=”90″ title=”Web Design” column=”1/6″ class=”col-md-offset-1 col-sm-offset-1″]
[bar value=”96″ title=”HTML5 / CSS3″ column=”1/6″]
[bar value=”85″ title=”Graphic Design” column=”1/6″]
[bar value=”67″ title=”Mobile Applications” column=”1/6″ class=”col-xs-offset-2 col-md-offset-0 col-sm-offset-0″]
[bar value=”75″ title=”UX / UI” column=”1/6″]
[/bars]

[clear gap=”60″]

[progress value=”60″ title=”WordPress”]
[progress value=”86″ title=”PHP / MySQL”]
[progress value=”72″ title=”ASP.NET”]

[clear gap=”60″]

Milestone Counters

[clear gap=”60″]

[milestone]
[counter title=”Projects Completed” icon=”fa-check-square-o” column=”1/4″ from=”1″ to=”350″]
[counter title=”Cups Consumed” icon=”fa-coffee” column=”1/4″ from=”1″ to=”863″]
[counter title=”Satisfied Clients” icon=”fa-thumbs-o-up” column=”1/4″ from=”1″ to=”172″]
[counter title=”Pizza’s Ordered” icon=”fa-cutlery” column=”1/4″ from=”1″ to=”456″]
[/milestone]

[clear gap=”60″]

Blockquote & Highlights

[clear gap=”60″]

[column size=”1/1″]
In eget aliquam libero. Mauris neque arcu, consectetur semper odio vel, vulputate ornare nulla. Pellentesque at sapien placerat, tincidunt dui et, interdum ante. Duis placerat faucibus justo, vel pulvinar tortor. [highlight]Vivamus sed turpis[/highlight] lorem. Nam eu eleifend est, id commodo tortor. Integer porttitor at urna at consectetur. Fusce non ornare augue. Aliquam mollis quam quis massa consequat, eget auctor velit consectetur.
[quote information=”Adam Jones”]Sed et tortor non nunc facilisis iaculis. Curabitur eleifend turpis sapien, et elementum nisi dapibus non velit.[/quote]
Phasellus a vulputate felis, et rhoncus leo. Vestibulum nec sodales turpis, pellentesque tristique magna. [highlight style=”dark”]Nunc tempus[/highlight] velit turpis rhoncus aliquet. Maecenas nibh dolor, tristique sed dui vel, porta venenatis metus. Donec ac ornare tellus. Morbi nunc arcu, tempus in consectetur eu, tristique eget nunc. In velit mauris.
[/column]

[clear gap=”60″]

Buttons

Royal includes several buttons to be used throughout your site.

[clear gap=”60″]

[column size=”1/4″ class=”col-sm-3 col-xs-6″]
[button url=”#” class=”block” size=”small”]Small[/button]
[button url=”#” class=”block offsetTopS”]Standard[/button]
[button url=”#” class=”block offsetTopS” size=”small” icon=”fa-heart”]Small[/button]
[button url=”#” class=”block offsetTopS hidden-xs” icon=”fa-heart”]Standard[/button]
[/column]
[column size=”1/4″ class=”col-sm-3 col-xs-6″]
[button url=”#” class=”block” size=”small” rounded=”yes”]Small[/button]
[button url=”#” class=”block offsetTopS” rounded=”yes”]Standard[/button]
[button url=”#” class=”block offsetTopS” size=”small” icon=”fa-heart” rounded=”yes”]Small[/button]
[button url=”#” class=”block offsetTopS hidden-xs” icon=”fa-heart” rounded=”yes”]Standard[/button]
[/column]
[column size=”1/4″ class=”col-sm-3 col-xs-6″]
[button url=”#” class=”block” size=”small” inverse=”yes”]Small[/button]
[button url=”#” class=”block offsetTopS” inverse=”yes”]Standard[/button]
[button url=”#” class=”block offsetTopS” size=”small” icon=”fa-heart” inverse=”yes”]Small[/button]
[button url=”#” class=”block offsetTopS hidden-xs” icon=”fa-heart” inverse=”yes”]Standard[/button]
[/column]
[column size=”1/4″ class=”col-sm-3 col-xs-6″]
[button url=”#” class=”block” size=”small” rounded=”yes” inverse=”yes”]Small[/button]
[button url=”#” class=”block offsetTopS” rounded=”yes” inverse=”yes”]Standard[/button]
[button url=”#” class=”block offsetTopS” size=”small” icon=”fa-heart” rounded=”yes” inverse=”yes”]Small[/button]
[button url=”#” class=”block offsetTopS hidden-xs” icon=”fa-heart” rounded=”yes” inverse=”yes”]Standard[/button]
[/column]

[clear gap=”60″]

Font-Awesome Icons

Font Awesome Icons are incredibly awesome.

[clear gap=”60″]

[column size=”1/1″]

[icon name=”fa-adjust”] [icon name=”fa-anchor”] [icon name=”fa-archive”] [icon name=”fa-asterisk”] [icon name=”fa-ban”] [icon name=”fa-bar-chart-o”] [icon name=”fa-barcode”] [icon name=”fa-bars”] [icon name=”fa-beer”] [icon name=”fa-bell”] [icon name=”fa-bell-o”] [icon name=”fa-bolt”] [icon name=”fa-book”] [icon name=”fa-bookmark”] [icon name=”fa-bookmark-o”] [icon name=”fa-briefcase”] [icon name=”fa-bug”] [icon name=”fa-building-o”] [icon name=”fa-bullhorn”] [icon name=”fa-bullseye”] [icon name=”fa-calendar”] [icon name=”fa-calendar-o”] [icon name=”fa-camera”] [icon name=”fa-camera-retro”] [icon name=”fa-certificate”] [icon name=”fa-check”] [icon name=”fa-check-circle”] [icon name=”fa-check-circle-o”] [icon name=”fa-clock-o”] [icon name=”fa-cloud”] [icon name=”fa-cloud-download”] [icon name=”fa-cloud-upload”] [icon name=”fa-code”] [icon name=”fa-code-fork”] [icon name=”fa-coffee”] [icon name=”fa-cog”] [icon name=”fa-cogs”] [icon name=”fa-comment”] [icon name=”fa-comment-o”] [icon name=”fa-comments”] [icon name=”fa-comments-o”] [icon name=”fa-compass”] [icon name=”fa-credit-card”] [icon name=”fa-crop”] [icon name=”fa-crosshairs”] [icon name=”fa-cutlery”] [icon name=”fa-desktop”] [icon name=”fa-download”] [icon name=”fa-ellipsis-h”] [icon name=”fa-ellipsis-v”] [icon name=”fa-envelope”] [icon name=”fa-envelope-o”] [icon name=”fa-exchange”] [icon name=”fa-exclamation”] [icon name=”fa-exclamation-circle”] [icon name=”fa-exclamation-triangle”] [icon name=”fa-external-link”] [icon name=”fa-external-link-square”] [icon name=”fa-eye”] [icon name=”fa-eye-slash”] [icon name=”fa-female”] [icon name=”fa-fighter-jet”] [icon name=”fa-film”] [icon name=”fa-filter”] [icon name=”fa-fire”] [icon name=”fa-fire-extinguisher”] [icon name=”fa-flag”] [icon name=”fa-flag-checkered”] [icon name=”fa-flag-o”] [icon name=”fa-flask”] [icon name=”fa-folder”] [icon name=”fa-folder-o”] [icon name=”fa-folder-open”] [icon name=”fa-folder-open-o”] [icon name=”fa-frown-o”] [icon name=”fa-gamepad”] [icon name=”fa-gavel”] [icon name=”fa-gift”] [icon name=”fa-glass”] [icon name=”fa-globe”] [icon name=”fa-hdd-o”] [icon name=”fa-headphones”] [icon name=”fa-heart”] [icon name=”fa-heart-o”] [icon name=”fa-home”] [icon name=”fa-inbox”] [icon name=”fa-info”] [icon name=”fa-info-circle”] [icon name=”fa-key”] [icon name=”fa-keyboard-o”] [icon name=”fa-laptop”] [icon name=”fa-leaf”] [icon name=”fa-lemon-o”] [icon name=”fa-level-down”] [icon name=”fa-level-up”] [icon name=”fa-lightbulb-o”] [icon name=”fa-location-arrow”] [icon name=”fa-lock”] [icon name=”fa-magic”] [icon name=”fa-magnet”] [icon name=”fa-mail-reply-all”] [icon name=”fa-male”] [icon name=”fa-map-marker”] [icon name=”fa-meh-o”] [icon name=”fa-microphone”] [icon name=”fa-microphone-slash”] [icon name=”fa-minus”] [icon name=”fa-minus-circle”] [icon name=”fa-mobile”] [icon name=”fa-moon-o”] [icon name=”fa-music”] [icon name=”fa-pencil”] [icon name=”fa-pencil-square”] [icon name=”fa-pencil-square-o”] [icon name=”fa-phone”] [icon name=”fa-phone-square”] [icon name=”fa-picture-o”] [icon name=”fa-plane”] [icon name=”fa-plus”] [icon name=”fa-plus-circle”] [icon name=”fa-power-off”] [icon name=”fa-print”] [icon name=”fa-puzzle-piece”] [icon name=”fa-qrcode”] [icon name=”fa-question”] [icon name=”fa-question-circle”] [icon name=”fa-quote-left”] [icon name=”fa-quote-right”] [icon name=”fa-random”] [icon name=”fa-refresh”] [icon name=”fa-reply”] [icon name=”fa-reply-all”] [icon name=”fa-retweet”] [icon name=”fa-road”] [icon name=”fa-rocket”] [icon name=”fa-rss”] [icon name=”fa-rss-square”] [icon name=”fa-search”] [icon name=”fa-search-minus”] [icon name=”fa-search-plus”] [icon name=”fa-share”] [icon name=”fa-share-square”] [icon name=”fa-share-square-o”] [icon name=”fa-shield”] [icon name=”fa-shopping-cart”] [icon name=”fa-sign-in”] [icon name=”fa-sign-out”] [icon name=”fa-signal”] [icon name=”fa-sitemap”] [icon name=”fa-smile-o”] [icon name=”fa-sort”] [icon name=”fa-sort-alpha-asc”] [icon name=”fa-sort-alpha-desc”] [icon name=”fa-sort-amount-asc”] [icon name=”fa-sort-amount-desc”] [icon name=”fa-sort-asc”] [icon name=”fa-sort-desc”] [icon name=”fa-sort-numeric-asc”] [icon name=”fa-sort-numeric-desc”] [icon name=”fa-spinner”] [icon name=”fa-star”] [icon name=”fa-star-half”] [icon name=”fa-star-half-o”] [icon name=”fa-star-o”] [icon name=”fa-subscript”] [icon name=”fa-suitcase”] [icon name=”fa-sun-o”] [icon name=”fa-superscript”] [icon name=”fa-tablet”] [icon name=”fa-tachometer”] [icon name=”fa-tag”] [icon name=”fa-tags”] [icon name=”fa-tasks”] [icon name=”fa-terminal”] [icon name=”fa-thumb-tack”] [icon name=”fa-thumbs-down”] [icon name=”fa-thumbs-o-down”] [icon name=”fa-thumbs-o-up”] [icon name=”fa-thumbs-up”] [icon name=”fa-ticket”] [icon name=”fa-times”] [icon name=”fa-times-circle”] [icon name=”fa-times-circle-o”] [icon name=”fa-tint”] [icon name=”fa-trash-o”] [icon name=”fa-trophy”] [icon name=”fa-truck”] [icon name=”fa-umbrella”] [icon name=”fa-unlock”] [icon name=”fa-unlock-alt”] [icon name=”fa-upload”] [icon name=”fa-user”] [icon name=”fa-users”] [icon name=”fa-video-camera”] [icon name=”fa-volume-down”] [icon name=”fa-volume-off”] [icon name=”fa-volume-up”] [icon name=”fa-wrench”]

[/column]

[clear gap=”20″]

[column size=”1/2″ class=”col-sm-6″]

Form Control Icons

[icon name=”fa-check-square”] [icon name=”fa-check-square-o”] [icon name=”fa-circle”] [icon name=”fa-circle-o”] [icon name=”fa-dot-circle-o”] [icon name=”fa-minus-square”] [icon name=”fa-minus-square-o”] [icon name=”fa-plus-square-o”] [icon name=”fa-square”] [icon name=”fa-square-o”]

[/column]

[column size=”1/2″ class=”col-sm-6″]

Currency Icons

[icon name=”fa-btc”] [icon name=”fa-eur”] [icon name=”fa-gbp”] [icon name=”fa-inr”] [icon name=”fa-jpy”] [icon name=”fa-krw”] [icon name=”fa-money”] [icon name=”fa-rub”] [icon name=”fa-try”] [icon name=”fa-usd”]

[/column]

[clear gap=”20″]

[column size=”1/2″ class=”col-sm-6″]

Directional Icons

[icon name=”fa-angle-double-down”] [icon name=”fa-angle-double-left”] [icon name=”fa-angle-double-right”] [icon name=”fa-angle-double-up”] [icon name=”fa-angle-down”] [icon name=”fa-angle-left”] [icon name=”fa-angle-right”] [icon name=”fa-angle-up”] [icon name=”fa-arrow-circle-down”] [icon name=”fa-arrow-circle-left”] [icon name=”fa-arrow-circle-o-down”] [icon name=”fa-arrow-circle-o-left”] [icon name=”fa-arrow-circle-o-right”] [icon name=”fa-arrow-circle-o-up”] [icon name=”fa-arrow-circle-right”] [icon name=”fa-arrow-circle-up”] [icon name=”fa-arrow-down”] [icon name=”fa-arrow-left”] [icon name=”fa-arrow-right”] [icon name=”fa-arrow-up”] [icon name=”fa-arrows”] [icon name=”fa-arrows-alt”] [icon name=”fa-arrows-h”] [icon name=”fa-arrows-v”] [icon name=”fa-caret-down”] [icon name=”fa-caret-left”] [icon name=”fa-caret-right”] [icon name=”fa-caret-square-o-down”] [icon name=”fa-caret-square-o-left”] [icon name=”fa-caret-square-o-right”] [icon name=”fa-caret-square-o-up”] [icon name=”fa-caret-up”] [icon name=”fa-chevron-circle-down”] [icon name=”fa-chevron-circle-left”] [icon name=”fa-chevron-circle-right”] [icon name=”fa-chevron-circle-up”] [icon name=”fa-chevron-down”] [icon name=”fa-chevron-left”] [icon name=”fa-chevron-right”] [icon name=”fa-chevron-up”] [icon name=”fa-hand-o-down”] [icon name=”fa-hand-o-left”] [icon name=”fa-hand-o-right”] [icon name=”fa-hand-o-up”] [icon name=”fa-long-arrow-down”] [icon name=”fa-long-arrow-left”] [icon name=”fa-long-arrow-right”] [icon name=”fa-long-arrow-up”]

[/column]

[column size=”1/2″ class=”col-sm-6″]

Text Editor Icons

[icon name=”fa-align-center”] [icon name=”fa-align-justify”] [icon name=”fa-align-left”] [icon name=”fa-align-right”] [icon name=”fa-bold”] [icon name=”fa-chain-broken”] [icon name=”fa-clipboard”] [icon name=”fa-columns”] [icon name=”fa-eraser”] [icon name=”fa-file”] [icon name=”fa-file-o”] [icon name=”fa-file-text”] [icon name=”fa-file-text-o”] [icon name=”fa-files-o”] [icon name=”fa-floppy-o”] [icon name=”fa-font”] [icon name=”fa-indent”] [icon name=”fa-italic”] [icon name=”fa-link”] [icon name=”fa-list”] [icon name=”fa-list-alt”] [icon name=”fa-list-ol”] [icon name=”fa-list-ul”] [icon name=”fa-outdent”] [icon name=”fa-paperclip”] [icon name=”fa-repeat”] [icon name=”fa-scissors”] [icon name=”fa-strikethrough”] [icon name=”fa-table”] [icon name=”fa-text-height”] [icon name=”fa-text-width”] [icon name=”fa-th”] [icon name=”fa-th-large”] [icon name=”fa-th-list”] [icon name=”fa-underline”] [icon name=”fa-undo”]

[/column]

[clear gap=”20″]

[column size=”1/2″ class=”col-sm-12″]

Video Player Icons

[icon name=”fa-backward”] [icon name=”fa-compress”] [icon name=”fa-eject”] [icon name=”fa-expand”] [icon name=”fa-fast-backward”] [icon name=”fa-fast-forward”] [icon name=”fa-forward”] [icon name=”fa-pause”] [icon name=”fa-play”] [icon name=”fa-play-circle”] [icon name=”fa-play-circle-o”] [icon name=”fa-step-backward”] [icon name=”fa-step-forward”] [icon name=”fa-stop”] [icon name=”fa-youtube-play”]

[/column]

[column size=”1/2″ class=”col-sm-12″]

Medical Icons

[icon name=”fa-ambulance”] [icon name=”fa-h-square”] [icon name=”fa-hospital-o”] [icon name=”fa-medkit”] [icon name=”fa-plus-square”] [icon name=”fa-stethoscope”] [icon name=”fa-user-md”] [icon name=”fa-wheelchair”]

[/column]

[clear gap=”20″]

[column size=”1/1″ class=”col-sm-12″]

Brand Icons

[icon name=”fa-adn”] [icon name=”fa-android”] [icon name=”fa-apple”] [icon name=”fa-bitbucket”] [icon name=”fa-bitbucket-square”] [icon name=”fa-css3″] [icon name=”fa-dribbble”] [icon name=”fa-dropbox”] [icon name=”fa-facebook”] [icon name=”fa-facebook-square”] [icon name=”fa-flickr”] [icon name=”fa-foursquare”] [icon name=”fa-github”] [icon name=”fa-github-alt”] [icon name=”fa-github-square”] [icon name=”fa-gittip”] [icon name=”fa-google-plus”] [icon name=”fa-google-plus-square”] [icon name=”fa-html5″] [icon name=”fa-instagram”] [icon name=”fa-linkedin”] [icon name=”fa-linkedin-square”] [icon name=”fa-linux”] [icon name=”fa-maxcdn”] [icon name=”fa-pagelines”] [icon name=”fa-pinterest”] [icon name=”fa-pinterest-square”] [icon name=”fa-renren”] [icon name=”fa-skype”] [icon name=”fa-stack-exchange”] [icon name=”fa-stack-overflow”] [icon name=”fa-trello”] [icon name=”fa-tumblr”] [icon name=”fa-tumblr-square”] [icon name=”fa-twitter”] [icon name=”fa-twitter-square”] [icon name=”fa-vimeo-square”] [icon name=”fa-vk”] [icon name=”fa-weibo”] [icon name=”fa-windows”] [icon name=”fa-xing”] [icon name=”fa-xing-square”] [icon name=”fa-youtube”] [icon name=”fa-youtube-square”]

[/column]

[clear gap=”60″]

List Styles

Lists can use all Font Awesome Icons.

[clear gap=”60″]

[column size=”1/3″ class=”col-sm-4″]

Ordered List

  1. Pellentesque a lectus lobortis, commodo
  2. Nulla quis nulla commodo, mattis lectus effic
  3. Vivamus posuere mauris et metus
  4. Duis pulvinar quam et metus sodales

[/column]

[column size=”1/3″ class=”col-sm-4″]

Unordered List

  • Curabitur interdum lectus ut urna porta
  • Donec ultrices nisl in massa rutrum iaculis
  • Quisque fermentum lectus eget
  • Vestibulum facilisis tortor eget semper

[/column]

[column size=”1/3″ class=”col-sm-4″]

Custom List

  • [icon name=”fa-star” class=”fa-li colored”] Aenean at justo vitae erat vehicula
  • [icon name=”fa-user” class=”fa-li”] Quisque sit amet metus vulputate
  • [icon name=”fa-leaf” class=”fa-li colored”] Nullam at nulla porta, sagittis risus eget
  • [icon name=”fa-twitter” class=”fa-li”] Cras eu lacus in eros

[/column]

[clear gap=”60″]

Stickers

[clear gap=”60″]

[column size=”1/2″]

Sticker with Header [sticker label=”Green” color=”green”] [sticker label=”Dark”]

With a primary content [sticker label=”Blue” color=”blue”] [sticker label=”Orange” color=”orange”] [sticker label=”Red” color=”red”]
[/column]
[column size=”1/2″]

Or, maybe with icons?

[sticker label=”90F” color=”green” icon=”fa-sun-o”] [sticker label=”3K” color=”blue” icon=”fa-coffee”] [sticker label=”7″ color=”orange” icon=”fa-thumbs-o-up”] [sticker label=”Up!” color=”red” icon=”fa-dribbble”]

[/column]

[clear gap=”60″]

Dropcaps

[clear gap=”60″]

[column size=”1/2″ class=”col-sm-6″]
[dropcap letter=”D”]onec magna est, condimentum vitae sodales ac, egestas at tellus. Curabitur gravida nibh lacus. Integer accumsan aliquet felis, a placerat enim facilisis sed. Nullam dapibus erat ac dignissim imperdiet. Mauris tempus nisl orci, at fringilla sapien dictum sit amet. Donec ac lacus eget massa malesuada sagittis.
[/column]
[column size=”1/2″ class=”col-sm-6″]
[dropcap letter=”N” style=”alt”]ullam efficitur ex et purus condimentum rutrum. Fusce hendrerit, odio ut facilisis finibus, sem ante dapibus leo, a pellentesque arcu arcu et est. Nullam fermentum, ante quis semper pellentesque, arcu sem volutpat nulla, non tempus lacus felis nec lectus. Interdum et malesuada fames ac ante ipsum primis.
[/column]

[clear gap=”60″]

Pricing Tables

[clear gap=”60″]

[pricing-table column=”1/3″]
[plan title=”Starter” price=”19$/month” link=”#” button=”Purchase”]

  • Quisque suscipit imperdiet
  • Praesent elementum
  • Aenean porta dignissim

[/plan]
[plan title=”Professional” price=”39$/month” link=”#” button=”Purchase” sticker=”New” sticker_color=”green”]

  • Quisque suscipit imperdiet
  • Praesent elementum
  • Aenean porta dignissim

[/plan]
[plan title=”Business” price=”59$/month” link=”#” button=”Purchase”]

  • Quisque suscipit imperdiet
  • Praesent elementum
  • Aenean porta dignissim

[/plan]
[/pricing-table]

[clear gap=”60″]

Columns

[clear gap=”60″]

[column size=”1/2″ class=”col-sm-6″]

One Half

Suspendisse congue accumsan diam sit amet dapibus. Cras in pulvinar lacus, nec ultricies lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut erat vitae quam maximus bibendum justo.
[/column]
[column size=”1/2″ class=”col-sm-6″]

One Half

Suspendisse congue accumsan diam sit amet dapibus. Cras in pulvinar lacus, nec ultricies lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut erat vitae quam maximus bibendum justo.
[/column]

 

[column size=”1/3″ class=”col-sm-4″]

One Third

Nulla facilisis lorem sed lorem varius porttitor. Fusce in augue finibus, venenatis lectus id, ornare velit. In dictum elementum quam quis aliquet.
[/column]
[column size=”1/3″ class=”col-sm-4″]

One Third

Nulla facilisis lorem sed lorem varius porttitor. Fusce in augue finibus, venenatis lectus id, ornare velit. In dictum elementum quam quis aliquet.
[/column]
[column size=”1/3″ class=”col-sm-4″]

One Third

Nulla facilisis lorem sed lorem varius porttitor. Fusce in augue finibus, venenatis lectus id, ornare velit. In dictum elementum quam quis aliquet.
[/column]

 

[column size=”1/4″ class=”col-sm-3″]

One Fourth

Proin sit amet lacinia massa. Cras at quam sit amet leo pretium varius vitae eu tortor. Interdum malesuada fames.
[/column]
[column size=”1/4″ class=”col-sm-3″]

One Fourth

Proin sit amet lacinia massa. Cras at quam sit amet leo pretium varius vitae eu tortor. Interdum malesuada fames.
[/column]
[column size=”1/4″ class=”col-sm-3″]

One Fourth

Proin sit amet lacinia massa. Cras at quam sit amet leo pretium varius vitae eu tortor. Interdum malesuada fames.
[/column]
[column size=”1/4″ class=”col-sm-3″]

One Fourth

Proin sit amet lacinia massa. Cras at quam sit amet leo pretium varius vitae eu tortor. Interdum malesuada fames.
[/column]

 

[column size=”1/6″ class=”col-sm-2″]

One Sixth

Vivamus vitae erat nunc. Fusce at arcu ut augue interdum lobortis.
[/column]
[column size=”1/6″ class=”col-sm-2″]

One Sixth

Vivamus vitae erat nunc. Fusce at arcu ut augue interdum lobortis.
[/column]
[column size=”1/6″ class=”col-sm-2″]

One Sixth

Vivamus vitae erat nunc. Fusce at arcu ut augue interdum lobortis.
[/column]
[column size=”1/6″ class=”col-sm-2″]

One Sixth

Vivamus vitae erat nunc. Fusce at arcu ut augue interdum lobortis.
[/column]
[column size=”1/6″ class=”col-sm-2″]

One Sixth

Vivamus vitae erat nunc. Fusce at arcu ut augue interdum lobortis.
[/column]
[column size=”1/6″ class=”col-sm-2″]

One Sixth

Vivamus vitae erat nunc. Fusce at arcu ut augue interdum lobortis.
[/column]