Buttons
| Button | Shortcode |
|---|---|
| Primary | [button size="normal" type="primary" value="Primary" href="#"] |
| Default | [button size="normal" type="default" value="Default" href="#"] |
| Info | [button size="normal" type="info" value="Info" href="#"] |
| Success | [button size="normal" type="success" value="Success" href="#"] |
| Warning | [button size="normal" type="warning" value="Warning" href="#"] |
| Danger | [button size="normal" type="danger" value="Danger" href="#"] |
| Inverse | [button size="normal" type="inverse" value="Inverse" href="#"] |
| Link | [button size="normal" type="link" value="Link" href="#"] |
Button Size
| Button | Shortcode |
|---|---|
| Large Button | [button size="large" type="primary" value="Large Button" href="#"] |
| Default Button | [button size="normal" type="primary" value="Default Button" href="#"] |
| Small Button | [button size="small" type="primary" value="Small Button" href="#"] |
| Mini Button | [button size="mini" type="primary" value="Mini Button" href="#"] |
Labels
| Example | Shortcode |
|---|---|
| Default | [label]Default[/label] |
| Success | [label type="success"]Success[/label] |
| Warning | [label type="warning"]Warning[/label] |
| Important | [label type="important"]Important[/label] |
| Info | [label type="info"]Info[/label] |
| Inverse | [label type="inverse"]Inverse[/label] |
Badges
| Example | Shortcode |
|---|---|
| 1 | [badge]1[/badge] |
| 2 | [badge type="success"]2[/badge] |
| 4 | [badge type="warning"]4[/badge] |
| 6 | [badge type="important"]6[/badge] |
| 8 | [badge type="info"]8[/badge] |
| 10 | [badge type="inverse"]10[/badge] |
Notification
Warning! Best check yo self, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Tabs
Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.
Collapce
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci tellus, tincidunt non semper vitae, posuere vel felis. Vivamus ultrices turpis et enim ullamcorper porta. Sed lorem risus, pharetra id porta ut, congue at magna. Mauris gravida enim tincidunt nunc volutpat ac laoreet turpis hendrerit. Ut purus purus, dignissim nec egestas in, pulvinar sit amet leo. Quisque vehicula dignissim urna vel accumsan. Sed elit ligula, ullamcorper quis pharetra eget, ornare at quam. Donec rutrum venenatis aliquam. Aenean eros nulla, ultricies vitae tincidunt eu, cursus tempus lorem.Ut tempor, dui ac rhoncus sodales, ipsum turpis facilisis felis, sed semper nibh sem porta felis. Proin nec eleifend magna. Curabitur felis dolor, vestibulum nec condimentum eget, eleifend vel quam. Pellentesque rhoncus, enim eget rhoncus volutpat, nibh nisl condimentum augue, convallis gravida odio leo id neque. Nulla tempus, felis sit amet sollicitudin sodales, neque risus sollicitudin elit, sit amet suscipit mauris neque non neque. Fusce consequat condimentum odio eu congue. Ut porttitor, quam venenatis congue eleifend, lacus eros egestas tortor, ac vulputate mi quam vitae velit.
Duis elementum, diam id porttitor sagittis, enim nisi feugiat ipsum, non iaculis ante lectus at risus. Aliquam ultrices ipsum et dolor dictum sed lacinia quam pulvinar. Sed quis leo sem. Ut orci justo, placerat eget convallis eget, venenatis sed mi. Ut at nulla vel augue varius rhoncus eu nec diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Integer in orci orci, nec feugiat dui.
Sed fringilla, ante nec blandit pretium, ante velit venenatis nisi, nec pretium eros mi id nibh. Ut sagittis odio ac leo lacinia lacinia. Ut congue purus eget mi venenatis mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris et sem lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor pretium massa, non scelerisque tortor condimentum id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer urna nisi, tempor a molestie sed, pellentesque at justo.
This is a Heading 1
This is a Heading 2
This is a Heading 3
This is a Heading 4
This is a Heading 5
This is a Heading 6
[h1]This is a Heading 1[/h1] [h2]This is a Heading 2[/h2] [h3]This is a Heading 3[/h3] [h4]This is a Heading 4[/h4] [h5]This is a Heading 5[/h5] [h6]This is a Heading 6[/h6]
This is a Heading 1
This is a Heading 2
This is a Heading 3
This is a Heading 4
This is a Heading 5
This is a Heading 6
[h1 type="bold"]This is a Heading 1[/h1] [h2 type="bold"]This is a Heading 2[/h2] [h3 type="bold"]This is a Heading 3[/h3] [h4 type="bold"]This is a Heading 4[/h4] [h5 type="bold"]This is a Heading 5[/h5] [h6 type="bold"]This is a Heading 6[/h6]
Addresses
Twitter, Inc.795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@gmail.com
[address][strong]Twitter, Inc.[/strong] 795 Folsom Ave, Suite 600 San Francisco, CA 94107 [abbr title="Phone"]P:[/abbr] (123) 456-7890[/address] [address][strong]Full Name[/strong] [hyperlink href="mailto:#"]first.last@gmail.com[/hyperlink][/address]
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
[blockquote cite="Someone famous Source Title"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.[/blockquote]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
[blockquote-right cite="Someone famous Source Title"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.[/blockquote-right]
Tooltips
| Tooltip | Shortcode |
|---|---|
| Tooltip on top | [tooltip title="Tooltip on top"]Tooltip on top[/tooltip] |
| Tooltip on right | [tooltip title="Tooltip on right" placement="right"]Tooltip on right[/tooltip] |
| Tooltip on bottom | [tooltip title="Tooltip on bottom" placement="bottom"]Tooltip on bottom[/tooltip] |
| Tooltip on left | [tooltip title="Tooltip on left" placement="left"]Tooltip on left[/tooltip] |
Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
[table] [table-head] [tr] [th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th] [/tr] [/table-head] [table-body] [tr] [td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td] [/tr] [tr] [td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td] [/tr] [tr] [td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td] [/tr] [/table-body] [/table]
table-striped
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
[table type="table-striped"] [table-head] [tr] [th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th] [/tr] [/table-head] [table-body] [tr] [td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td] [/tr] [tr] [td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td] [/tr] [tr] [td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td] [/tr] [/table-body] [/table]
table-bordered
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
[table type="table-bordered"] [table-head] [tr] [th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th] [/tr] [/table-head] [table-body] [tr] [td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td] [/tr] [tr] [td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td] [/tr] [tr] [td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td] [/tr] [/table-body] [/table]
table-hover
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
[table type="table-hover"] [table-head] [tr] [th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th] [/tr] [/table-head] [table-body] [tr] [td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td] [/tr] [tr] [td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td] [/tr] [tr] [td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td] [/tr] [/table-body] [/table]
Row Classes
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB – Monthly | 01/04/2012 | Approved |
| 2 | TB – Monthly | 02/04/2012 | Declined |
| 3 | TB – Monthly | 03/04/2012 | Pending |
| 4 | TB – Monthly | 04/04/2012 | Call in to confirm |
[table] [table-head] [tr] [th]#[/th][th]Product[/th][th]Payment Taken[/th][th]Status[/th] [/tr] [/table-head] [table-body] [tr type="success"] [td]1[/td][td]TB – Monthly[/td][td]01/04/2012[/td][td]Approved[/td] [/tr] [tr type="error"] [td]2[/td][td]TB – Monthly[/td][td]02/04/2012[/td][td]Declined[/td] [/tr] [tr type="warning"] [td]3[/td][td]TB – Monthly[/td][td]03/04/2012[/td][td]Pending[/td] [/tr] [tr type="info"] [td]4[/td][td]TB – Monthly[/td][td]04/04/2012[/td][td]Call in to confirm[/td] [/tr] [/table-body] [/table]