style-guide

Branding

Logos

`settings.logo`

Typography

`font-family: var(--font-family-one);`	"Work Sans" / Regular
`font-family: var(--font-family-one);` `font-weight: 700;`	"Work Sans" / Bold
`font-family: var(--font-family-two);` `font-weight: 300;`	Roboto / Light
`font-family: var(--font-family-two);` `font-weight: 300;` `font-style: italic;`	Roboto / Light / Italic
`font-family: var(--font-family-two);` `font-weight: 400;`	Roboto / Regular
`font-family: var(--font-family-two);` `font-weight: 400;` `font-style: italic;`	Roboto / Regular / Italic
`font-family: var(--font-family-two);` `font-weight: 700;`	Roboto / Bold
`font-family: var(--font-family-two);` `font-weight: 700;` `font-style: italic;`	Roboto / Bold / Italic

Colors

`--color-brand-01`	`#252525`
`--color-brand-02`	`#3A3A3A`
`--color-brand-03`	`#707070`
`--color-brand-04`	`#F2F2F2`
`--color-brand-05`	`#CC0000`
`--color-brand-06`	`#007AC3`
`--color-utility-01`	`#3F6D29`
`--color-utility-02`	`#F8C947`
`--color-utility-03`	`#FFFFFF`

Overlays

`--color-overlay-d01`	`rgba(0, 0, 0, 0.12)`
`--color-overlay-d02`	`rgba(0, 0, 0, 0.3)`
`--color-overlay-d03`	`rgba(0, 0, 0, 0.6)`
`--color-overlay-l01`	`rgba(242, 242, 242, 0.2)`
`--color-overlay-l02`	`rgba(242, 242, 242, 0.9)`
`--color-overlay-l03`	`rgba(242, 242, 242, 0.5)`

Spacing

	`Desktop`	`Mobile`
`--spacing-unit-xxs`	`0.4rem`	`Same as desktop`
`--spacing-unit-xs`	`0.8rem`	`Same as desktop`
`--spacing-unit-s`	`1.6rem`	`Same as desktop`
`--spacing-unit-m`	`2.4rem`	`Same as desktop`
`--spacing-unit-l`	`3.2rem`	`Same as desktop`
`--spacing-unit-xl`	`4.8rem`	`Same as desktop`
`--content-wrapper-spacing`	`clamp(1.6rem, 4.507vw + -0.09rem, 6.4rem)`	`Same as desktop`
`--content-vertical-spacing`	`clamp(4.8rem, 2.254vw + 3.955rem, 7.2rem)`	`Same as desktop`

Text Styles

Heading Styles

`heading-1`	A quick brown fox jumps over the lazy dog
`heading-2`	A quick brown fox jumps over the lazy dog
`heading-3`	A quick brown fox jumps over the lazy dog
`heading-4`	A quick brown fox jumps over the lazy dog
`heading-5`	A quick brown fox jumps over the lazy dog
`heading-6`	A quick brown fox jumps over the lazy dog

Body Text Styles

`running-head`	A quick brown fox jumps over the lazy dog
`lead-text`	A quick brown fox jumps over the lazy dog
`label`	A quick brown fox jumps over the lazy dog
`paragraph`	A quick brown fox jumps over the lazy dog
`paragraph--sb`	A quick brown fox jumps over the lazy dog
`paragraph--sm`	A quick brown fox jumps over the lazy dog
`paragraph--xs`	A quick brown fox jumps over the lazy dog
`button-text`	A quick brown fox jumps over the lazy dog
`button-text-sm`	A quick brown fox jumps over the lazy dog

Elements & Components

Icons

There are some duplicates due to the import for product features.

`account`
`angle-up`
`arrow-down`
`arrow-left`
`arrow-right`
`arrow-up`
`book-mdi`
`book-octicon`
`book`
`box`
`calendar-check-o`
`calendar`
`canadian-maple-leaf`
`cart`
`certificate`
`chalkboard-teacher`
`check`
`checkbox-blank`
`checkbox-checked`
`circle`
`chevron-down`
`chevron-left`
`chevron-right`
`chevron-up`
`clock`
`clock-filled`
`close`
`cog`
`comment`
`computer`
`discount`
`edit`
`error`
`heart`
`help`
`facebook`
`filter`
`graduation-cap`
`info`
`info-circle`
`list-alt`
`lock`
`mail`
`map-marked-alt`
`instagram`
`map-pin`
`menu`
`message`
`minus`
`money-off`
`pinterest`
`pause`
`pencil`
`plastic-card`
`play`
`plus`
`print`
`radio-blank`
`radio-checked`
`remove`
`reset`
`ruler`
`search`
`share`
`shopify`
`snapchat`
`sound`
`star`
`star-half`
`star-mdi`
`success`
`tablet`
`tachometer`
`tag`
`thumbs-down`
`thumbs-up`
`tiktok`
`tumblr`
`twitter`
`truck`
`undo`
`university`
`user-plus`
`user`
`users-fas`
`vimeo`
`youtube`

Button

`button`
`button--secondary`
`button--secondary-reversed`
`button--tertiary`
`button--cta`
`disabled` or `button--disabled`
`button--small`

Button with Content

`button-with-content` with image, title, and price
`button-with-content` title and price only

Product Badges

`product-badges` sale badge	Sale Sale
`product-badges` new badge	New New
`product-badges` in stock badge	In Stock In Stock
`product-badges` best seller badge	Best Seller Best Seller

Quantity Stepper

`quantity-stepper`	Quantity:
`quantity-stepper` `show_label: false`	Quantity:
`quantity-stepper` `disabled`	Quantity:

Tag

`tag`

Property

`property`	Default Property Property with note Note Property with error note Error Note Property with required input *

Text Box

`text-box`
`text-box--fixed-width`
`text-box--multi-line`
`text-box--invalid` `aria-invalid="true"` `:invalid`
`text-box:disabled`

Select

`select`
`select--full-width`
`select--invalid` `aria-invalid="true"` `:invalid`
`text-box:disabled`

Checkbox

`checkbox`	Default Checked Error Disabled Checked & Disabled

Radio

`radio`	Default Checked Error Disabled Checked & Disabled

Product Summary

`product-summary`	"A.E.D." V-Style Sign, 6" x 9", Acrylic, English with Pictogram $31.09

Message

`message`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link
`message--error`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link
`message--success`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link
`message--warning`	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus. Link

Drawer

Basic Implementation This header is designed to be sticky.	Drawer Title Left 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Drawer Title Right 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque.
With Footer This footer is designed to be sticky.	Drawer Title Left 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque.
Alternative Implementation When the drawer element can't be inside a `wyatt-drawer` component: Pass a css selector as a value to `data-open`, to find another drawer element. This example opens the cart.
Async Implementation Add an `async` object to the module config. A `url` property is required. A `selectors` array property is optional, and defaults to appending the entire response. An `appendTo` property is also optional, and defaults to the body of the drawer.	Async Drawer

Modal

Basic Implementation	Style Guide Modal Example 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque.
Alternative Implementation When the dialog element can't be inside a `wyatt-modal` component: Pass a css selector as a value to `data-open`, to find another dialog element. This example opens the store locations.	Modal Element Outside of wyatt-modal 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque.
Video Implementation Pass `modal--video` to the class variable.
Async Implementation Add an `async` object to the module config. A `url` property is required. A `selectors` array property is optional, and defaults to appending the entire response. An `appendTo` property is also optional, and defaults to the body of the modal. See `quick-add` for an example.	Async Modal

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	Heading 1 Panel content. More panel content 0. Heading 2 Panel content. More panel content 0. More panel content 1. Heading 3 Panel content. More panel content 0. More panel content 1. More panel content 2. Heading 4 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. Heading 5 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. More panel content 4.
One open at a time Simply give each `details` element a `name` attribute with the same value.	Heading 1 Panel content. More panel content 0. Heading 2 Panel content. More panel content 0. More panel content 1. Heading 3 Panel content. More panel content 0. More panel content 1. More panel content 2. Heading 4 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. Heading 5 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. More panel content 4.
Panels starting as open Simply give each `details` element that you want open an `open` attribute.	Heading 1 Panel content. More panel content 0. Heading 2 Panel content. More panel content 0. More panel content 1. Heading 3 Panel content. More panel content 0. More panel content 1. More panel content 2. Heading 4 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. Heading 5 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. More panel content 4.
Nested Accordions Child accordions should work independently of their parent accordions.	Heading 1 Panel content. Nested Heading 1 Panel content. More panel content 0. Heading 2 Panel content. Nested Heading 1 Panel content. More panel content 0. Nested Heading 2 Panel content. More panel content 0. More panel content 1. Heading 3 Panel content. Nested Heading 1 Panel content. More panel content 0. Nested Heading 2 Panel content. More panel content 0. More panel content 1. Nested Heading 3 Panel content. More panel content 0. More panel content 1. More panel content 2. Heading 4 Panel content. Nested Heading 1 Panel content. More panel content 0. Nested Heading 2 Panel content. More panel content 0. More panel content 1. Nested Heading 3 Panel content. More panel content 0. More panel content 1. More panel content 2. Nested Heading 4 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. Heading 5 Panel content. Nested Heading 1 Panel content. More panel content 0. Nested Heading 2 Panel content. More panel content 0. More panel content 1. Nested Heading 3 Panel content. More panel content 0. More panel content 1. More panel content 2. Nested Heading 4 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. Nested Heading 5 Panel content. More panel content 0. More panel content 1. More panel content 2. More panel content 3. More panel content 4.

Tabs

Default configuration:

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

Tab 0

Tab content.

More Content 0.

Tab 1

Tab content.

More Content 0.

More Content 1.

Tab 2

Tab content.

More Content 0.

More Content 1.

Tab 3

Tab content.

More Content 0.

More Content 1.

Tab 4

Tab content.

More Content 0.

More Content 1.

Toggle Class Button

Click to toggle `button` class on target 1 above
Click to toggle `button` and `button--secondary` classes on target 1 above
Click to toggle `button` class on target 1 and target 2 above
Click to toggle `button` and `button--secondary` class on target 1 and target 2 above
Click to toggle `button` class and then set focus on on target 1 above

Branding

Logos

Typography

Colors

Overlays

Spacing

Text Styles

Heading Styles

Body Text Styles

Elements & Components

Icons

Button

Button with Content

Product Badges

Quantity Stepper

Tag

Property

Text Box

Select

Checkbox

Radio

Product Summary

Message

Drawer

Basic Implementation

With Footer

Alternative Implementation

Async Implementation

Modal

Basic Implementation

Alternative Implementation

Video Implementation

Async Implementation

Slider

Default

Options: Slides to show

Options: Show navigation

Options: Hide controls (arrows)

Options: Start at

Options: HTML Attributes

Options: Slider as Navigation for another slider

Accordion

Default

One open at a time

Panels starting as open

Nested Accordions

Tabs

Tab 0

Tab 1

Tab 2

Tab 3

Tab 4

Toggle Class Button