Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tabs
First panel content goes here...
Second panel content goes here...
Third panel content goes here...
Fourth panel content goes here...
Panel 1 content goes here.
Panel 2 content goes here.
Panel 3 content goes here.
Panel 4 content goes here.
Side Nav
Sub Nav
Tables
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Thumbnails
Tooltips
The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.
Top Bar
Type
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
h1. subheader
h2. subheader
h3. subheader
h4. subheader
h5. subheader
h6. subheader
Definition List
Definition lists are great for small block of copy that describe the header
- Lower cost
- The new version of this product costs significantly less than the previous one!
- Easier to use
- We've changed the product so that it's much easier to use!
- Safe for kids
- You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).
Un-ordered lists are great for making quick outlines bulleted.
- List item with a much longer description or more content.
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
Ordered lists are great for lists that need order, duh.
- List Item 1
- List Item 2
- List Item 3
Blockquote
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
Vcard
- Gaius Baltar
- 123 Colonial Ave.
- Caprica City
- Caprica, 12345
- g.baltar@example.com
Visibility Classes
Screen Size Visibility Control (Show)
The following text should describe the screen size you're using:
HTML
<p class="panel">
<strong class="show-for-small-only">This text is shown only on a small screen.</strong>
<strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
<strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
<strong class="show-for-large-up">This text is shown on large screens and up.</strong>
<strong class="show-for-large-only">This text is shown only on a large screen.</strong>
<strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
<strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
</p>Rendered HTML
This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.
Screen Size Visibility Control (Hide)
The following text should describe the screen size you aren't using:
HTML
<p class="panel">
<strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
<strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
<strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
<strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
<strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
<strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
<strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
</p>Rendered HTML
You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen. You are not on an xlarge screen and up. You are not on an xlarge screen. You are not on an xxlarge screen.
Orientation Detection
The following text should describe the device orientation you're using:
HTML
<p class="panel">
<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>
</p>Rendered HTML
You are in landscape orientation. You are in portrait orientation.
Touch Detection
The following text should describe if you're using a touch device:
HTML
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>Rendered HTML
You are on a touch-enabled device. You are not on a touch-enabled device.