Styling & Formating

List Styles

[one_fourth]

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

[/one_fourth]

[one_fourth]

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

[/one_fourth]

[one_fourth]

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

[/one_fourth]

[one_fourth_last]

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

[/one_fourth_last]

Drop Caps

[one_third][dropcaps]N[/dropcaps]am vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. [/one_third]

[one_third][dropcaps style=”circle”]N[/dropcaps]am vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. [/one_third]

[one_third_last][dropcaps style=”square”]N[/dropcaps]am vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. [/one_third_last]

[one_third]
[toggle title=”Get Code”]

[[dropcaps]N[/dropcaps]]

[/toggle]
[/one_third]

[one_third]
[toggle title=”Get Code”]

[[dropcaps style="circle"]N[/dropcaps]]

[/toggle]
[/one_third]

[one_third_last]
[toggle title=”Get Code”]

[[dropcaps style="square"]N[/dropcaps]]

[/toggle]
[/one_third_last]

[divider type=”space”]

Icon Text

[one_third]

  • [icon style=”home”]Home[/icon]
  • [icon style=”email”]Email[/icon]
  • [icon style=”link”]Link[/icon]
  • [icon style=”phone”]Phone[/icon]

[/one_third]

[one_third]

  • [icon style=”calendar”]Calendar[/icon]
  • [icon style=”user”]User[/icon]
  • [icon style=”save”]Save[/icon]
  • [icon style=”id”]Id[/icon]

[/one_third]

[one_third_last]

  • [icon style=”notice”]Notice[/icon]
  • [icon style=”rss”]Rss[/icon]
  • [icon style=”checked”]Checked[/icon]
  • [icon style=”tag”]Tag[/icon]

[/one_third_last]

[toggle title=”Get Code”]

[icon style="home"]Home[/icon]
[icon style="email"]Email[/icon]
[icon style="link"]Link[/icon]
[icon style="phone"]Phone[/icon]
[icon style="calendar"]Calendar[/icon]
[icon style="user"]User[/icon]
[icon style="save"]save[/icon]
[icon style="id"]Id[/icon]
[icon style="notice"]Notice[/icon]
[icon style="rss"]Rss[/icon]
[icon style="checked"]Checked[/icon]
[icon style="tag"]Tag[/icon]

[/toggle]

[divider type=”space”]

Framed Boxes

[framedbox]
[one_half]

Simple

Borem ipsum dolor sit amet, onsectur adipiscing elit. Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/one_half]

[one_half_last]

Framebox

Aenean nisl orci, condimentum ultrices consequat eu, vehicula ac mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condimentum.
[/one_half_last]

[/framedbox]

[toggle title=”Get Code”]

[[framedbox] content [/framedbox]]

[/toggle]

[divider type=”space”]

Highlighted Text

[one_fifth]

Lorem ipsum dolor sit amet, [highlight color=”red”]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

[toggle title=”Get Code”]

[[highlight color="red"] content [/highlight]]

[/toggle]
[/one_fifth]

[one_fifth]

Lorem ipsum dolor sit amet, [highlight color=”green”]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

[toggle title=”Get Code”]

[[highlight color="green"] content [/highlight]]

[/toggle]
[/one_fifth]

[one_fifth]

Lorem ipsum dolor sit amet, [highlight color=”blue”]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

[toggle title=”Get Code”]

[[highlight color="blue"] content [/highlight]]

[/toggle]
[/one_fifth]

[one_fifth]

Lorem ipsum dolor sit amet, [highlight color=”yellow”]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

[toggle title=”Get Code”]

[[highlight color="yellow"] content [/highlight]]

[/toggle]
[/one_fifth]

[one_fifth_last]

Lorem ipsum dolor sit amet, [highlight color=”black”]consectetur adipisicing[/highlight] elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

[toggle title=”Get Code”]

[[highlight color="black"] content [/highlight]]

[/toggle]
[/one_fifth_last]
[divider type=”space”]

Tooltips

[one_half]
Vestibulum quis urna libero, [tooltip text=”Suspendisse mollis sollicitudin sem, a sagittis mi pellentesque et. Avestibulum, arcu sodales feugiat consectetur.”]a venenatis risus[/tooltip]. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/one_half]

[one_half_last]
[tooltip text=”Suspendisse mollis sollicitudin sem, a sagittis mi pellentesque et. Avestibulum, arcu sodales feugiat consectetur.”]Vestibulum[/tooltip] quis urna libero, a venenatis risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/one_half_last]
[toggle title=”Get Code”]

[[tooltip text="Tooltip Text"] content [/tooltip]]

[/toggle]
[divider type=”space”]

Styled Table

[styledtable]

Options Title 1 Title 2 Title 3 Title 4
Option Title 1 Option Option Option Option
Option Title 2 Option Option Option Option
Option Title 3 Option Option Option Option
Option Title 4 Option Option Option Option
Option Title 5 Option Option Option Option
Table footer text

[/styledtable]
[toggle title=”Get Code”]

[[styledtable] table markup [/styledtable]]

[/toggle]
[divider type=”space”]

Url Shortening

Suspendisse mollis sollicitudin [short url=”http://www.freaklife.com/rumblings/”] sem, a sagittis mi pellentesque et. Avestibulum, arcu sodales feugiat consectetur.

[toggle title=”Get Code”]

[[short url="http://www.yoursite.com/very-very-very-long-url/"]]

[/toggle]

[divider type=”space”]

Dividers

[one_third]
[toggle title=”Get Code”]

[[divider type="space"]]

[/toggle]
[/one_third]

[one_third_last]
[toggle title=”Get Code”]

[[divider type="line"]]

[/toggle]
[/one_third_last]

Leave a comment