Style Guide

Colors

Bootstrap Docs >

Brand Colors

Brand Primary

.bg-primary
$primary: #4F74BC;

Brand Secondary

.bg-secondary
$secondary: #7491CA;

Brand Dark

.bg-dark
$dark: #222222;

Brand Light

.bg-light
$light: #F9F9F9;

Brand Info

.bg-info
$info: #43A090;

Brand Success

.bg-success
$success: #739E11;

Brand Danger

.bg-danger
$danger: #e6271a;

Brand Warning

.bg-warning
$warning: #C9C016;

Grays

Gray 1000

.bg-gray-1000

Gray 900

.bg-gray-900

Gray 800

.bg-gray-800

Gray 700

.bg-gray-700

Gray 600

.bg-gray-600

Gray 500

.bg-gray-500

Gray 400

.bg-gray-400

Gray 300

.bg-gray-300

Gray 200

.bg-gray-200

Gray 100

.bg-gray-100

Gray 50

.bg-gray-50

Brand Transparent

.bg-transparent

Typography

Bootstrap Docs >

Font Styles

Avenir Next<
.font-family-sans-serif
$font-family-sans-serif
$font-family-base

Used for:

Body Copy / Base Font Family

Avenir Next Italic
.font-family-sans-serif-ck
.font-italic

Used for:

Italics font glyphs are loaded

ITC SLimbach Std Bold Italic
.headings-font-family
$headings-font-family

Used for:

Headings

Avenir Next Bold
.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

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

Font size small 14px

$font-size-sm
.font-size-sm

Font size large 18px

$font-size-lg
.font-size-lg

Reversed

use the 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

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

Font size small 14px

$font-size-sm
.font-size-sm

Font size large 18px

$font-size-lg
.font-size-lg

Iconography

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

{ % include 'icon-cart' % }

Custom Icons

Payment icons

Social icons

Iconography

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

{ % include 'icon-cart' % }

Custom Icons

Payment icons

Social icons

Images

Bootstrap Docs >

Simple Responsive Image

Placeholder for style guide responsive image
<img src="..." class="img-fluid" alt="Placeholder for 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.

​ Placeholder for style guide picture tags 

      ​<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="Placeholder for picture tags">
      </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.