Special attention to the typography of this theme ensures a great user experience. This page was created to be a useful reference when using the theme and creating your posts and pages.

This is an example of paragraph text. We have strong text, regular text and italic text, and here is a link.. The environment, after all, is where we all meet, where we all where we all have a mutual interest. It is one thing that all of us share. It is not only a mirror of ourselves, but a focusing lens on what we can become.

Example of H1 Title

Example of H2 Title

Example of H3 Title

Example of H4 Title

Example of H5 Title

Example of H6 Title

Highlight Your Text

This is highlighted text.

<span class="highlight">This is highlighted text.</span>

Blockquote

“Earth provides enough to satisfy every man’s needs, but not every man’s greed.”

A N Other

    <blockquote>"Earth provides enough to satisfy every man's needs, but not every man's greed."</blockquote>
    <cite>A N Other</cite>

Wide Format Images

Wide format, or outside the grid, images are available in pages and posts easily. Ensure you upload a large image, with a minimum width of 1200px preferably, and add to your post as full width image and no alignment. Then wrap the image in a div called ‘breakout’ – like this:

<div class="breakout"><img src="https://hack.consulting/wp-content/uploads/2015/02/rare_post6.jpg" alt="A caption can go here" width="1200" height="400" class="size-full wp-image-1189" /></div>

A caption can go here

Right Side Note

Here is a right side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.Side notes are a great way of calling out an interesting point in your paragragh. This theme allows both right and left side notes as shown below.

<span class="right_side_note">Here is a right side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</span>

Left Side Note

Here is a left side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.Side notes are a great way of calling out an interesting point in your paragragh. This theme allows both right and left side notes as shown below.

<span class="left_side_note">Here is a left side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</span>

Code Formatting

Use the pre tag whenever you wish to display code.

pre {
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 96%;
    overflow: auto;
    padding: 3%;
    position: relative;
    font-family: "Roboto", sans-serif;
}

Image Alignment

Centered Image

Left Image Alignment

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui.

Right Image Alignment

Mosaic Gallery via JetPack

This mosaic style gallery is produced by the free JetPack plugin. Linking images will display them larger once clicked in a lightbox.

Here is an example of a caption on a full width breakout image.

Centered Image with Caption

This is the caption area

Icon Button Examples

3 Min Theme Color Button 3 MinRed Button 3 MinGreen Button

<a class="icon-button blue ripple" href="#/"><span class="fa fa-clock-o">3 Min</span>Theme Color Button </a>
<a class="icon-button red ripple" href="#/"><span class="fa fa-clock-o">3 Min</span>Red Button</a>
<a class="icon-button green ripple" href="#/"><span class="fa fa-clock-o">3 Min</span>Green Button</a>

Regular Button Examples

Click Me Love Me Theme Color Button

<a class="button red ripple" href="#/">Click Me</a>
<a class="button green ripple" href="#/">Love Me</a>
<a class="button blue ripple" href="#/">Theme Color Button</a>

White Social Icon Button Examples

Pinterest Twitter Google Facebook Email

<a class="button white ripple" href="#/"><span class="fa fa-pinterest-p"></span>Pinterest</a>
<a class="button white ripple" href="#/"><span class="fa fa-twitter"></span>Twitter</a>
<a class="button white ripple" href="#/"><span class="fa fa-google-plus"></span>Google</a>
<a class="button white ripple" href="#/"><span class="fa fa-facebook"></span>Facebook</a>
<a class="button white ripple" href="#/"><span class="fa fa-envelope-o"></span>Email</a>

List Style ‘line’

Dashboard
My Account
Direct Messages

<ul>
<li class="line"><a href="#/">Dashboard</a></li>
<li class="line">My Account</li>
<li class="line"><a href="#/">Direct Messages</a></li>
</ul>

List Style no class

Chat Rooms
Settings
Logout

<ul>
<li><a href="#/">Chat Rooms</a></li>
<li>Settings</li>
<li><a href="#/">Logout</a></li>
</ul>

List Style ‘check’

Chat Rooms
Settings
Logout

<ul>
<li class="check"><a href="#/">Chat Rooms</a></li>
<li class="check">Settings</li>
<li class="check"><a href="#/">Logout</a><li>
</ul>

Ordered / unordered lists

Nam malesuada ornare dolor
Nam malesuada ornare dolor
Nam malesuada ornare dolor
Nam malesuada ornare dolor

Nam malesuada ornare dolor
Nam malesuada ornare dolor
Nam malesuada ornare dolor
Nam malesuada ornare dolor

Nested Lists

Nam malesuada ornare dolor
Nam malesuada ornare dolor
- Nam malesuada ornare dolor
- Nam malesuada ornare dolor
- Nam malesuada ornare dolor
- Nam malesuada ornare dolor
Nam malesuada ornare dolor
Nam malesuada ornare dolor

Nam malesuada ornare dolor
Nam malesuada ornare dolor
1. Nam malesuada ornare dolor
2. Nam malesuada ornare dolor
3. Nam malesuada ornare dolor
4. Nam malesuada ornare dolor
Nam malesuada ornare dolor
Nam malesuada ornare dolor

Mixed Lists

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

Table Styling

Theme	Author	Rating
SquareCode	Cr3ativ	5 Stars
Business Essentials 2	Cr3ativ	5 Stars
Swiss	Cr3ativ	5 Stars
Ink	Cr3ativ	5 Stars

Typography