Style Guide

Style Guide

Headings

H1

H2

H3

H4

H5
H6
  
  # H1
  ## H2
  ### H3
  #### H4
  ##### H5
  ###### H6
  

NOTE: Any headers H4 or smaller will not auto-generate an anchor that’s added to the table of contents.

Permanant Anchors

Use the following syntax to create permanent anchors:

### New Business MRR Optimizations {#new-biz-optimizations}

The anchor will forever be new-biz-optimizations


Images

Add any images you want to the img directory (ex. charlie.png).

  {% image /img/charlie.png %}

Images with captions

Caption any image you want by using </figcaption>

Mascot
  <figure>
  {% image /img/charlie.png %}
  <figcaption>Mascot</figcaption>
  </figure>

Table of Contents

To get a table of contents all you need to do is set toc:true in your post’s Front Matter. Then any heading will be automatically set as a section for the Table of Contents.


Code

Uses highlight.js

Snippet looks like:

  
  class Foo
    def foo
      puts 'foo'
    end
  end
  

Html to enter:

<pre>
  <code class="ruby">
  class Foo
    def foo
      puts 'foo'
    end
  end
  </code>
</pre>

Lists

Ordered (You don’t need to change numbers)

  1. First
  2. Second
  3. Third
    • a
    • b
    • c
  4. Fourth
  
  1. First
  1. Second
  1. Third
    - a
    - b
    - c
  1. Fourth
  

Unordered

  • First
  • Second
  • Third
    • a
    • b
      • First
      • Second
      • Third
    • c
  • Fourth
  
  - First
  - Second
  - Third
    - a
    - b
      - First
      - Second
      - Third
    - c
  - Fourth
  

Buttons

<button type="button" class="btn btn-w-m btn-default">Default</button>
<button type="button" class="btn btn-w-m btn-primary">Primary</button>
<button type="button" class="btn btn-w-m btn-success">Success</button>
<button type="button" class="btn btn-w-m btn-info">Info</button>
<button type="button" class="btn btn-w-m btn-warning">Warning</button>
<button type="button" class="btn btn-w-m btn-danger">Danger</button>
<button type="button" class="btn btn-w-m btn-link">Link</button>

Alerts

A wonderful serenity has taken possession. Alert Link.
A wonderful serenity has taken possession. Alert Link.
A wonderful serenity has taken possession. Alert Link.
A wonderful serenity has taken possession. Alert Link.
<div class="alert alert-success">
  A wonderful serenity has taken possession. <a class="alert-link" href="#">Alert Link</a>.
</div>
<div class="alert alert-info">
  A wonderful serenity has taken possession. <a class="alert-link" href="#">Alert Link</a>.
</div>
<div class="alert alert-warning">
  A wonderful serenity has taken possession. <a class="alert-link" href="#">Alert Link</a>.
</div>
<div class="alert alert-danger">
  A wonderful serenity has taken possession. <a class="alert-link" href="#">Alert Link</a>.
</div>

Wells

The quick, brown fox jumps over a lazy dog.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.

The quick, brown fox jumps over a lazy dog.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.

The quick, brown fox jumps over a lazy dog.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.
<div class="well">
  <h3>
    The quick, brown fox jumps over a lazy dog.
  </h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.
</div>

<div class="well well-lg">
  <h3>
    The quick, brown fox jumps over a lazy dog.
  </h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.
</div>

<div class="well well-sm">
  <h3>
    The quick, brown fox jumps over a lazy dog.
  </h3>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.
</div>

Tables

Column 1 Column 2 Column 3 Column 4
1st Thing 2nd Thing 3rd Thing 4th Thing
1st Thing 2nd Thing 3rd Thing 4th Thing
1st Thing 2nd Thing 3rd Thing 4th Thing
1st Thing 2nd Thing 3rd Thing 4th Thing
1st Thing 2nd Thing 3rd Thing 4th Thing
1st Thing 2nd Thing 3rd Thing 4th Thing
  
  {:.table.table-bordered}
  | Column 1 | Column 2 | Column 3 | Column 4 |
  |----------|----------|----------|----------|
  | 1st Thing | 2nd Thing | 3rd Thing | 4th Thing |
  | 1st Thing | 2nd Thing | 3rd Thing | 4th Thing |
  | 1st Thing | 2nd Thing | 3rd Thing | 4th Thing |
  | 1st Thing | 2nd Thing | 3rd Thing | 4th Thing |
  | 1st Thing | 2nd Thing | 3rd Thing | 4th Thing |
  | 1st Thing | 2nd Thing | 3rd Thing | 4th Thing |
  

Images in the middle of a list

  1. Recurring Period and Price: Set the billing cycle (weekly, monthly, annually, or custom). You can define any billing cycle down to the day.
    • Set x to your desired price
    • Set y to your desired duration in months or days

  1. Trial Period: Define any type of trial (free or paid)
  
  1. **Recurring Period and Price**: Set the billing cycle (weekly, monthly, annually, or custom). You can define any billing cycle down to the day.
    * Set x to your desired price
    * Set y to your desired duration in months or days
      
        <a href="/img/products/creating_a_product/product1.png" class="swipebox">
          <img class="img-responsive" src="/img/products/creating_a_product/product1.png">
        </a>
      
1. **Trial Period**: Define any type of trial (free or paid)

Video Embed

To embed a video, please use the following:

<section class="video widescreen">
    <!-- Embed code goes here -->
</section>