Styleguide

This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file named page.styles.liquid.'

Table of Contents

Type

FS Siena Extra Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

FS Siena Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

FS Siena

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Roboto Condensed

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Colors

Main Brand

Ebony Clay
#222944
$ebony-clay

Caribbean Green
#04C7AF
$caribbean-green

Wild Sand
#f0f0f0
$wild-sand

Emperor
#515151
$emperor

Sand
#F4EAE0
$sand

Ivory
#F7F2ED
$ivory

Grayscale

Black
#000000
$black

Charcoal
#4D4D4D
$charcoal

Off White
#FCFBFA
$off-white

Ivory
#F7F2ED
$ivory

White
#ffffff
$white

Typography

Headings

H1 FS Siena Light

H2 Roboto Condensed Bold

H3 FS Siena Light

H4 FS Siena Light

H5 FS Siena ExtraLight
H6 FS Siena Light

Pseudo-Headings

Subtitle - FS Siena
Eyebrow - FS Siena

Type variations

P1 FS Siena Thin

P2 FS Siena ExtraLight

P3 FS Siena Thin

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

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

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four

RTE

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


  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with ordered child list
      1. Third level item
      2. Another third level item
  • Four

This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.

This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.

RTE Heading

This is an example paragraph that comes out of the rich text editor. This sentence contains a link so you can verify what link styles look like. Free-market sprawl garage hotdog monofilament tube dolphin sunglasses kanji vehicle pen ablative Shibuya range-rover marketing assassin. Sub-orbital tanto sign military-grade tattoo corrupted camera lights dead cardboard j-pop marketing apophenia film jeans. Fetishism concrete claymore mine table j-pop nano-geodesic post-rain carbon garage sign savant refrigerator saturation point grenade.

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

Extra Small
(<576px)		 Small
(≥576px)		 Medium
(≥768px)		 Large
(≥992px)		 Extra Large
(≥1200px)		 Extra Extra Large
(≥1480px)
Max Container width None (auto) 540px 720px 960px 1140px 1440px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

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.

Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03

Small Tables

Sizes XXS XS S M L
Bust 32"-34" 34"-36" 36"-38" 38"-40"
Under Bust 32"-34" 34"-36" 36"-38" 38"-40"
Waist 23.5"-24.5" 32"-34" 34"-36" 36"-38" 38"-40"
Hip 33"-34" 32"-34" 34"-36" 36"-38" 38"-40"

Border-less Tables

Sizes XXS XS S M L
Bust 32"-34" 34"-36" 36"-38" 38"-40"
Under Bust 32"-34" 34"-36" 36"-38" 38"-40"
Waist 23.5"-24.5" 32"-34" 34"-36" 36"-38" 38"-40"
Hip 33"-34" 32"-34" 34"-36" 36"-38" 38"-40"

Buttons

Primary button

Primary button (Disabled)

Secondary button

Secondary button (Disabled)

Block Level Primary Button Block Level Secondary Button

Link Button

Small Primary Button Small Secondary Button Small Disabled Button Small Disabled Button

Forms

Forms are based on Bootstrap 4's form component. Simple examples to listed here to use as a reference for styling, for more detailed information about how they work, please see the official documentation.

Default Forms

I'm helper text to explain what's going on with this form input.
Validation Feedback goes here
Invalid Feedback goes here

Horizontal Forms

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your label elements as well so they’re vertically centered with their associated form controls.

Inline Forms

Other Form Elements

Example block-level help text here.

Custom Form Elements

Use completely custom form elements to replace browser defaults.

Miscellaneous elements

Horizontal Rules

Default hr

Alerts

I'm a primary alert
I'm a secondary alert
I'm a success alert
I'm a info alert
I'm a warning alert
I'm a danger alert
I'm a light alert
I'm a dark alert

Iconography

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

Social icons

General icons

Pagination