Spice up your content a little with the finer details! In this section, we’ll quickly show some examples of little elements you can use inline with your content.

[divider]

FontAwesome Vector Icons

Take advantage of our theme framework’s integration of FontAwesome.

[vector_icon icon=”star”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

[vector_icon icon="star"]
[vector_icon icon=”star” size=”20px”] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

[vector_icon icon="star" size="20px"]

Options

Argument Default Description
icon (required) None Icon name (view icons).
Ex: arrow-right, chevron-right, twitter, etc.
Note: Do not prefix icon ID with fa-.
color None Color for the icon – #660000, #000, etc.
size None A font-size declaration – 20px, 2em, etc.
rotate None Optional rotation of the icon – 90, 180, 270.
flip None Optional flip of the icon – horizontal, vertical.
class None Optional CSS class for the icon.
[divider]

Labels

[label style=”warning”]Hold up![/label] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

[label style="warning"]Hold up![/label]
[label style=”info” icon=”info-circle”]Information[/label] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

[label style="info" icon="info-circle"]Information[/label]

Options

Argument Default Description
style default Style of label, see below – default, success, warning, important, info.
icon None Optional icon in label (view icons).
Ex: arrow-right, chevron-right, twitter, etc.
Note: Do not prefix icon ID with fa-.

Styles

Example Usage
[label]Default[/label] [label]Default[/label]
[label style=”success”]Success[/label] [label style="success"]Success[/label]
[label style=”warning”]Warning[/label] [label style="warning"]Warning[/label]
[label style=”important”]Important[/label] [label style="important"]Important[/label]
[label style=”info”]Information[/label] [label style="info"]Information[/label]
[divider]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. [icon_link icon=”download” link=”http://google.com” ]Download the freebie![/icon_link]

[icon_link icon="download" link="http://google.com"]Download the freebie![/icon_link]

Options

Argument Default Description
icon (required) None Icon before text of link (view icons).
Ex: arrow-right, chevron-right, twitter, etc.
Note: Do not prefix icon ID with fa-.
link (required) None The full URL of where you want the link to go.
Ex: http://google.com
color None Color of the icon – Ex: #660000
target _self How the link will open – _self (same window) or _blank (new window).
class None Any CSS classes you want to add to the wrapping HTML.
title None Title tag of link, for you SEO folks. If left blank, it will default to the text of the link.
[divider]

Text Highlighting

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[highlight]This text will be highlighted.[/highlight]
[divider]

Drop Caps

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

[dropcap]T[/dropcap]he first letter will be large.