Elements

[container style=”content-container-white” padding=”pad-l-r-5″ marginbottom=”no” clear=”clearfix”]
[row]
[column size=”in-one-third” type=”in-column” position=”alpha”]

[titleblock size=”h3″]Alert box[/titleblock]

[alert style=”notice” title=”Notice” content=”Your message!”]

[alert style=”info” title=”Info” content=”Your message!”]

[alert style=”error” title=”Error” content=”Your message!”]

[alert style=”success” title=”Success” content=”Your message!”]

[/column]

[column size=”in-one-third” type=”in-column” position=””]

[titleblock size=”h3″]Dropcaps[/titleblock]

[dropcaps style=”dropcap1″ letter=”P” ]ras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, nec dictum nunc tortor id urna eros ac molestie placerat, enim tellus.[/dropcaps]

[dropcaps style=”dropcap2″ letter=”P” ]ras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, nec dictum nunc tortor id urna eros ac molestie placerat, enim tellus.[/dropcaps]

[dropcaps style=”dropcap3″ letter=”P” ]ras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, nec dictum nunc tortor id urna eros ac molestie placerat, enim tellus.[/dropcaps]

[dropcaps style=”dropcap4″ letter=”P” ]ras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, nec dictum nunc tortor id urna eros ac molestie placerat, enim tellus.[/dropcaps]

[/column]

[column size=”in-one-third” type=”in-column” position=”omega”]

[titleblock size=”h3″]Styled lists[/titleblock]

  • List style 1
  • List style 2
  • List style 3
  • List style 4
  • List style 5
  • List style 6

[/column]
[/row]

[row]
[column size=”in-one-third” type=”in-column” position=”alpha”]

[titleblock size=”h3″]Accordion[/titleblock]

[accordion-wrapper]
[accordion-title] Lorem ipsum [/accordion-title]
[accordion-body] Nunc ipsum risus, bibendum quis tincidunt a, tempor quis nunc. Aenean in odio in sapien porttitor sodales. [/accordion-body]
[accordion-title] Vestilum pulvinar [/accordion-title]
[accordion-body] Nunc ipsum risus, bibendum quis tincidunt a, tempor quis nunc. Aenean in odio in sapien porttitor sodales. [/accordion-body]
[accordion-title] Donec sedin [/accordion-title]
[accordion-body] Nunc ipsum risus, bibendum quis tincidunt a, tempor quis nunc. Aenean in odio in sapien porttitor sodales. [/accordion-body]
[/accordion-wrapper]

[/column]

[column size=”in-one-third” type=”in-column” position=””]

[titleblock size=”h3″]Toggle[/titleblock]

[toggle-wrapper]
[toggle-title] Lorem ipsum [/toggle-title]
[toggle-body] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. [/toggle-body]
[toggle-title] Vestilum pulvinar [/toggle-title]
[toggle-body] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. [/toggle-body]
[toggle-title] Donec sedin [/toggle-title]
[toggle-body] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. [/toggle-body]
[/toggle-wrapper]

[/column]

[column size=”in-one-third” type=”in-column” position=”omega”]

[titleblock size=”h3″]Tabs[/titleblock]

[tab-wrapper]
[tab-title-wrapper]
[tab-title type=”active” id=”0″]First[/tab-title]
[tab-title id=”1″]Second[/tab-title]
[tab-title id=”2″]Third[/tab-title]
[/tab-title-wrapper]
[tab-body-wrapper]
[tab-body id=”0″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula.[/tab-body]
[tab-body id=”1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula.[/tab-body]
[tab-body id=”2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula.[/tab-body]
[/tab-body-wrapper][/tab-wrapper]

[/column]
[/row]

[row]
[column size=”in-sixteen” type=”in-columns” position=”alpha”]

[titleblock size=”h3″]Buttons With Icons[/titleblock]

[button url=”#” style=”default small” icon=”icon-briefcase”]BUTTON[/button] [button url=”#” style=”yellow small” icon=”icon-heart”]BUTTON[/button] [button url=”#” style=”blue small” icon=”icon-rocket”]BUTTON[/button] [button url=”#” style=”aqua medium” icon=”icon-ok”]BUTTON[/button] [button url=”#” style=”gray medium” icon=”icon-unlock”]BUTTON[/button] [button url=”#” style=”orange large” icon=”icon-file”]BUTTON[/button] [button url=”#” style=”green large” icon=”icon-star-empty”]BUTTON[/button]

[/column]
[/row]

[row]
[column size=”in-sixteen” type=”in-columns” position=”alpha”]

[titleblock size=”h3″]Button Small[/titleblock]

[button url=”#” style=”default small”]BUTTON[/button] [button url=”#” style=”yellow small”]BUTTON[/button] [button url=”#” style=”blue small”]BUTTON[/button] [button url=”#” style=”aqua small”]BUTTON[/button] [button url=”#” style=”orange  small”]BUTTON[/button] [button url=”#” style=”gray small”]BUTTON[/button] [button url=”#” style=”green small”]BUTTON[/button]

[/column]
[/row]

[row]
[column size=”in-sixteen” type=”in-columns” position=”alpha”]

[titleblock size=”h3″]Button Medium[/titleblock]

[button url=”#” style=”default medium”]BUTTON[/button] [button url=”#” style=”yellow medium”]BUTTON[/button] [button url=”#” style=”blue medium”]BUTTON[/button] [button url=”#” style=”aqua medium”]BUTTON[/button] [button url=”#” style=”orange  medium”]BUTTON[/button] [button url=”#” style=”gray medium”]BUTTON[/button] [button url=”#” style=”green medium”]BUTTON[/button]

[/column]
[/row]

[row]
[column size=”in-sixteen” type=”in-columns” position=”alpha”]

[titleblock size=”h3″]Button Large[/titleblock]

[button url=”#” style=”default large”]BUTTON[/button] [button url=”#” style=”yellow large”]BUTTON[/button] [button url=”#” style=”blue large”]BUTTON[/button] [button url=”#” style=”aqua large”]BUTTON[/button] [button url=”#” style=”orange  large”]BUTTON[/button] [button url=”#” style=”gray large”]BUTTON[/button] [button url=”#” style=”green large”]BUTTON[/button]

[/column]
[/row]

[row]
[column size=”in-sixteen” type=”in-columns” position=”alpha”]

[titleblock size=”h3″]Typography[/titleblock]

This is H1 Tag

Nunc volutpat odio sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is H2 Tag

Nunc volutpat odio sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is H3 Tag

Nunc volutpat odio sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is H4 Tag

Nunc volutpat odio sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is H5 Tag

Nunc volutpat odio sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is H6 Tag

Nunc volutpat odio sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisl orci, condim entum ultrices consequat eu, vehicula ac mauris. Ut adipiscing, leo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/column]
[/row]
[/container]