Skip to content
Mon 11:00am-9pm | Tues-Thurs 11:00am-10pm | Fri-Sat 11-11pm | Sunday 11am-9pm (727) 623-9823

Typography

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


Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Blockquote

The blockquote is used to indicate the quotation of a large section of text from another source.

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.

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

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;
}

Table Styles

BeatleInstrumentSong
John LennonGuitarA Day In the Life
George HarrisonGuitarOld Brown Shoe
Paul McCartneyBassHelter Skelter
Ringo StarrDrumsDon’t Pass Me By

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 text will be highlighted.</span>

Lead Text Style

This is an lead text title! When you apply a class of ‘lead’ to your content, Longshore will display the text as you see here. It’s handy for introducing a page or post with a brief description.

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

<p class="lead">This text will introduce the page.</p>

Pull Quote 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>

This pull quote is just hanging out on the right side of the post.

A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.

Placement of a pull quote on a page may be defined in a publication’s or website’s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.

And this pull quote is pulling text to the left, like a boss.

Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication’s house style pull quotes may be abbreviated for space and/or paraphrased for clarity, with or without indication. A quotation can also refer to the repeated use of units of any other form of expression.

Leave a Comment

You must be logged in to post a comment.