Style Guide

The style guide provides you with a blueprint of March’s 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. It can be as long or as short as you’d like!

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

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

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>

Image Alignment

 

1-WTC-architecture-city-3361


Right Aligned Image

1-WTC-architecture-city-3361Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue or hologram. They may be captured by optical devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.


Left Aligned Image

1-WTC-architecture-city-3361The word image is also used in the broader sense of any two-dimensional figure such as a map, a graph, a pie chart, or an abstract painting. In this wider sense, images can also be rendered manually, such as by drawing, painting, carving, rendered automatically by printing or computer graphics technology, or developed by a combination of methods.


Pull Quote Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu ipsum blandit, congue metus gravida, pretium ipsum. Pellentesque vitae tortor aliquam, iaculis est a, tincidunt ligula. Vivamus eu lorem massa. Vivamus id neque facilisis, congue turpis eget, ultrices sapien. Fusce commodo, dui eget iaculis hendrerit, risus nibh commodo est, in semper est velit sed magna. Donec eget dictum metus, nec lobortis sem. Vestibulum eu massa non purus condimentum luctus a eu diam. Sed pretium aliquet tempus. Praesent lacinia ligula in est ultricies, vitae tempus enim sodales. Ut id libero in purus tristique mollis elementum sed lectus.

On a bigger monitor, this quote floats into the margin. Making a pull quote is easy. Just add a css class alignleft to a blockquote

Vestibulum dapibus nisl sit amet felis iaculis tincidunt. Vestibulum luctus, quam malesuada aliquet venenatis, velit ligula luctus urna, at placerat dolor elit non eros. Morbi eleifend eu dui ut suscipit. Nulla vitae tincidunt ipsum. Mauris sit amet velit eget urna scelerisque lobortis id nec augue. Suspendisse sodales enim at nibh malesuada hendrerit. Nam eu tellus in dui hendrerit placerat eu vel dolor. Donec euismod nunc sapien, et convallis justo mollis sed. In est dui, facilisis a ullamcorper quis, pellentesque nec nibh. Proin sit amet libero sit amet sapien condimentum volutpat. Etiam porta nibh massa, in pretium leo lobortis nec.

On a bigger monitor, this quote floats into the margin. Making a pull quote is easy. Just add a css class alignright to a blockquote

Morbi consequat, neque ut egestas lacinia, ipsum lacus faucibus neque, nec eleifend sem sem ut dolor. Phasellus lobortis eros nec lectus bibendum viverra. Fusce non egestas massa, euismod vulputate felis. In neque libero, egestas eu nibh sed, rhoncus tincidunt orci. Fusce a ante et nisi varius facilisis vitae a elit. Proin dignissim placerat ligula, non sagittis mauris. Vestibulum mauris nibh, viverra a accumsan vel, lobortis porttitor risus. Vivamus lacus mi, pulvinar nec magna et, cursus commodo metus


Image Gallery w/ Jetpack Carousel

This is a traditional WordPress thumbnail gallery available in all WordPress sites. To add this gallery, simply click Add Media in your post editor and click Create Gallery. In the Gallery Settings area, choose Thumbnail Grid as the type of gallery.

This slideshow requires JavaScript.


Jetpack Mosaic Image Gallery

This awesome mosaic thumbnail gallery is provided by the Jetpack plugin. To add this gallery you will need Jetpack installed. Once installed, simply click Add Media in your post editor and click Create Gallery. In the Gallery Settings area, choose Tiled Mosaic as the type of gallery.