Colors
Headings & default text
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Stand Alone Quotes
Quote
All heading classes
H1 bob-heading--main
H2 bob-heading--inner
H2 bob-heading--inner--black
H3 bob-heading--subtitle
H3 bob-heading--subtitle--center
H3 bob-heading--subtitle--center--low
H3 bob-heading--subtitle--white
H4 bob-heading--widget
H4 bob-heading--widget-2
H5 bob-heading--element
H5 bob-heading--element--semibold
H5 bob-heading--element--white
H5 bob-heading--subtitle-2
H5 bob-heading--subtitle-2--white--center
H5 bob-heading--subtitle-2--white-93
H5 bob-heading--subtitle-3
H6 bob-text--action
H6 bob-text--footer
Body
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu
Body text - small
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu
Various in-paragraph elements
This is a paragraph. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like
emphasis, strong, and small but there are many others as well.
Hover the following text for abbreviation tag: abbr. Similarly, you can
use acronym tag like this: ftw. You can define deleted
text which often gets replaced with inserted text.
You can also use keyboard text, which sometimes is styled similarly to the
<code> or samp tags. Even more specifically, there is a tag just for
variables. Not to be mistaken with blockquotes
below, the quote tag lets you denote something as quoted text
. Lastly don't forget the sub
(H2O) and sup (E = MC2) tags.
Special text elements
nothing here
Applied text styles
nothing here
Footer styles
Links
Section dividers
Left
class="bob-border-title bob-border-title--left"
Center
class="bob-border-title bob-border-title--center"
Right
class="bob-border-title bob-border-title--right"
Buttons
Buttons using 'button' and anchor tags
class="bob-button"
Inputs type 'button', 'submit' and 'reset'
Default, Hover, Focus and Disabled state
Other elements
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia Excepteur sint occaecat cupidatat. in culpa qui officia Excepteur sint.
Name, Title
| Person | Number | Third Column |
|---|---|---|
| Someone Lastname | 900 | Nullam quis risus eget urna mollis ornare vel eu leo. |
| Person Name | 1200 | Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. |
| Another Person | 1500 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. |
| Last One | 2800 | Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. |
- Definition List Title
- Definition list division.
- Kitchen Sink
- Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
- aside
- Defines content aside from the page content
- blockquote
- Defines a section that is quoted from another source
- Unordered List item one
- Nested list item
- Level 3, item one
- Level 3, item two
- Level 3, item three
- Level 3, item four
- List item two
- List item three
- List item four
- Nested list item
- List item two
- List item three
- List item four
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Cupertino, CA 95014
United States
pre {
display: block;
padding: 7px;
background-color: #F5F5F5;
border: 1px solid #E1E1E8;
border-radius: 3px;
white-space: pre-wrap;
word-break: break-all;
font-family: Menlo, Monaco;
line-height: 160%;
}