Style Guide

Colors

Main

All of the hardcoded colors specific to the theme.

Dark Blue

#3a4fa1

Red

#ee283b

Green

#13864B

Yellow

#fce102

Light Grayish Blue

#CAC6E0

Very Dark Grayish Blue

#424055

Neutrals

Blacks, whites, grays, etc. Look for consolidation opportunities.

White

#ffffff

Light Gray

#f5f5fb

Gray

#656083

Dark Gray

#58595b

Black

#1e1d27

Configurable

These are the colors that are configurable in the admin.

settings.color_primary

#554dff

settings.color_secondary

#7d00ff

settings.color_highlight

#02ffce

Typography

Body Typeface

Aa Bb 123 Poppins

Heading Typeface

Aa Bb 123 Poppins

Headings

h1or class="heading heading--1"

H1 Heading

h2or class="heading heading--2"

H2 Heading

h3or class="heading heading--3"

H3 Heading

h4or class="heading heading--4"

H4 Heading

h5or class="heading heading--5"

H5 Heading

h6or class="heading heading--6"

H6 Heading

class="heading heading--stretch"

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Body Copy

Regular Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Links

Link Text

Icons

Icon Type
arrow-down arrow-down
arrow-left arrow-left
arrow-outward arrow-outward
arrow-right arrow-right
arrow-up arrow-up
account
cart cart
checkmark checkmark
chevron-down chevron-down
chevron-left chevron-left
chevron-right chevron-right
chevron-up chevron-up
close close
discount discount
error error
facebook
filter filter
info info
instagram instagram
linkedin linkedin
menu menu
minus minus
pinterest pinterest
play play
plus plus
remove remove
search search
shopify shopify
snapchat snapchat
success success
tiktok tiktok
timer timer
tumblr tumblr
twitter
vimeo vimeo
youtube youtube

Buttons

Default

class="button"

Black

class="button button--black"

White

class="button button--white"

Grey

class="button button--grey"

Outline

class="button button--outline"

Outline White

class="button button--outline-white"

Disabled

disabled attribute or class="button button--disabled"

Pill

Default

class="pill"

Pill

Nested in `our-work` component

class="pill"

Text Button

Default

class="text-button"

Forms

Property

class="property"

class="property" with note

Note

class="property" with error note

Error Note

class="property" with required field

Button Property

class="button-property"

Text Box

class="text-box"

class="text-box text-box--fixed-width"

class="text-box text-box--multi-line"

Products

Product Summary

class="product-summary"

One

$1.00

Messages

Default

class="message" or class="message message--info"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Error

class="message message--error"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Success

class="message message--success"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Warning

class="message message--warning"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Drawer

Basic Implementation

This header is designed to be sticky.

This content is given a height and background to show scrolling.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

This content is given a height and background to show scrolling.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

With Footer

This footer is designed to be sticky.

This content is given a height and background to show scrolling.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Alternative Implementation

When the drawer element can't be inside a wyatt-drawer component:

Pass a css selector as a value to data-drawer-open, to find another drawer element.

This example opens the cart.

Slider

Default

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Options: Slides to show

Change the number of slides shown at the same time by passing the slides_to_show argument to the snippet.

Example: {% render 'slider', slides: slides, slides_to_show: 2 %}

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Options: Show navigation

Show a slider navigation, styled as dots, by passing the show_navigation argument to the snippet

Example: {% render 'slider', slides: slides, show_navigation: true %}

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Options: Hide controls (arrows)

The controls (arrows) are automatically included if more than one slide exists. You can override that by passing the hide_controls argument to the snippet

Example: {% render 'slider', slides: slides, hide_controls: true %}

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Options: Start at

You can start on a specific slide by passing the start_at argument to the snippet, using a 0-based index.

Example: {% render 'slider', slides: slides, start_at: 2 %}

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Options: HTML Attributes

You can add any additional html attributes to the wyatt-slider element by passing the attributes argument to the snippet.

Example: {% render 'slider', slides: slides, attributes: 'data-example-attribute aria-labeled-by="some-element"' %}

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Options: Slider as Navigation for another slider

You can use one slider as the navigation for another slider by passing the navigation_for argument to the snippet. This can take any valid document.querySelector() string as the value.

Example: {% render 'slider', slides: nav_slides, slides_to_show: 5, navigation_for: '[data-style-guide-slider]' %}

Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 0
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Accordion

Default

Default configuration:

          triggerSelector: ".accordion__trigger"
          panelSelector: ".accordion__panel"
          closeOthers: false
        

Panel content.

More panel content 0.

Image 0

Panel content.

More panel content 0.

More panel content 1.

Image 1

Panel content.

More panel content 0.

More panel content 1.

More panel content 2.

Image 2

Panel content.

More panel content 0.

More panel content 1.

More panel content 2.

More panel content 3.

Image 3

Panel content.

More panel content 0.

More panel content 1.

More panel content 2.

More panel content 3.

More panel content 4.

Image 4

Tabs

Default configuration:

          triggerSelector: ".tabs__trigger"
          panelSelector: ".tabs__panel"
          activeTab: 0
        

Tab 0

Tab content.

More Content 0.

Image 0

Tab 1

Tab content.

More Content 0.

More Content 1.

Image 1

Tab 2

Tab content.

More Content 0.

More Content 1.

More Content 2.

Image 2

Tab 3

Tab content.

More Content 0.

More Content 1.

More Content 2.

More Content 3.

Image 3

Tab 4

Tab content.

More Content 0.

More Content 1.

More Content 2.

More Content 3.

More Content 4.

Image 4