Table of Contents

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

Fonts

Colors

Grays

Main

Iconography

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

Payment icons

Social icons

General icons

Color icons

Navigation icons

Typography

Headings

H1 Playfair Display

H2 Playfair Display

H3 Playfair Display

H4 Playfair Display

H5 Gotham Book

H6 Gotham Book

Type variations

Lead System / Gotham Book

P1 Gotham Book

P2 Gotham Book

P3 Gotham Book

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

Background Color Utilities

• .bg-black
• .bg-concrete
• .bg-white
• .bg-sinbad
• .bg-robinsegg
• .bg-tealblue
• .bg-blackpearl

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.

Buttons

Standard Buttons

Disabled Buttons

Small Buttons

Block Buttons

Interface Control Buttons

Links & CTAs

Buttons: Reverse

Standard Buttons

Disabled Buttons

Small Buttons

Block Buttons

Interface Control Buttons

Video Button

Links & CTAs

Forms

Forms are based partially on Bootstrap 4's form component. In this project we are using customized "Float Label" inputs when possible. When an input is unfilled, the placeholder text will be visible. As soon as a use begins typing within the input, a label animates into position above the element. These forms are created to be ADA compliant and require no JavaScript. They are also built with a fallback layout to accommodate the restrictions of IE11. In IE11, the labels will always be present. They will not be hidden initially, and will not animate into position when text is entered by the user. For more detailed information about how the original BS4 forms work, please see the official documentation.

IMPORTANT: To use float label inputs, the HTML structure must mimic the examples below, and the input element must come before the label in markup.

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.

Forms: Default

Selects: Small

Forms: Reverse

Selects: Small

Number Controls

Number Controls: Reverse

Custom Form Elements

Use completely custom form elements to replace browser defaults.

Custom checkbox

Disabled checkbox

Custom radio

Disabled radio

Textarea

File Field Example block-level help text here.

UI Elements

Arrows

Arrow elements are mostly used for slideshow controls.

Cart

Cart icon with contents indicator. Need default and reverse versions.

Option Selectors

Styled radio UI used to select product options

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.

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. See /_styles/components/frames.scss to adjust available ratios.

There is also a child element .frame__inner that is positioned absolutely and stretches the full dimensions of the frame.

Responsive Frames

Responsive frame sizing is available and works similar to Bootstrap responsive utilities, any breakpoint class applies to that breakpoint and up. If you add another class for a larger breakpoint it will override any ones applying at smaller breakpoints. Frame sizing being applied to screen sizes smaller than $grid-breakpoints('sm') do not need a responsive class.

Cards

From Bootstrap: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display. See the official documentation for full list of options.

Use these in conjunction with the collapse.js plugin markup to create elements with toggle-able visibility and accordion-like behavior. See the collapse component for implementation.

NOTE: These elements have nothing in common with the more specific card snippets that we have created as Shopify theme components (.article-card, .product-card, etc..). It is just an unfortunate naming clash as these elements were created before switching over to Bootstrap 4.

Miscellaneous elements

Horizontal Rules

Default hr

---

Alerts

Grid System

Content Grid

The content grid is an alternative way to layout content similar to the Bootstrap grid but it doesn't rely on rows and columns. It used the same sizing and gutters to ensure layout consistency, but the usage is slightly different.

The content grid relies on a parent .content-grid element with any number of direct child .content-grid__item elements. The child element sizing is parent on the parent grid element and any modifier classes it may have. The default grid is responsive and initially displays 1 item per row and expands to show 2, and 3 items per row as the screen crosses the small and large breakpoints respectively.

Responsive modifier classes are available to generate 1 -> 6 columns per breakpoint and work similar to Bootstrap responsive utilities. Any breakpoint class applies to that breakpoint and up. If you add another class for a larger breakpoint it will override any ones applying at smaller breakpoints.

Below is an example of the default content grid.

Responsive Content Grid Layouts

Modifier classes are available to create alternate grid layouts

Use .content-grid--sm-3-col.content-grid--xxl-6-col to create a 3 column grid on screens large than the sm breakpoint and a 6 column grid on screens larger than the xxl breakpoint.

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.

Small Tables

Border-less Tables