Headings
H1.Lorem ipsum dolor sit amet
H2.Lorem ipsum dolor sit amet
H3.Lorem ipsum dolor sit amet
H4.Lorem ipsum dolor sit amet
H5.Lorem ipsum dolor sit amet
H6.Lorem ipsum dolor sit amet
Emphasis classes
Cum sociispenatibus parturient, your Muted Highlight text goes here... nascetur ridiculus.
Cum sociispenatibus parturient, your Primary Highlight text goes here... nascetur ridiculus.
Cum sociispenatibus parturient, your Success Highlight text goes here... nascetur ridiculus.
Cum sociispenatibus parturient, your Warning Highlight text goes here... nascetur ridiculus.
Cum sociispenatibus parturient, your Danger Highlight text goes here... nascetur ridiculus.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
Lists
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Lorem ipsum dolor sit
- Nulla volutpat aliquam
- Faucibus porta lacus vel
- Aenean sit amet erat nunc
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Lorem ipsum dolor sit
- Nulla volutpat aliquam
- Faucibus porta lacus vel
- Aenean sit amet erat nunc
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Lorem ipsum dolor sit
- Faucibus porta lacus vel
- Aenean sit amet erat nunc
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Lorem ipsum dolor sit
- Nulla volutpat aliquam
- Faucibus porta lacus vel
- Aenean sit amet erat nunc
Tables
Basic example - Optional classes (Default - Striped - Bordered)
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Item #1 | Description | Subtotal: | $1.00 |
Item #2 | Description | Discount: | $2.00 |
Item #3 | Description | Shipping: | $3.00 |
Item #4 | Description | Tax: | $4.00 |
All Items | Description | Your Total: | $10.00 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Item #1 | Description | Subtotal: | $1.00 |
Item #2 | Description | Discount: | $2.00 |
Item #3 | Description | Shipping: | $3.00 |
Item #4 | Description | Tax: | $4.00 |
All Items | Description | Your Total: | $10.00 |
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Item #1 | Description | Subtotal: | $1.00 |
Item #2 | Description | Discount: | $2.00 |
Item #3 | Description | Shipping: | $3.00 |
Item #4 | Description | Tax: | $4.00 |
All Items | Description | Your Total: | $10.00 |
Links & Buttons
Link
Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet.
Button Options
Button Sizes
Thumbnails
Default Thumbnail Image
Etiam quis elit ut odio rutrum hendrerit sodales vitae orci. Morbi viverra porta scelerisque. Vestibulum consequat, leo vulputate sollicitudin bibendum, arcu ipsum sagittis lacus, et vehicula eros ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, felis vehicula faucibus pretium, augue libero cursus odio, eu venenatis est arcu et est. Vestibulum ultricies libero magna, eget feugiat tellus pellentesque sed.
Default Rounded Image
Etiam quis elit ut odio rutrum hendrerit sodales vitae orci. Morbi viverra porta scelerisque. Vestibulum consequat, leo vulputate sollicitudin bibendum, arcu ipsum sagittis lacus, et vehicula eros ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, felis vehicula faucibus pretium, augue libero cursus odio, eu venenatis est arcu et est. Vestibulum ultricies libero magna, eget feugiat tellus pellentesque sed.
Default Circle Image
Etiam quis elit ut odio rutrum hendrerit sodales vitae orci. Morbi viverra porta scelerisque. Vestibulum consequat, leo vulputate sollicitudin bibendum, arcu ipsum sagittis lacus, et vehicula eros ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean condimentum, felis vehicula faucibus pretium, augue libero cursus odio, eu venenatis est arcu et est. Vestibulum ultricies libero magna, eget feugiat tellus pellentesque sed.
Tabs
Pras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Ligula ac nulla. Mauris eu sem dui. Nullam felis nulla, scelerisque nec arcu non, volutpat placerat dolor
Felis nulla, scelerisque nec arcu nonla, scelerisque nec arcu non, volutpat placerat dolorPras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Ollicitudin commodo.
Fusce condimentum nunc ac nisi vulputate fringilla fringilla. Donec lacinia congue felis in faucibus.
Tooltips
Dras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante commodo sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus faucibus tiao. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Alert Messages
Default Alert Messages
Well Done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Dismissable Alert Messages
Well Done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Links in Alert Messages
Well Done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Drop Caps
Dras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Aras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
How to use the Typography
Gap [gap height="30"] Headings [title size="1,2,3,4,5,6"]Your Heading goes here..[/title] Emphasis classes First text [highlight type="muted, primary, success, warning, danger"]your highlight text goes here...[/highlight] end text. Blockquotes <blockquote>Your text goes here...</blockquote> Default List [list type="unordered, ordered, unstyled"] <ul> <li>Lorem ipsum dolor sit amet</li> <li>Nulla volutpat aliquam velit</li> <li>Aenean sit amet erat nunc</li> </ul> [/list] List with icons [list type="unordered, ordered, unstyled"] <ul> <li><i class="fa fa-camera-retro"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-cog"></i>Nulla volutpat aliquam velit</li> <li><i class="fa fa-check"></i>Aenean sit amet erat nunc</li> </ul> [/list] Button Options [button type="e.g link, button, input, submit" color_type="e.g. default, primary, info, success, warning, danger, link" size="e.g. mini, small, default, large" block="e.g. yes, no" link="" target="e.g. _self, _blank" style=""]button name goes here[/button] [button type="button" color_type="primary"]Primary[/button] [button type="button" color_type="success"]Success[/button] [button type="button" color_type="info"]Info[/button] [button type="button" color_type="warning"]Warning[/button] [button type="button" color_type="danger"]Danger[/button] Button Sizes [button type="button" color_type="primary" size="large"]Large Button[/button] [button type="button" color_type="primary"]Default Button[/button] [button type="button" color_type="primary" size="small"]Small Button[/button] [button type="button" color_type="primary" size="mini"]Extra small button[/button] Image Frames [imageframe src="/your_image_path_goes_here" type="rounded, circle, thumbnail, default" class="" alt="image title" align="e.g. left, right" style="" link="#" target="blank, self"] Tabs [tabs tab1="Home" tab2="Profile" tab3="Info" active="tab1"] [tab id=1 active="yes"]Your text goes here...[/tab] [tab id=2 active="no"]Your text goes here...[/tab] [tab id=3 active="no"]Your text goes here...[/tab] [/tabs] Tooltips Start text [tooltip title="sample_text" text="Your tooltip message"] end text. Alert Messages [alert type="success" dismiss="yes, no"]Well Done! You successfully read this important alert message.[/alert] [alert type="info" dismiss="yes, no"]Heads up! This alert needs your attention, but it's not super important.[/alert] [alert type="warning" dismiss="yes, no"]Warning! Best check yo self, you're not looking too good.[/alert] [alert type="danger" dismiss="yes, no"]Oh snap! Change a few things up and try submitting again.[/alert] Drop Caps [dropcap type="1"]A[/dropcap]your text goes here. [dropcap type="2"]B[/dropcap]your text goes here. Social Icons [social_icons] [social_icon social="facebook" link="#"] [social_icon social="flickr" link="#] [social_icon social="rss" link="#"] [social_icon social="twitter" link="#"] [social_icon social="vimeo" link="#"] [social_icon social="youtube" link="#"] [social_icon social="pinterest" link="#"] [social_icon social="tumblr" link="#"] [social_icon social="google" link="#"] [social_icon social="dribbble" link="#"] [social_icon social="digg" link="#"] [social_icon social="linkedin" link="#"] [social_icon social="blogger" link="#"] [social_icon social="skype" link="#"] [social_icon social="forrst" link="#"] [social_icon social="delicious" link="#"] [social_icon social="devianart" link="#"] [social_icon social="yahoo" link="#"] [social_icon social="picasa" link="#"] [social_icon social="email" link="#"] [social_icon social="google" link="#"] [/social_icons] Social Sharing [social_icons] [sharing_box title="Sample Title" link="http://www.google.com" description="Sample description..."] [/social_icons] Awesome Icons [fonticon icon="e.g. fa-adjust, fa-heart" size="e.g. fa-lg, fa-2x, fa-3x, fa-4x, fa-5x" spin="e.g. yes or no" style="" class=""] [fonticon icon="fa-adjust" size="fa-2x"] [fonticon icon="fa-cog" size="fa-2x"] [fonticon icon="fa-check-circle" size="fa-2x"] [fonticon icon="fa-calendar-o" size="fa-2x"] [fonticon icon="fa-bell" size="fa-2x"]
more 350+ awesome icons...