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. Let’s see it on example – Miles Davis Discography

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.

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

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, images can also be rendered manually.

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.

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, just like that.

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.

This 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>

Dropcaps

Dropcap is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning. An initial often is several lines in height and in older books or manuscripts, sometimes ornately decorated.

In illuminated manuscripts, initials with images inside them, such as those illustrated here, are known as historiated initials. They were an invention of the Insular art of the British Isles in the eighth century. Initials containing, typically, plant-form spirals with small figures of animals or humans that do not represent a specific person or scene are known as “inhabited” initials. Certain important initials, such as the B of Beatus vir… at the opening of Psalm 1 at the start of a vulgate Latin psalter, could occupy a whole page of a manuscript.

These specific initials, in an illuminated manuscript, also were called Initiums.

<span class="dropcaps">F</span>irst letter will be a dropcaps letter

Notices

Notice: We sent our field reporters to the coast with a few cameras, a little cash and a single map to see if they could seek out an adventure.

Alert! We sent our field reporters to the coast with a few cameras, a little cash and a single map to see if they could seek out an adventure.

Success! We sent our field reporters to the coast with a few cameras, a little cash and a single map to see if they could seek out an adventure.

To add this message simply add class to the span element alert, notice or success. Example:

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

Grid

Very simple responsive grid up to 5 columns for best user experience.

<div class="grid">
   <div>
      Column number one
   </div>
   <div>
      Column number two
   </div>
   <div>
      Column number three
   </div>
</div>

Forms

Button