Style Guide
Colors
All of the theme's hardcoded colors. Any color used in CSS should come from here or a setting value.
Pure Black
var(--color-pure-black)
#000000
rgb(0, 0, 0)
Black
var(--color-black)
#1d1e2c
rgb(29, 30, 44)
Dark Gray
var(--color-dark-gray)
#59656f
rgb(89, 101, 111)
Gray
var(--color-gray)
#cccccc
rgb(204, 204, 204)
Light Gray
var(--color-light-gray)
#f6f3f6
rgb(246, 243, 246)
White
var(--color-white)
#fefefd
rgb(254, 254, 253)
Gold
var(--color-gold)
#dcb656
rgb(220, 182, 86)
Green
var(--color-green)
#63b38e
rgb(99, 179, 142)
Red
var(--color-red)
#b54b4b
rgb(181, 75, 75)
Typography
Body Typeface
Aa Bb 123 Lora
Heading Typeface
Aa Bb 123 Onest
Display Typeface
Aa Bb 123 Montserrat Alternates
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
Displays
class="display display--1"
class="display display--2"
Body
class="lead-text"
class="running-head"
p or class="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.
class="paragraph-1"
A quick brown fox jumps over the lazy dog.
class="paragraph-1-bold"
A quick brown fox jumps over the lazy dog.
class="paragraph-1-link"
A quick brown fox jumps over the lazy dog.
class="paragraph-1-alt"
A quick brown fox jumps over the lazy dog.
class="paragraph-1-alt-bold"
A quick brown fox jumps over the lazy dog.
class="paragraph-1-alt-link"
A quick brown fox jumps over the lazy dog.
class="paragraph-2"
A quick brown fox jumps over the lazy dog.
class="paragraph-2-bold"
A quick brown fox jumps over the lazy dog.
class="paragraph-2-link"
A quick brown fox jumps over the lazy dog.
class="paragraph-2-alt"
A quick brown fox jumps over the lazy dog.
class="paragraph-2-alt-bold"
A quick brown fox jumps over the lazy dog.
class="paragraph-2-alt-link"
A quick brown fox jumps over the lazy dog.
class="small-text"
A quick brown fox jumps over the lazy dog.
class="label"
A quick brown fox jumps over the lazy dog.
class="button-text"
Links
Spacing Units
var(--spacing-unit-xxs)
var(--spacing-unit-xs)
var(--spacing-unit-s)
var(--spacing-unit-m)
var(--spacing-unit-l)
var(--spacing-unit-xl)
var(--spacing-unit-xxl)
Icons
| Icon | Type |
|---|---|
arrow-down
|
|
arrow-left
|
|
arrow-right
|
|
arrow-up
|
|
account
|
|
authorization
|
|
box
|
|
cart
|
|
checkmark
|
|
chevron-down
|
|
chevron-left
|
|
chevron-right
|
|
chevron-up
|
|
close
|
|
copy
|
|
discount
|
|
error
|
|
facebook
|
|
filter
|
|
gift
|
|
info
|
|
instagram
|
|
linkedin
|
|
menu
|
|
minus
|
|
piggy-bank
|
|
phone
|
|
pinterest
|
|
play
|
|
plus
|
|
prohibited
|
|
remove
|
|
search
|
|
share
|
|
shop
|
|
shopify
|
|
success
|
|
location-pin
|
|
truck
|
|
tiktok
|
|
twitter
|
|
youtube
|
|
warning
|
Buttons
Primary
class="button"
class="button button--reversed"
Secondary
class="button button--secondary"
class="button button--secondary-reversed"
Tertiary
class="button button--tertiary"
Hover Icon
class="button button--hover-icon"
Full Width
class="button button--full-width"
class="button button--full-width button--hover-icon "
Disabled
disabled attribute or class="button button--disabled"
Text Button
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"
class="text-box text-box--error"
Product Summary
Default
class="product-summary"
Alt
class="product-summary product-summary--alt"
Messages
Default
class="message" or class="message message--info"
Error
class="message message--error"
Success
class="message message--success"
Warning
class="message message--warning"
Drawer
Basic Implementation
This header is designed to be sticky.
With Footer
This footer is designed to be sticky.
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.
Modal
Basic Implementation
Alternative Implementation
When the dialog element can't be inside a wyatt-modal component:
Pass a css selector as a value to data-modal-open, to find another dialog element.
This example opens the store locations.
Video Implementation
Pass modal--video to the class variable.
Slider
Default
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 %}
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 %}
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 %}
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 %}
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"' %}
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]' %}
Accordion
Default
Default configuration:
triggerSelector: ".accordion__trigger"
panelSelector: ".accordion__panel"
closeOthers: false
Panel content.
More panel content 0.
More panel content 1.
More panel content 2.
More panel content 3.
Tabs
Default configuration:
triggerSelector: ".tabs__trigger"
panelSelector: ".tabs__panel"
activeTab: 0
Toggle Class Button
Click below to toggle button class on target 1 above
Click below to toggle button and button--secondary classes on target 1 above
Click below to toggle button class on target 1 and target 2 above
Click below to toggle button and button--secondary class on target 1
and target 2 above
Click below to toggle button class and then set focus on on target 1 above