typography

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

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

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.


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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.


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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.


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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.


Image with Caption

This is caption demo

This is the caption

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.


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>

Links and Buttons

This is the normal link color.
Link 1
Link 2
Link 3

This is the normal button color.
Default ButtonBlack ButtonBlue Button