Style Guide
This is a sandbox of elements found in the theme documentation
Use this as a guide to elements which are available and as a resource for code samples to incorporate.
General Typography
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Emphasis, Highlight and Alert
Emphasis
muted - Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
success - Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
info - Maecenas sed diam eget risus varius blandit sit amet non magna
warning - Etiam porta sem malesuada magna mollis euismod.
danger - Donec ullamcorper nulla non metus auctor fringilla.
Highlights
Default Success Info Warning DangerAlerts
Headlines
Headline-v1 Sample Heading
Headline-v2 Sample Heading
Headline-v3 Sample Heading
Headline-v1 Heading and Icon
Headline-v2 Heading and Icon
Headline-v3 Heading and Icon
images
Tables
Default table
| 1 | Mark | Otto | @mdo |
|---|---|---|---|
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Striped rows
| 1 | Mark | Otto | @mdo |
|---|---|---|---|
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Bordered table
| 1 | Mark | Otto | @mdo |
|---|---|---|---|
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Hover rows
| 1 | Mark | Otto | @mdo |
|---|---|---|---|
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Condensed table
| 1 | Mark | Otto | @mdo |
|---|---|---|---|
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Contextual classes
Use contextual classes to color table rows or individual cells.
| 1 | Mark | Otto | @mdo |
|---|---|---|---|
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Using Font Awesome icons
Font Awesome gives you scalable vector icons that can instantly be customized -- size, color, drop shadow, and anything that can be done with the power of CSS. Plus: Font Awesome won't trip up screen readers, unlike other icon fonts.
This retro camera icon is an example
Check out the theme documentation for further instructions. Also see the complete Font Awesome icon reference and examples how to use Font Awesome.
Bootstrap Grid System
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Not demonstrated here, see theme documentation for usage
Theme Elements
Blocknumbers
First Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Page header
Sample Heading
... and a sample subheading
Spotlights
spotlight-v1 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!spotlight-v2 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!spotlight-v3 heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Read More!Blocknumbers
First Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bootstrap Components
Buttons
Buttons with icons
Delete Read more... Click here to download!Buttons with expandable content
Thumbnails
Default thumbnails
Customized thumbnails
Panels
Basic panels example
Panel title
Contextual panel alternatives
Panel title
Panel title
Panel title
Panel title
Panel title
Bootstrap Plugins
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.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Accordion
Carousel
First slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Second slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Carousel with set of thumbnails...
Content Boxes
Icon boxes
Text Boxes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Image Boxes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Promotion Boxes
heading prom-box-default
Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.
heading prom-box-info
Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.
heading prom-box-warning
Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.
heading prom-box-danger
Suscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.
Promotion Box with button
heading prom-box-default
ButtonSuscipit sed at montes at tellus. Aliquam nisl penatibus commodo massa mi rutrum, ut massa mollis dolor dui at, tortor ullamcorper vel diam pretium sit leo, pellentesque in leo eu mauris mollis aliquam, ultricies adipiscing eu a dui sollicitudin posuere.