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
- Ordered list item one
- Ordered list item two
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Ordered list item three
- Unordered list item three
- 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 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 ButtonGrey Button
