Type

Colors

Main Colors

Secondary Colors

Typography

Headings

H1 Linotype Univers Condensed

H2 Linotype Univers Condensed

H3 Linotype Univers Condensed

H4 Linotype Univers Condensed

H5 Linotype Univers Condensed

H6 Linotype Univers Condensed

Type variations

P1 Linotype Universe Basic Light

P2 Linotype Universe Basic Light

P3 Linotype Universe Basic Light

attn Linotype Universe Condensed Regular

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-color-black
• .u-color-white
• .u-color-dark-grey
• .u-color-medium-grey
• .u-color-light-grey
• .u-color-off-white
• .u-color-white-smoke
• .u-color-blue
• .u-color-beige
• .u-td-underline
• .u-td-strike

Background Color Utilities

• .u-bg-black
• .u-bg-white
• .u-bg-dark-grey
• .u-bg-medium-grey
• .u-bg-light-grey
• .u-bg-off-white
• .u-bg-white-smoke
• .u-bg-blue
• .u-bg-beige

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 Typography

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

Grid System

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)

Block Level Button Block Level Button

Default button Primary button

Forms

Default Forms

Label

Label 2

-- Choose -- Option 1 Option 2 Option 3

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

First Name

Last Name

Email

Horizontal forms (customer, contact, etc)

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

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.

You can also use the page header with .page-header--right and page-header--left modifier classes that will align content to either side above $screen-sm-min.

You can also use the page header with the .page-header--underlined modifier class to add a light bottom border and padding.

You can also use the page header with the .page-header--large modifier class to create a header with larger title text and more vertical white space.

Miscellaneous elements

Horizontal Rules

Default hr

---

Thin hr.hr--thin

---

Alerts

Logos

There are 2 logos available to use in both png and svg formats.

logo.png / logo.svg

logo-short.png / logo-short.svg

Iconography

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

Social icons

General icons

CTAs

Call To Action (CTA) elements come in a few varieties, each with slightly different markup to enable interaction effects. All CTAs require the base .cta class in addition to the type class .cta-*

CTA 1

Learn more

CTA 2

Shop All

CTA 3

Clear All

CTA Group

Use the CTA group to create a collection of CTAs of the same or different types.

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.

UI Elements

Arrows

Use the .arrow--transparent modifier class to remove the background color.

Dots

Use these to display single character options

Use the .dots--expanded modifier class to add extra white space around each dot in the list.

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

Or apply a background color and .dot--solid modifier class to use them as swatches. Any child of the .dot-inner element will be hidden by setting the opacity to 0. When is .is-active class is applied, instead of inverting the colors, the contents of the .dot-inner element will be displayed. By default all solid dots have a checkmark as the contents of the .dot-inner element. See below for disabled dots.

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

Normal dots with the .is-disabled class will have partial opacity. Solid dots will get an "x" through them instead of the default checkmark.

There are also a series of patterned dots available to use. They all require the base modifier class .dot--pattern in addition to the more specific modifier. See elements/dots.scss for the full list.

Filter Tags

Polo Long Sleeve Henley

Use the .is-active modifier class to show the tag as active.

Polo Long Sleeve Henley

Use the .filter-tag--alt modifier class along with .is-active to show the tag as active but with a left aligned "×" and no background color .

Polo Long Sleeve Henley

Zoom Trigger

Breadcrumbs

Social Sharing

Hamburger

Minimal Input

Normal

Inverted

Modals

Built using Bootstrap's Modal, use these to create an overlay to focus the user's attention.

Launch Modal

By applying the .modal--fullscreen modifier class, you can create a modal that takes over the entire screen. The .modal-header, .modal-body and .modal-footer elements don't apply. Use the .modal-content element as a blank canvas with full page with. Also, note the placement of the .modal-close element as a direct child of .modal-dialog, not .modal-header.

Launch Fullscreen Modal