Heading 1 (h1) – 34px

Paragraph Text. 18pt Proxima Nova over 29pt leading. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. This is a link. It is bolded & blue.

Heading 2 (h2) – 30px

Paragraph Text. 18pt Proxima Nova over 29pt leading. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. This is a link. It is bolded & blue.

Heading 3 (h3) – 26px

Paragraph Text. 18pt Proxima Nova over 29pt leading. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. This is a link. It is bolded & blue.

Heading 4 (h4) – 22px

Paragraph Text. 18pt Proxima Nova over 29pt leading. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. This is a link. It is bolded & blue.

Heading 5 (h5) – 18px

Paragraph Text. 18pt Proxima Nova over 29pt leading. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. This is a link. It is bolded & blue.

Alternative Headings

Heading 1 (h1) – 34px

Heading 2 (h2) – 26px

Heading 3 (h3) – 20px

Heading 4 (h4) – 16px

Heading 5 (h5) – 12px

List Items

Buttons

Primary Button Secondary Button Category Link Comment Reply

Large Button Video Button

Full Width Button

To add an arrow to the right of a button, add the class “has-arrow”. To add it to the left, add the class ” has-arrow arrow-left”. Make sure there’s enough space for the arrow as it will overlap any content in the way. The arrow is white so make sure it is on a dark background.

Quotes

Blockquotes use the normal <blockquote> html element, accessible in the visual editor.

This is a blockquote. It takes up the entire width of the article. Blockquotes should be kept short.

Pull Quotes are created using <blockquote class=”pull”>, which means you’ll need to switch to HTML mode. Alternatively, you could install the Div Shortcode plugin and use [div class=”pull-quote”] … [end-div].

Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a pull quote. It only takes half the width of the article. Keep these short too.

Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Tweet quotes are created using <blockquote class=”tweet”>, which means you’ll need to switch to HTML mode. Alternatively, you could install the Div Shortcode plugin and use [div class=”tweet-quote”] … [end-div].

This is a tweet this blockquote. Whatever is in this blockquote would get tweeted if clicked.

Tables

Table styling from Boostrap. Add a class of “table” to your table for it to be styled correctly. This is so it doesn’t interfere with other plugins’ use of tables. The table below is using the following classes: <table class=”table table-bordered”>

Columns

This theme uses column classes to break content into multiple columns. You can switch to HTML mode and type in the HTML div’s, or use the Div Shortcode plugin to do it with shortcodes. The benefit of using HTML is that, when you’re back in Visual mode, the editor is broken into the columns you specified.

Available column classes: one-half, one-third, two-thirds, one-fourth, two-fourths, three-fourths, one-fifth, two-fifths, three-fifths, four-fifths, one-sixth, two-sixths, three-sixths, four-sixths, five-sixths

The first div in a row of columns should also have a class of “first”. So if you are doing two columns (example below), the first one is <div class=”one-half first”> and the second one is <div class=”one-half”>

It’s also recommended that you wrap all the columns in <div class=”clearfix”> or <div class=”columns”> (the latter adds additional padding, used below)