Typography

Refer to the typography page.

Columns

1/2

[columns]
[column size=“1/2″]Lorem ipsum blandit ac eget sed nullam magna massa porta auctor, libero lectus adipiscing tristique faucibus id pulvinar morbi.

Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.[/column]

[column size=“1/2″]Lorem ipsum blandit ac eget sed nullam magna massa porta auctor, libero lectus adipiscing tristique faucibus id pulvinar morbi.

Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.[/column][/columns]

1/3

[columns]
[column size=“1/3″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.[/column]
[column size=“1/3″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.[/column]
[column size=“1/3″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.[/column][/columns]

1/4

[columns]
[column size=“1/4″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.

[/column]
[column size=“1/4″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.

[/column]
[column size=“1/4″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.

[/column]
[column size=“1/4″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.

[/column]
[/columns]

 1/4 and 1/2 – Simple example of the several possible combinations

[columns]
[column size=“1/4″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo.[/column]
[column size=“1/4″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo.[/column]
[column size=“1/2″]Hendrerit vulputate himenaeos congue eget phasellus amet rutrum, porttitor blandit semper libero conubia leo senectus condimentum, potenti amet congue praesent ullamcorper vulputate primis erat proin himenaeos viverra dui eget turpis.[/column]
[/columns]

[columns]
[column size=“1/2″]

Tabs

[tabs]
[tab title=“Hendrerit“]Lacus molestie erat quisque fermentum semper lobortis eu viverra fames, netus massa potenti sapien per elit ac pulvinar luctus, aliquam dolor ut vitae praesent ligula lacus placerat mattis ligula augue potenti ultricies ipsum vel felis aliquam, pellentesque interdum torquent cras curabitur porttitor.

Bibendum nam sit vehicula hendrerit ut lectus vestibulum fermentum, ligula suscipit ut purus viverra habitant aliquam, cursus scelerisque nibh phasellus elit eget curabitur aliquet metus netus vulputate venenatis sem facilisis risus, leo tincidunt aenean commodo a orci, nibh curabitur elementum vestibulum ligula ut aliquam auctor habitasse ultrices tortor aliquam.
[/tab]
[tab title=“Velit“]Velit sodales laoreet litora blandit habitant ipsum molestie vitae vel euismod porttitor viverra elit quis, arcu pellentesque inceptos risus aliquam imperdiet pretium ad ipsum sem vel tincidunt imperdiet morbi tortor ultricies curae egestas mollis condimentum pulvinar.[/tab]
[tab title=“Ultrices“]Ultrices praesent sodales placerat aenean ultricies duis dictum tempor vel vestibulum nisl, amet lectus aptent aliquet mattis placerat leo condimentum libero vitae semper, ut velit eget lacinia quam maecenas ligula aliquam erat porta lobortis taciti sollicitudin convallis scelerisque volutpat curabitur, sem nam ante tincidunt dictum rutrum bibendum, erat urna habitasse diam semper.[/tab]
[/tabs]
[/column]

[column size=“1/2″]

Accordions

[accordions ]
[accordion title=“Etiam nulla orci consequat risus interdum“ load=“show“]Bibendum nam sit vehicula hendrerit ut lectus vestibulum fermentum, ligula suscipit ut purus viverra habitant aliquam, cursus scelerisque nibh phasellus elit eget curabitur aliquet metus netus vulputate venenatis sem facilisis risus, leo tincidunt aenean commodo a orci, nibh curabitur elementum vestibulum ligula ut aliquam auctor habitasse ultrices tortor aliquam.[/accordion]
[accordion title=“Tempor mauris vulputate phasellus laoreet“ load=“hide“]Tempor mauris vulputate phasellus laoreet fames ante sapien, pellentesque posuere ornare neque vel vulputate dapibus, duis malesuada justo ante lobortis vel aenean proin potenti ligula interdum volutpat, ad vehicula amet potenti netus, quam fringilla integer vehicula.[/accordion]
[accordion title=“Vivamus vestibulum faucibus amet nibh consequat“ load=“hide“]Tempor mauris vulputate phasellus laoreet fames ante sapien, pellentesque posuere ornare neque vel vulputate dapibus, duis malesuada justo ante lobortis vel aenean proin potenti ligula interdum volutpat, ad vehicula amet potenti netus, quam fringilla integer vehicula.[/accordion]
[/accordions]
[/column][/columns]

 

Custom Lists

[columns]
[column size=“1/4″]
[list style=“check“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[column size=“1/4″]
[list style=“star“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[column size=“1/4″]
[list style=“edit“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[column size=“1/4″]
[list style=“folder“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[/columns]

[columns]
[column size=“1/4″]
[list style=“file“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[column size=“1/4″]
[list style=“heart“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[column size=“1/4″]
[list style=“asterisk“]
[li]List item 1…[/li]
[li]List item 2…[/li]
[li]List item 3…[/li]
[/list]
[/column]
[/columns]

 

Dividers

[divider size=“full“]

[divider size=“large“]

[divider size=“small“]

[divider size=“tiny“]

[divider style=“double-line“]

 

Buttons

[button link=“#link“ size=“large“]Large Button[/button]

 

[button link=“#link“ size=“medium“]Medium Button[/button]

 

[button link=“#link“ size=“small“]Small Button[/button]

 

Alerts

[alert]Simple! This is an alert message.[/alert]

[alert type=“success“]Well done! You successfully read this important alert message.[/alert]

[alert type=“info“]Heads up! This alert needs your attention, but it’s not super important.[/alert]

[alert type=“warning“]Warning! Better check yourself, you’re not looking too good.[/alert]

[alert type=“danger“]Oh snap! Change a few things up and try submitting again.[/alert]