Colors

Primary / Aqua
Secondary / White
Charcoal

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

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

Seamless integration
class="bob-border-title bob-border-title--left"

Center

Seamless integration
class="bob-border-title bob-border-title--center"

Right

Seamless integration
class="bob-border-title bob-border-title--right"

Buttons

Buttons using 'button' and anchor tags

Discover more
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

Tables can have captions now.
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
  • List item two
  • List item three
  • List item four

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

1 Infinite Loop
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%;
      }
                      

Fig1. A picture from picsum.photos

I am legend

I am legend

I am also legend Check me out Or check me out