Style Guide

The style guide provides you with a blueprint of Verb’s default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.


Right Aligned Image

food-salad-healthy-vegetables

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.


Left Aligned Image

tee

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.


Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Blockquote

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.

Those of us that had been up all night were in no mood for coffee and donuts, we wanted strong drink. We were, after all, the absolute cream of the national sporting press.

Typography Styles

To use the pull quote, you simply need to add a class of pull-right or pull-left to your content. This can be done in the Text editor view. See an example below:

<span class="pull-right">Pull this text right.</span>

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.

Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu.

Mauris mollis elementum fermentum. Donec id felis vitae arcu accumsan consequat. Praesent nibh urna, viverra vel volutpat vel, mollis eu magna. Praesent libero magna, volutpat vel ultrices malesuada, rutrum vel elit. In luctus mi id magna tincidunt aliquet. Sed eu tortor nisl, eu viverra mauris. Cras pellentesque ultricies volutpat.


Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. Lorem ipsum dolor sit amet, an vis accusata oportere concludaturque. Pro ex iisque diceret pertinax, ex elaboraret suscipiantur complectitur pri. Suscipit efficiendi mei cu. Nonumy integre blandit ius ei, mei magna habeo in, choro detracto ei eam. Ea mei sint elit mandamus. Ipsum novum noster cu usu. You can easily add a dropcap to any paragraph by adding the class dropcap as seen below:

<span class="dropcap">T</span>his is how you add a dropcap.

Highlight Text Style

To use the highlight, you simply need to add a span with the class highlight. This can be done in the Text editor view. See an example below:

<span class="highlight">This will be highlighted.</span>

Table Styles

Beatle Instrument Song
John Lennon Guitar A Day In the Life
George Harrison Guitar Old Brown Shoe
Paul McCartney Bass Helter Skelter
Ringo Starr Drums Don’t Pass Me By

Code Formatting

pre {
    position: relative;
    background: #f7f7f7;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    padding: 1.6em;
    overflow: auto;
    max-width: 100%;
    tab-size: 4;
}

Mixed List Items

  • Unordered list item one
  • Unordered list item two
    1. Ordered list item one
    2. Ordered list item two
      • Unordered list item one
      • Unordered list item two
        1. Ordered list item one
        2. Ordered list item two
        3. Ordered list item three
      • Unordered list item three
    3. Ordered list item three
  • Unordered list item three