Style Guide

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


Typography Treatment

Merch pays special attention to typography and type treatment, which really underscores and compliments your content across all devices.

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

.entry-content table {
	width: 100%;
	th {
	    text-align: left;
	    padding: 1em;
            background-color: $summer-dress;
	}
	td {
	    padding: 1em;
	}
	tr.even {
	    background-color: scale-color($summer-dress, $lightness: 60%);
	}
}

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

Tap
Centered Image with Caption

 

Right Alignment

DeathtoStock_Nashville8Diam nostra arcu quia! Wisi reiciendis velit, ullamcorper! Proin? Incidunt sunt architecto, eu ea, at proin animi? Quo! A minim! Lorem consectetuer quidem? Iusto, similique. Illum dolorem consequat at blandit! Veniam, itaque maecenas duis, mollit quaerat! A laoreet ex exercitationem luctus, ea, quo distinctio justo? Optio dolorum, qui tempus! Faucibus.

Left Alignment

DeathtoStock_Nashville3Diam nostra arcu quia! Wisi reiciendis velit, ullamcorper! Proin? Incidunt sunt architecto, eu ea, at proin animi? Quo! A minim! Lorem consectetuer quidem? Iusto, similique. Illum dolorem consequat at blandit! Veniam, itaque maecenas duis, mollit quaerat! A laoreet ex exercitationem luctus, ea, quo distinctio justo? Optio dolorum, qui tempus! Faucibus.