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
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 3
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 4
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 5
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 6
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 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
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)
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 src="YOURIMAGEURL" alt="YOURIMAGETITLE" width="YOURIMAGEWIDTH" height="YOURIMAGEHEIGHT" class="bw" />
Sepia

Original

Sepia
Code
<img src="YOURIMAGEURL" alt="YOURIMAGETITLE" width="YOURIMAGEWIDTH" height="YOURIMAGEHEIGHT" class="sepia" />
Blur

Original

Blur
Code
<img src="YOURIMAGEURL" alt="YOURIMAGETITLE" width="YOURIMAGEWIDTH" height="YOURIMAGEHEIGHT" class="blur" />
Note
This is a Note
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. Donec tempor nisi diam, non venenatis libero pellentesque in.
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
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. Donec tempor nisi diam, non venenatis libero pellentesque in.
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>