Table of Contents

• Type
• Colors
• Typography
• Grid System
• Content Grid
• Tables
• Buttons
• Forms
• Page Elements
• Frames
• Panels
• Miscellaneous elements
• Iconography
• UI Elements
  • Arrows
  • Breadcrumbs
  • Pagination
  • Social Sharing
  • Minimal Input
  • Dots

Fonts

Colors

Main

Greyscale

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 alternate grid layouts

Use .content-grid--2-col to create a 2 column grid on screens larger than $screen-md-min.

Use .content-grid--4-col to create a 4 column grid on screens larger than $screen-md-min.

Use .content-grid--2-4 to create a grid that switches from 2 to 4 columns.

Use .content-grid--1-2-4 to create a grid that switches from 1 to 2 to 4 columns.

Use .content-grid--1-2-3 to create a grid that switches from 1 to 2 to 3 columns.

Alternate Content Grid Spacing

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

Combine with frames to make tiled layouts.

Use the .content-grid--tight and .content-grid--loose modifier classes to adjust vertical spacing between grid items.

Tight Grid

Loose Grid

Tables

Responsive Tables

Wrap tables with a .table-responsive element to enable horizontal scrolling on small screens. All child table elements of an .rte element are wrapped by default via javascript.

Border-less Tables

Buttons

Default button Default Button (Disabled)

Primary button Primary button (Disabled)

Secondary button Secondary button (Disabled)

Alternate button (Serif) Alternate button (Serif, disabled)

Alternate secondary button (Serif) Alternate secondary button (Serif, disabled)

Block Level Default Button Block Level Primary Button Block Level Secondary Button

View Details

Forms

Default Forms

Label

Label 2

Select Label Option 1 Option 2 Option 3

I'm helper text to explain what's going on with this form input.

Animated labels

Add a class of control-label to a label to and it will animate out of the way when either the is-focused or is-filled classes are applied to the form-group. Note: Placeholders should not be used, as the label will be placed overtop of it.

First Name

Last Name

Email

Horizontal forms (customer, contact, etc)

The animated behavior of labels is removed when there is a parent with the .form-horizontal class.

Text Field

Placeholder

Disabled Field

Text Field (Error)

Select Field

-- Choose -- Option 1 Option 2 Option 3 Option 4

Text Area

Inline Forms

Name

Email

Send invitation

Other Form Elements

Checkbox Field

Checkbox Field

Disabled Checkbox Field

Toggle Switch

Option 1

Option 2

Option 3

Textarea

File Field

Example block-level help text here.

Submit

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.

UI Elements

Navigation Icons

Social icons

Product Icons

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

Pagination

Social Sharing

Minimal Input

Normal

Inverted

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.