This page will give you an overview of this theme’s typography and styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam anchor text. Integer volutpat mattis venenatis. Sed italicized text tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. Bolded text, non venenatis libero pellentesque in.

Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. Donec tempor nisi diam, non venenatis libero pellentesque in. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading Styles

The following heading styles can be used with any heading size (H1-H6).

Line After

Code

<h3 class="line-after">Line After</h3>

Line Before

Code

<h3 class="line-before">Line Before</h3>

Line Before and After

Code

<h3 class="line-before line-after">Line Before and After</h3>

Anchors

Default
Primary Accent
Secondary Accent

Code

<a href="#">Default</a>

<a href="#" class="accent-1">Primary Accent</a>

<a href="#" class="accent-2">Secondary Accent</a>

Text Highlights

Use the following classes to highlight specific pieces of text.

Highlighter

Call out some text with the highlighter.
Call out some text with the Primary Accent highlighter.
Call out some text with the Secondary Accent highlighter.

Code

Call out <span class="highlighter">some text</span> with the highlighter.

Call out <span class="highlighter-accent-1">some text</span> with the Primary Accent highlighter.

Call out <span class="highlighter-accent-2">some text</span> with the Secondary Accent highlighter.

Accent Text

Call out some text by using the Primary Accent color.
Call out some text by using the Secondary Accent color.

Code

Call out <span class="accent-1">some text</span> with the Primary Accent color.

Call out <span class="accent-2">some text</span> with the Secondary Accent color.

Unordered List

Unordered list item #1
Unordered list item #2
Unordered list item #3

Code

<ul>
<li>Unordered list item #1</li>
<li>Unordered list item #2</li>
<li>Unordered list item #3</li>
</ul>

Icon List

The Icon List works with any FontAwesome icon. Replace fa-check-circle-o with any icon of your choice.

Pork belly post-ironic pwriter artisan VHS, humblebrag meggings.
Woke try-hard everyday carry kinfolk, quinoa hexagon celiac.
Plaid hot chicken gentrify messenger bag live-edge XOXO.
Small batch viral drinking vinegar snackwave pork belly iPhone.
Lyft +1 disrupt, coloring book retro.

Code

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-circle-o"></i>Pork belly post-ironic pwriter artisan VHS, humblebrag meggings.</li>
<li><a href="#"><i class="fa-li fa fa-check-circle-o"></i>Woke try-hard everyday carry kinfolk, quinoa hexagon celiac.</a></li>
<li><i class="fa-li fa fa-check-circle-o"></i>Plaid hot chicken gentrify messenger bag live-edge XOXO.</li>
<li><i class="fa-li fa fa-check-circle-o"></i>Small batch viral drinking vinegar snackwave pork belly iPhone.</li>
<li><i class="fa-li fa fa-check-circle-o"></i>Lyft +1 disrupt, coloring book retro.</li>
</ul>

Ordered List

Ordered list item #1
Ordered list item #2
Ordered list item #3

Code

<ol>
<li>Ordered list item #1</li>
<li>Ordered list item #2</li>
<li>Ordered list item #3</li>
</ol>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis.

Code

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis.</p></blockquote>

Dividers

Default Divider

Code

<hr />

Narrow Divider

Code

<hr class="narrow" />

Code

<hr class="narrow left" />

Code

<hr class="narrow right" />

Buttons

This is the default button style, but you can also make adjustments on a per-button basis.

Default Primary Accent Secondary Accent

Code

<a href="#" class="button">Default</a>

<a href="#" class="button accent-1">Primary Accent</a>

<a href="#" class="button accent-2">Secondary Accent</a>

Squared Button

Default Primary Accent Secondary Accent

Code

<a href="#" class="button squared">Default</a>

<a href="#" class="button squared accent-1">Primary Accent</a>

<a href="#" class="button squared accent-2">Secondary Accent</a>

Rounded Button

Default Primary Accent Secondary Accent

Code

<a href="#" class="button rounded">Default</a>

<a href="#" class="button rounded accent-1">Primary Accent</a>

<a href="#" class="button rounded accent-2">Secondary Accent</a>

Rounded-Square Button

Default Primary Accent Secondary Accent

Code

<a href="#" class="button rounded-square">Default</a>

<a href="#" class="button rounded-square accent-1">Primary Accent</a>

<a href="#" class="button rounded-square accent-2">Secondary Accent</a>

Icon Button

The Icon Button works with any FontAwesome icon. Replace fa-comments-o with any icon of your choice.

Default Primary Accent Secondary Accent

Code

<a href="#" class="button icon-button"><i class="fa fa-comments-o"></i> Default</a>

<a href="#" class="button icon-button accent-1"><i class="fa fa-comments-o"></i> Primary Accent</a>

<a href="#" class="button icon-button accent-2"><i class="fa fa-comments-o"></i> Secondary Accent</a>

Round Button

Default Primary Accent Secondary Accent

Code

<a href="#" class="button round"><span class="button-text">Default</span></a>

<a href="#" class="button round accent-1"><span class="button-text">Primary Accent</span></a>

<a href="#" class="button round accent-2"><span class="button-text">Secondary Accent</span></a>

Round Button (Large)

Default
Primary Accent Secondary Accent

Code

<a href="#" class="button round-large"><span class="button-text">Default</span></a>

<a href="#" class="button round-large accent-1"><span class="button-text">Primary Accent</span></a>

<a href="#" class="button round-large accent-2"><span class="button-text">Secondary Accent</span></a>

Image Filters

Black & White

Original

Black & White

Code

<img decoding="async" src="YOURIMAGEURL" alt="YOURIMAGETITLE" width="YOURIMAGEWIDTH" height="YOURIMAGEHEIGHT" class="bw" />

Sepia

Original

Sepia

Code

<img decoding="async" src="YOURIMAGEURL" alt="YOURIMAGETITLE" width="YOURIMAGEWIDTH" height="YOURIMAGEHEIGHT" class="sepia" />

Blur

Original

Blur

Code

<img decoding="async" src="YOURIMAGEURL" alt="YOURIMAGETITLE" width="YOURIMAGEWIDTH" height="YOURIMAGEHEIGHT" class="blur" />

Note

This is a Note

Button

Code

<div class="note">
<h4>This is a Note</h4>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. Donec tempor nisi diam, non venenatis libero pellentesque in.</p>
<p><a href="#" class="button">Button</a>
</div>

This is a Note

Button

Code

<div class="note bg-2">
<h4>This is a Note</h4>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nam blandit ullamcorper porttitor. Integer volutpat mattis venenatis. Sed varius ac justo nec tempus. Cras ullamcorper velit ut sapien congue, id tristique nunc vestibulum. Donec tempor nisi diam, non venenatis libero pellentesque in.</p>
<p><a href="#" class="button">Button</a>
</div>

Forms

<form>
<label>Textbox</label> <input type="text" placeholder="textbox" /></p>
<p><label>Email</label> <input type="email" placeholder="email" /></p>
<p><label>URL</label> <input type="url" placeholder="url" /></p>
<p><label>Search</label> <input type="search" placeholder="search" /></p>
<p><label>Password</label> <input type="password" placeholder="password" /></p>
<p><input type="button" value="Button" /> <input type="submit" value="Submit" /></p>
<p><input type="checkbox" value="checkbox" id="checkbox_1" /> <label for="checkbox_1">Checkbox #1</label>

<input type="checkbox" value="checkbox" id="checkbox_2" /> <label for="checkbox_2">Checkbox #2</label>

<input type="checkbox" value="checkbox" id="checkbox_3" /> <label for="checkbox_3">Checkbox #3</label></p>
<p><input type="radio" value="radio" name="radios" id="radio_1" /> <label for="radio_1">Radio #1</label>

<input type="radio" value="radio" name="radios" id="radio_2" /> <label for="radio_2">Radio #2</label>

<input type="radio" value="radio" name="radios" id="radio_3" /> <label for="radio_3">Radio #3</label>

</form>

Inline Form Elements

Inline form elements are configured using the column shortcode.

Code

<form>
[column width="four-fifths" first="true"]<input type="text" placeholder="textbox" />[/column]
[column width="one-fifth" last="true"]<input type="submit" value="Submit" />[/column]
</form>

Code

<form>
[column width="two-fifths" first="true"]<input type="text" placeholder="text" />[/column]
[column width="two-fifths"]<input type="email" placeholder="email" />[/column]
[column width="one-fifth" last="true"]<input type="submit" value="Submit" />[/column]
</form>

Code

<form>
[column width="one-half" first="true"]<label for="textbox">Text</label>

<input type="text" placeholder="text" id="textbox" />[/column]
[column width="one-half" last="true"]
<label for="email">Email</label>

<input type="email" placeholder="email" id="email" />[/column]
<input type="submit" value="Submit" class="full-width" />

</form>