• 
  • Practitioners
  • Health Coaches
  • Clinic
  • Store
  • Contact
  • 🔎 Search
  • Login

Chris Kresser

Let's take back your health — Starting Now.

  • About
  • Functional Medicine
  • Health Coaching
  • Reverse Chronic Illness
  • Health Solutions Library

Style Guide

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

  • List Item
  • List Item
  • List Item
  1. List Item
  2. List Item
  3. List Item

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.

This button has an arrow


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

Table Heading Table Heading Table Heading
Table Data Table Data Table Data

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)

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

Let’s take back
your health—
Starting Now!

Chris Kesser

Get FREE, personalized tips on creating the health you deserve and a life you love.

I hate spam too. Your email is safe with me. By signing up, you agree to our privacy policy.

Chris’ New Book

The Paleo Cure

Learn the 3 powerful steps for creating your own "Personal Paleo Code." Become the lean, energetic person you're meant to be.

Learn More

img-14four-sidebar

Get more energy, better sleep, a happier tummy, and a brighter mood with these 4 simple strategies.

Learn More

Free EBooks

  • All About Sweeteners
  • Food Additives
  • Effortless Paleo Weight Loss
  • B12 Deficiency
  • Gut Health
  • Heartburn/GERD
  • Nutrition for Healthy Skin
  • Paleo Diet Challenges & Solutions
  • The Diet-Heart Myth
  • Thyroid Disorders

Chris Kresser Logo


  • Support
  • Privacy Policy
  • Terms of Service

Learn

  • Articles
  • eBooks
  • Seminars
  • Podcast
  • Programs
  • Books

About

  • About Chris
  • Media
  • Clinic
  • Contact
  • Meet Our Team
  • We're Hiring

Connect

  • Facebook
  • Twitter
  • Pinterest
  • Google+
  • YouTube
  • RSS

© 2023 Chris Kresser. All Rights Reserved. Designed by Pautler Design

  • About
  • Functional Medicine
  • Health Coaching
  • Reverse Chronic Illness
  • Health Solutions Library
  • Practitioners
  • Health Coaches
  • Clinic
  • Store
  • Contact