Design Elements
H1 Text Is the Top of The Totem-pole
This Is the Size of H2 Text
This Is H3 Sized Text
H4 Text is Sized Like This
Level 5 Text as an H5
The Jester of the Headers H6
This is standard p text sizing
Kicker text for getting you to notice something
A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text using .lead
This is what strong text looks like
This is what italic text looks like
This is the styling for an a href
This Is an H3 in Color 1
This Is an H3 in Color 2
This Is an H3 in Color 3
This Is an H3 in Color 4
This Is an H3 in Color 1
This Is an H3 in Color 2
This Is an H3 in Color 3
This Is an H3 in Color 4
H3 Small Header Segments Wrapped in Small Tags
Standard Styling for Bulleted List
Bullet 1
Bullet 2
Nested list item
Nested list item
Nested list item
Bullet 3
Standard Styling for Ordered List
Bullet 1
Bullet 2
Nested list item
Nested list item
Nested list item
Bullet 3
ul.no-bullet
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
Definition Lists
Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move.
Blockquotes
Those people who think they know everything are a great annoyance to those of us who do.
Isaac Asimov
Statistics
Days until take off
808
Text Alignment
text-left
The universe works in mysterious ways. There I was, attending a luncheon when I realized that the speaker for our discussion on digital trends was none other than someone I met during my college days working in a coffee shop. We had to cut our geek-out conversation short so that he could jump up and present.
text-right
What my friend outlined in the discussion wasn’t just the key trends in digital media. Many of the trends are well-known, must-haves to those of us in the digital community. He highlighted one overarching theme: give consumers what they want.
text-center
While the presentation did a wonderful job breaking down the confusing topics of coding languages, search engine optimization and site optimization, it all related back to what the viewer wants out of a website:
text-justify
The next trend topic centered around mobile. And to put it simply, if you’re not paying attention to how your brand presence in mobile you can say goodbye to at least half of your traffic. What consumers want from your website is the same for mobile. As consumers, however, we’re more impatient when it comes to mobile and it may be easiest to convey mobile trends with what viewers don’t want.
Accordion
Accordion Menu
Badge
2
3
A
B
Breadcrumbs
Button
Learn More
View All Features
Save
Delete
So Tiny
So Small
So Large
Such Expand
Callout
Close Button
×
This is a static close button example.
Drilldown Menu
Dropdown Menu
Dropdown Pane
Toggle Dropdown
Just some junk that needs to be said. Or not. Your choice.
Equalizer
Pellentesque habitant morbi tristique senectus et netus et, ante.
Flex Grid
12/6/4 columns
12/6/8 columns
12/6/4 columns
12/6/8 columns
Flex Video
VIDEO
Float Classes
Grid
2/3/4 columns
4/3/4 columns
6/6/4 columns
12/12/3 columns
12/12/6 columns
12/12/3 columns
6/6/2 columns
6/6/8 columns
12/12/2 columns
12/8/4 columns
12/4/8 columns
2/3/4 columns
4/3/4 columns
6/6/4 columns
12/12/3 columns
12/12/6 columns
12/12/3 columns
6/6/2 columns
6/6/8 columns
12/12/2 columns
12/8/4 columns
12/4/8 columns
Interchange
Label
Secondary Label
Success Label
Alert Label
Warning Label
Magellan
First section
Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam.
Second section
Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.
Third section
Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.
Media Object
Menu
Off-canvas
html_example
Open Menu
Orbit
Previous Slide ◀Next Slide ▶
You can also throw some text in here!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
This Orbit slide has chill
You can also throw some text in here!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
This Orbit slide has chill
You can also throw some text in here!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
This Orbit slide has chill
You can also throw some text in here!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.
This Orbit slide has chill
First slide details. Current Slide Second slide details. Third slide details. Fourth slide details.
Pagination
Progress Bar
Responsive Menu
Responsive Toggle
Reveal - lightbox
Click me for a modal
Awesome. I Have It.
Your couch. It is mine.
I'm a cool paragraph that lives inside of an even cooler modal. Wins!
×
Reveal - nested lightbox
Click me for a modal
ANOTHER MODAL!!!
×
Slider
Sticky
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Switch
Tiny Sandwiches Enabled
Small Portions Only
Show Large Elephants
Table
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
Tabs
one
Check me out! I'm a super cool Tab panel with text content!
two
three
Check me out! I'm a super cool Tab panel with text content!
four
five
Check me out! I'm a super cool Tab panel with text content!
six
Thumbnail
Title Bar
Toggler
Expand!
Tooltip
The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
Top Bar
Visibility Classes
You are on a small screen or larger.
You are on a medium screen or larger.
You are on a large screen or larger.
You are definitely on a small screen.
You are definitely on a medium screen.
You are definitely on a large screen.
You are not on a medium screen or larger.
You are not on a large screen or larger.
You are definitely not on a small screen.
You are definitely not on a medium screen.
You are definitely not on a large screen.
Can't touch this.
Can sort of touch this.
You are in landscape orientation.
You are in portrait orientation.
This text can only be read by a screen reader.
There's a line of text above this one, you just can't see it.
This text can be seen, but won't be read by a screen reader.
Skip to Content