Skip to content

Your Cart

0 items
CLOSE

Style Guide

Colors

Bootstrap Docs >

Brand Colors

Brand Primary
.bg-primary
$primary: #92D3CA;
Brand Primary
.bg-primary-light
$primary: 4FFFDD;
Brand Secondary
.bg-secondary
$secondary: #E45F00;
Brand Info
.bg-info
$info: #43A090;
Brand Success
.bg-success
$success: #739E11;
Brand Danger
.bg-danger
$danger: #B34700;
Brand Warning
.bg-warning
$warning: #C9C016;

Grays

Brand Light
.bg-light
Brand Dark
.bg-dark
Brand White
.bg-white
Brand Transparent
.bg-transparent

Typography

Bootstrap Docs >

PT Sans

.font-family-sans-serif
$font-family-sans-serif
$font-family-base
Used for:

Body Copy / Base Font Family

PT Sans Italics

.font-family-sans-serif .font-italic
Used for:

Italics font glyphs are loaded

Core Sans D 55 Bold

.headings-font-family
$headings-font-family
Used for:

Headings

Core Sans D 35 Regular

.subheadings-font-family
$subheadings-font-family
Used for:

Sub Headings
Links

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display Headings

Display 1

.display-1

Display 2

.display-2

Display 3

.display-3

Display 4

.display-4

Heading Light

h1.font-weight-light

Heading Light

h2.font-weight-light

Heading Light

h3.font-weight-light

Heading Extended

h4.heading-extended

Paragraph Styles

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.lead

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Links
Text Link

Duis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.

Font Sizing

Font size base 16px

$font-size-base

Font size extra small 12px

$font-size-xs

Font size small 14px

$font-size-sm

Font size large 18px

$font-size-lg

Font size extra large 24px

$font-size-xl

Reversed

use he class .reversed on the parent element to reverse a section

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display Headings

Display 1

.display-1

Display 2

.display-2

Display 3

.display-3

Display 4

.display-4

Heading Light

h1.font-weight-light

Heading Light

h2.font-weight-light

Heading Light

h3.font-weight-light

Heading Extended

h4.heading-extended

Paragraph Styles

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.lead

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-- Attribution
Links
Text Link

Duis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.

Font Sizing

Font size base 16px

$font-size-base

Font size extra small 12px

$font-size-xs

Font size small 14px

$font-size-sm

Font size large 18px

$font-size-lg

Font size extra large 24px

$font-size-xl

Iconography

Slate SVG icons >

Add SVG files to assets/SVG with 'icon-' prefix to access in Liquid templates

{ % include 'icon-cart' % }

BOTE Custom Icons
  • icon-cart
  • icon-close
  • icon-compare
  • icon-envelope
  • icon-map-marker
  • icon-question
  • icon-search
  • icon-size
  • icon-user
Payment icons
Social icons
General icons

Iconography

Slate SVG icons >

Add SVG files to assets/SVG with 'icon-' prefix to access in Liquid templates

{ % include 'icon-cart' % }

BOTE Custom Icons
  • icon-cart
  • icon-close
  • icon-compare
  • icon-envelope
  • icon-map-marker
  • icon-question
  • icon-search
  • icon-size
  • icon-user
Payment icons
Social icons
General icons

Images

Bootstrap Docs >

Simple Responsive Image

Responsive image
<img src="..." class="img-fluid" alt="Responsive image">

Picture Tag

Best used for art directing image sizes across breakpoints. Example: have a portrait image for portait devices and landscape images for landscape devices.

​ ... 

      ​<picture>
        <source media="(min-width: 1440px)" srcset="http://via.placeholder.com/2048x960" type="image/svg+xml">
        <source media="(min-width: 768px)" srcset="http://via.placeholder.com/1024x640" type="image/svg+xml">
        <source media="(min-width: 375px)" srcset="http://via.placeholder.com/640x960" type="image/svg+xml">
        <img src="http://via.placeholder.com/320x640" class="img-fluid" alt="...">
      </picture>

Slate Responsive Image


      { % include 'responsive-image' with
        image: featured_image,
        image_class: "css-class",
        wrapper_class: "wrapper-css-class",
        max_width: 700,
        max_height: 800
      % }

Slate Responsive Background Image


      <div class="lazyload" data-bgset="{ % include 'responsive-bg-image', image: article.image % }"></div>

Figures

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Forms

Use the .form-column class to wrap your <form>

We'll never share your email with anyone else. Form Text Link
Check Box styles
Radio styles



Sizing



Inline Form

Large
Normal
Small

Form Validation

Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Forms

Use the .form-column class to wrap your <form>

We'll never share your email with anyone else. Form Text Link
Check Box styles
Radio styles



Sizing



Inline Form

Large
Normal
Small

Form Validation

Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Buttons

.btn.btn-lg

.btn

.btn.btn-oultine-[style]

.btn.btn-sm

.btn.btn-action

          
            <button type="button" class="btn btn-primary btn-action">
              <span class="btn-text-span">Action</span>
            </button>

.btn.btn-block

.btn.btn-icon

Buttons

.btn.btn-lg

.btn

.btn.btn-oultine-[style]

.btn.btn-sm

.btn.btn-action

        
          <button type="button" class="btn btn-primary btn-action">
            <span class="btn-text-span">Action</span>
          </button>

.btn.btn-block

.btn.btn-icon

Tables

Bootstrap Docs >

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Spacing Examples

Bootstrap Docs >

.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mt-5
.p-1
.p-2
.p-3
.p-4
.p-5

Grid Examples

Bootstrap Docs >

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6