Alerts

[divider type=”thin”]

[two_first]

[alert style=”blue”]This is the alert text and this is what it looks like![/alert][alert style=”red”]This is the alert text and this is what it looks like![/alert][alert style=”green”]This is the alert text and this is what it looks like![/alert][alert style=”yellow”]This is the alert text and this is what it looks like![/alert][alert style=”purple”]This is the alert text and this is what it looks like![/alert][alert style=”darkred”]This is the alert text and this is what it looks like![/alert][alert style=”brown”]This is the alert text and this is what it looks like![/alert][alert style=”grey”]This is the alert text and this is what it looks like![/alert][alert style=”dark”]This is the alert text and this is what it looks like![/alert][alert style=”grass”]This is the alert text and this is what it looks like![/alert][alert style=”pink”]This is the alert text and this is what it looks like![/alert]

[/two_first][two_second]

[well][[alert style=”blue”]This is the alert text and this is what it looks like![/alert]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Badges & Labels

[divider type=”thin”]

[two_first]

[badge style=”blue”]1[/badge][badge style=”red”]2[/badge][badge style=”green”]3[/badge][badge style=”yellow”]4[/badge][badge style=”purple”]5[/badge][badge style=”darkred”]6[/badge][badge style=”brown”]7[/badge][badge style=”grey”]8[/badge][badge style=”dark”]9[/badge][badge style=”grass”]10[/badge][badge style=”pink”]11[/badge]

[/two_first][two_second]

[well][[badge style=”blue”]1[/badge]][/well]

[/two_second]

[two_first]

[label style=”blue”]Label 1[/label] [label style=”red”]Label 2[/label] [label style=”green”]Label 3[/label] [label style=”yellow”]Label 4[/label] [label style=”purple”]Label 5[/label] [label style=”darkred”]Label 6[/label] [label style=”brown”]Label 7[/label] [label style=”grey”]Label 8[/label] [label style=”dark”]Label 9[/label] [label style=”grass”]Label 10[/label] [label style=”pink”]Label 11[/label]

[/two_first][two_second]

[well][[label style=”blue”]Label 1[/label]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Buttons

[divider type=”thin”]

[two_first]

[button url=”#” style=”blue”]Button[/button] [button url=”#” style=”red”]Button[/button] [button url=”#” style=”green”]Button[/button] [button url=”#” style=”yellow”]Button[/button] [button url=”#” style=”purple”]Button[/button] [button url=”#” style=”darkred”]Button[/button] [button url=”#” style=”brown”]Button[/button] [button url=”#” style=”grey”]Button[/button] [button url=”#” style=”dark”]Button[/button] [button url=”#” style=”grass”]Button[/button] [button url=”#” style=”pink”]Button[/button]
[button url=”#” style=”blue” size=”large”]Large Button[/button]
[button url=”#” style=”blue” size=”small”]Small Button[/button]
[button url=”#” style=”blue” size=”mini”]Mini Button[/button]
[button url=”#” style=”blue” size=”large” size=”block”]Block Button[/button]

[/two_first][two_second]

[well][[button url=”#” style=”blue”]Button[/button]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Columns

[divider type=”thin”]

See columns page

[divider type=”white” spacing=”50″]

Dividers

[divider type=”thin”]

[two_first]

[divider type=”thin”][divider type=”thick”][divider type=”short”][divider type=”dotted”][divider type=”dashed”]

[/two_first][two_second]

[well][[divider type=”thin”]]

[[divider type=”thick”]]

[[divider type=”short”]]

[[divider type=”dotted”]]

[[divider type=”dashed”]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Dropcap

[divider type=”thin”]

[two_first]

[dropcap]T[/dropcap]his is dummy copy. It’s Greek to you. Unless, of course, you’re Greek, in which case, it really makes no sense.

[dropcap background=”yes”]T[/dropcap]his is dummy copy. It’s Greek to you. Unless, of course, you’re Greek, in which case, it really makes no sense.

[/two_first][two_second]

[well][[dropcap]T[/dropcap]]his is dummy copy. It’s Greek to you. Unless, of course, you’re Greek, in which case, it really makes no sense.[/well]

[/two_second]

[divider type=”white” spacing=”50″]

PullQuote

[divider type=”thin”]

[two_first]

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. [pullquote]These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation.[/pullquote] Think of them merely as actors on a paper stage, in a performance devoid of content yet rich in form. That being the case, there is really no point in your continuing to read them. After all, you have many other things you should be doing. Who’s paying you to waste this time, anyway?

[/two_first][two_second]

[well][[pullquote]These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation.[/pullquote]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Tabs

[divider type=”thin”]

[two_first]

[tabs-header][tabs-header-group open=”one” active=”yes”] HEADER ITEM [/tabs-header-group][tabs-header-group open=”two”] HEADER ITEM [/tabs-header-group][/tabs-header][tabs-content][tabs-content-group id=”one” active=”yes”]This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. Think of them merely as actors on a paper stage, in a performance devoid of content yet rich in form. That being the case, there is really no point in your continuing to read them. After all, you have many other things you should be doing. Who’s paying you to waste this time, anyway?[/tabs-content-group][tabs-content-group id=”two”]It breaks up the intimidating blocks of text and makes the page more inviting to read, which is again ironic, considering this is dummy copy. It is not meant to be read. Someday this space will be occupied by real copy that is meant to be read. What other form of filler would dare be so politically incorrect? This is dummy copy. It is not meant to be read. Good thing.

[/tabs-content-group]
[/tabs-content]

[/two_first][two_second]

[well][[tabs-header]
[tabs-header-group open=”one” active=”yes”] HEADER ITEM [/tabs-header-group]
[tabs-header-group open=”two”] HEADER ITEM [/tabs-header-group]]
[/tabs-header]]

[[tabs-content]
[tabs-content-group id=”one” active=”yes”]…[/tabs-content-group]
[tabs-content-group id=”two”]…[/tabs-content-group]
[/tabs-content]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Tooltip

[divider type=”thin”]

[two_first]

[tooltip text=”Tooltip Text goes here” trigger=”hover”]Tooltip on hover[/tooltip]

[tooltip text=”Tooltip Text goes here” trigger=”click”]Tooltip on click[/tooltip]

[/two_first][two_second]

[well][[tooltip text=”Tooltip Text goes here” trigger=”hover”]Tooltip on hover[/tooltip]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Progress Bars

[divider type=”thin”]

[two_first]

[progress length=”50″ color=”#3bd2f8″]Mondays[/progress]

[progress length=”60″ color=”#3bd2f8″]Tuesdays[/progress]

[progress length=”70″ color=”#3bd2f8″]Wednesdays[/progress]

[progress length=”80″ color=”#3bd2f8″]Thursdays[/progress]

[progress length=”90″ color=”#3bd2f8″]Fridays[/progress]

[/two_first][two_second]

[well][[progress length=”90″ color=”#3bd2f8″]Fridays[/progress]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

Popover

[divider type=”thin”]

[two_first]

[popover text=”Popover Text goes here” trigger=”hover” placement=”top”]Popover Top[/popover]

[popover text=”Popover Text goes here” trigger=”hover” placement=”bottom”]Popover Bottom[/popover]

[popover text=”Popover Text goes here” trigger=”hover” placement=”left”]Popover Left[/popover]

[popover text=”Popover Text goes here” trigger=”hover” placement=”right”]Popover Right[/popover]

[/two_first][two_second]

[well][[popover text=”Popover Text goes here” trigger=”hover” placement=”top”]Popover Top[/popover]][/well]

[/two_second]

[divider type=”white” spacing=”50″]

 

>