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
h1
or class="heading heading--1"
H1 Heading
h2
or class="heading heading--2"
H2 Heading
h3
or class="heading heading--3"
H3 Heading
h4
or class="heading heading--4"
H4 Heading
h5
or class="heading heading--5"
H5 Heading
h6
or 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
Icons
Icon | Type |
---|---|
arrow-down
|
|
arrow-left
|
|
arrow-outward
|
|
arrow-right
|
|
arrow-up
|
|
account
|
|
cart
|
|
checkmark
|
|
chevron-down
|
|
chevron-left
|
|
chevron-right
|
|
chevron-up
|
|
close
|
|
discount
|
|
error
|
|
facebook
|
|
filter
|
|
info
|
|
instagram
|
|
linkedin
|
|
menu
|
|
minus
|
|
pinterest
|
|
play
|
|
plus
|
|
remove
|
|
search
|
|
shopify
|
|
snapchat
|
|
success
|
|
tiktok
|
|
timer
|
|
tumblr
|
|
twitter
|
|
vimeo
|
|
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"
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.
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.
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