Table of Contents

• Type
• Colors
• Typography
• Grid System
• Content Grid
• Tables
• Buttons
• Forms
• Page Elements
• Frames
• Panels
• Miscellaneous elements
• Iconography
• CTAs
• UI Elements

Type

Colors

Greyscale

Main

Typography

Headings

H1 Averta Bold

H2 Averta Bold

H3 Averta Bold

H4 Averta Bold

H5 Averta Bold

H6 Averta Bold

Type variations

Lead Averta Regular

P1 Averta Regular

P2 Averta Regular

P3 Averta Regular

P4 Averta Regular

CTA Text Averta Bold

Nav Text Averta Bold

Billboard Text

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien.

Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros.

Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper.

Type styles

• Strong
• Emphasis
• Inline link
• Strike
• ^Sup

Text Utilities

• .u-fw-normal
• .u-fw-bold
• .u-td-underline
• .u-td-strike
• .u-color-black
• .u-color-dark-grey
• .u-color-medium-grey
• .u-color-grey
• .u-color-light-grey
• .u-color-off-grey
• .u-color-off-white
• .u-color-white
• .u-color-blue
• .u-color-pink
• .u-color-primary
• .u-ls-base
• .u-ls-small
• .u-ls-medium
• .u-ls-large
• .u-ls-xlarge

Background Color Utilities

• .u-bg-black
• .u-bg-dark-grey
• .u-bg-medium-grey
• .u-bg-grey
• .u-bg-light-grey
• .u-bg-off-grey
• .u-bg-off-white
• .u-bg-white
• .u-bg-blue
• .u-bg-pink
• .u-bg-primary

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Lists

RTE

Styles specific to text that comes out of the rich text editor.

Note: Any table elements that come out of the rich text editor are will automatically have a responsive wrapper applied to them. This allows them to scroll on small screens without breaking the site layout.

Grid System

Content Grid

This is a more rigid grid for laying out content, typically products and articles. It uses the same sizing and gutters as the normal grid. There is one base version with several modifier classes that allow you some level of flexibility. The default layout is 1 across on mobile devices, and 3-col on screens larger than $screen-md-min.

Alternate Content Grid Layouts

Modifier classes are available to create 2-col and 4-col layouts on screens larger than $screen-md-min.

2 Across

4 Across

Flush Content Grid

Use the content-grid--flush modifier class to make all grid items flush with each other.

Combine with frames to make tiled layouts.

You can also use the grid item modifier classes to create grid items that span multiple columns.

Here we're using a 4 column content grid with 2 modified grid items.

Tables

Responsive Tables

Wrap tables with a .table-responsive element to enable horizontal scrolling on small screens

Border-less Tables

Buttons

Default button Default Button (Disabled)

Primary button Primary button (Disabled)

Secondary button Secondary button (Disabled)

Block Level Default Button Block Level Default Button Block Level Default Button

Link Button

Forms

Default Forms

Label

Label 2

Label 3 Choose an option Option 1 Option 2 Option 3

Horizontal forms (customer, contact, etc)

Text Field

Placeholder

Disabled Field

Text Field

Select Field

Choose an option Option 1 Option 2 Option 3 Option 4

Text Area

Other Form Elements

Checkbox Field

Checkbox Field

Disabled Checkbox Field

Option 1

Option 2

Option 3

Small Checkbox

Small Radio

Textarea

File Field

Example block-level help text here.

Submit

Select Dropdown

There is a modifier form control class called .form-control--dropdown that only applies to select tags which gives them slightly altered styling including top border, darker text and larger input height. It should not be used withinnormal forms with other inputs, only single use dropdowns.

Note About Select Elements

This theme is using the Chosen library to enhance native select tags. By default, any select.form-control elements are targeted and initialized on page load. If you want to avoid this, add the data-no-chosen attribute to your select tag and it will be left alone.

Page Elements

Page Header

Use this element at the top of pages to add consistent titles + subtitles. You can also use this element without the subtitle if necessary. This element also works with left and right modifier classes to change text alignment.

Content Header / Footer

Use these elements to create sections of content throughout the body of the page. While page header should be used once at the top, the content header can be used multiple times.

Frames

Use frames to create elements with defined aspect ratios. All frames require the .frame base class and a modifier class to define their aspect ratio. There is also a child element .frame__inner that is positioned absolutely and stretches the full dimensions of the frame.

Responsive Frames

There are responsive modifier classes for all frame sizes and all breakpoints.

Panels

Panels are generic containers for content that have a header and a body. They don't get used very much, but the base .panel element is needed for the collapse / accordion plugin to work so we've included it here. The base element should remain unstyled. All the styling you see below is set on the child .panel__* classes.

Wrap multiple panels with a .panel-group element to make them vertically flush with eachother.

Miscellaneous elements

Horizontal Rules

Default hr

---

Alerts

Iconography

Read more about using, creating, and editing SVG icons in Slate's documentation.

Nuun Icons

Benefit Icons

• Liquid error: Could not find asset snippets/icon-hydration.liquid

Social Icons

General Icons

CTAs

Call To Action (CTA) elements come in a few varieties. Use the cta snippet to generate the appropriate CTA. All CTAs require the base .cta class in addition to the type class .cta-*

CTA 1

CTA 2

CTA 3

CTA 4

CTA 5

CTA Grouping

Use a .cta-group element to wrap multiple CTAs.

Disabled CTAs

UI Elements

Arrows

Arrow elements are mostly used for slideshow controls. The root element has the base arrow class applied to it and directional modifier classes are available. By default, it has one child element that makes up the actual arrow icon.

This child element easily be swapped out for a png, svg, or other icon made of pseudo elements.

Breadcrumbs

Social Sharing

Vertical

Minimal Input

Normal

Large

Dots

Dots are an alternate UI used primarily for displaying / selecting variant option values. They respond to the two state classes .is-active and .is-disabled. Active dots will show a border around them, disabled dots will show with partial opacity and a strike through.

Use the .dots--small modifier class to create smaller dots when space is tight.

Apply a background color or background image to the .dot__inner element to use them as swatches.

Or apply a modifier class to apply a background color as defined in the swatch palette. The list of available color-modifier classes is below.