The styling guide gives you a blueprint of this theme’s default post and page styles. The style guide is also an amazing reference for suggested typographic treatment and styling your content.

Typography Treatment

Our theme pays special attention to typography and type treatment, which make your content across all devices looking posh and sharp.

HEADING ONE

HEADING TWO

HEADING THREE

HEADING FOUR

HEADING FIVE

HEADING SIX

Mixed list items styling

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

.intro {
	border-bottom: solid 1px #eee;
	border-top: solid 1px #eee;
	text-transform: uppercase;
	display: inline-block;
	letter-spacing: 1px;
	text-align: center;
	font-size: 16px;
	padding: 20px 0;
	color: #aaa;
	margin: 0;
}

Blockquote styling

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

There are no simple “right” answers for most Web design questions, at least not for the important ones. What works is good, integrated design that fills a need — carefully thought out, well executed, and tested.” – Steve Krug

Table styling

Table is a collection of related data held in a structured format, it consists of fields (columns), and rows.

Year	Ship	Tonnage	Length	Country
2002	MS Navigator of the Seas	139,570	1,021 ft (311 m)	Bahamas
2004	RMS Queen Mary 2	148,528	1,132 ft (345 m)	United Kingdom
2006	MS Freedom of the Seas	154,407	1,112 ft (339 m)	Bahamas
2009	MS Oasis of the Seas	225,282	1,186 ft (361 m)	Bahamas
2016	MS Harmony of the Seas	227,700	1,194 ft (364 m)	Bahamas

Text highlighting

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

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

Spoiler alert

A spoiler is an element of a disseminated summary or description of any piece of fiction that reveals any plot elements which threaten to give away important details concerning the turn of events of a dramatic episode. Typically, the details of the conclusion of the plot, including the ending, are especially regarded as spoiler material.

<span class="spoiler">This text will be a spoiler.</span>

Image styling

Gallery styling

Make sure you are linking to the Media file when creating gallery, not the attachment page.

Right Aligned Image
Images 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.

Bridge Left Aligned Image
The 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.

Pull quote styling

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 WILL BE 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.

Publishing is the process of production and dissemination of literature, music, or information — the activity of making information available to the general public. In some cases, authors may be their own publishers, meaning: originators and developers of content also provide media to deliver and display the content for the same. Also, the word publisher can refer to the individual who leads a publishing company or imprint or to a person who owns a magazine.

Intro text

The introduction typically describes the scope of the document and gives the brief explanation or summary of the document. It may also explain certain elements that are important to the essay if explanations are not part of the main text. The readers can have an idea about the following text before they actually start reading it.

Ths is an example of an intro text, it can be not only in the beginning of the page or post, but used to underscore some important part of the text inside an article.

<span class="intro">This will be an intro to a post</span>

Styling guide