# Typography and Style

Source: https://essential.spyr.me/style/
Published: 2017-11-08

---

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](https://fontawesome.com/v4.7.0/cheatsheet/). 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

1. Ordered list item #1
2. Ordered list item #2
3. 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](https://fontawesome.com/v4.7.0/cheatsheet/). 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

![Cat](https://tru.spyr.me/wp-content/uploads/sites/2/2013/02/Cat-300x258.jpg)\
 Original

![Cat](https://tru.spyr.me/wp-content/uploads/sites/2/2013/02/Cat-300x258.jpg)\
 Black & White

###### Code

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

### Sepia

![Cat](https://tru.spyr.me/wp-content/uploads/sites/2/2013/02/Cat-300x258.jpg)\
 Original

![Cat](https://tru.spyr.me/wp-content/uploads/sites/2/2013/02/Cat-300x258.jpg)\
 Sepia

###### Code

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

### Blur

![Cat](https://tru.spyr.me/wp-content/uploads/sites/2/2013/02/Cat-300x258.jpg)\
 Original

![Cat](https://tru.spyr.me/wp-content/uploads/sites/2/2013/02/Cat-300x258.jpg)\
 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.

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

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.

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>
```