Plastic Free July
Up to 30% Off Best Sellers

Up to 30% Off Best Sellers

No code required.

Plastic Free July

primary

primary.base
primary.subtle
primary.accent

secondary

secondary.base
secondary.subtle
secondary.accent

neutral

neutral.base
neutral.subtle
neutral.accent
neutral.muted
neutral.black
neutral.white

alert

alert.base
alert.subtle
alert.accent
alert.muted

warning

warning.base
warning.subtle
warning.accent
warning.muted

error

error.base
error.subtle
error.accent
error.muted

success

success.base
success.subtle
success.accent
success.muted

RTE Page Content

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is bolded/strong text. Suspendisse at ornare leo. This is italicized text. Fusce magna erat, hendrerit eget dignissim non, lobortis id nunc. This is underlined text. Curabitur gravida urna in rutrum semper. Here is an inline link within a paragraph, at finibus ligula. Donec eget velit cursus, dignissim diam auctor, commodo dui. Nullam tristique mollis ex at interdum. Aenean eu aliquam lacus. Etiam sodales viverra magna, sed eleifend nisi dignissim sed. Sed ac sem nisi.

Nunc lobortis purus at ullamcorper malesuada. Suspendisse potenti. Quisque eleifend turpis vel lectus ullamcorper, id dapibus tortor consectetur. Mauris porta tellus et sodales blandit. Nullam convallis efficitur erat. Nullam et felis id magna porta aliquet ut quis ipsum. Praesent sodales molestie dui quis consequat. Etiam orci eros, volutpat non porttitor et, cursus sed enim. Curabitur ut velit lorem. Donec quis ipsum nulla.

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  • Unordered list item 5
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4
  5. Ordered list item 5

This is a blockquote that should be styled accordingly. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Table Header Table Header Table Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Inline image (set to large size 600x600):

Alt text for image

Inline video (RTE YouTube embed):

Non-RTE Text Styles

Headline Macro
Headline Extra Large
Headline Large
Headline Medium
Headline Small
Headline Extra Small
Headline Micro


Title Macro
Title Extra Large
Title Large
Title Medium
Title Small
Title Extra Small
Title Micro
Kicker


Text Small
Text Extra Small
Text Micro

Bold Text Small
Bold Text Extra Small
Bold Text Micro

Paragraph Text


Accordions

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae volutpat sem. Nulla maximus nibh viverra eros bibendum pretium. Suspendisse luctus nulla a erat sollicitudin, eu tempus diam congue. Mauris mattis varius est eget dapibus. Donec in dictum libero. Suspendisse id orci laoreet, suscipit nulla id, euismod leo. Ut malesuada finibus purus quis convallis. Aliquam dolor nunc, vestibulum ac felis eget, egestas placerat justo. Phasellus pretium luctus risus.

Buttons


.btn .btn--primary

.btn .btn--primary .focus-visible

.btn .btn--primary :disabled



.btn .btn--primary .btn--small

.btn .btn--primary .btn--small .focus-visible

.btn .btn--primary .btn--small :disabled



.btn .btn--secondary

.btn .btn--secondary .focus-visible

.btn .btn--secondary :disabled



.btn .btn--secondary .btn--small

.btn .btn--secondary .btn--small .focus-visible

.btn .btn--secondary .btn--small :disabled



.btn .btn--hollow

.btn .btn--hollow .focus-visible

.btn .btn--hollow :disabled



.btn .btn--hollow .btn--small

.btn .btn--hollow .btn--small .focus-visible

.btn .btn--hollow .btn--small :disabled



.btn .btn--hollow .btn--small .btn--has-icon

.btn .btn--secondary .btn--small .btn--has-icon

.btn .btn--hollow .btn--small .btn--has-icon .focus-visible

.btn .btn--hollow .btn--small .btn--has-icon :disabled


Modals





Standard Product Options / Pill Buttons

Color Swatches

Checkboxes

Radio Buttons

Quantity Input

Text/Select Fields

Error microcopy goes here

Sliders

Note that slider documentation lives in the starter theme wiki, and includes extensive documentation on how to use the slider, its accessibility features, and its file structure.

Sliders can be initialized through the markup, by using a data attribute, or they can be initialized in a JS file. The data attribute method is best suited for sliders whose settings need to be controlled via section settings.

Data Attribute Initialization

Slide 1 of 6
Slide 2 of 6
Slide 3 of 6
Slide 4 of 6
Slide 5 of 6
Slide 6 of 6
Slider Controls

Javascript Initialization

Slide 1 of 6
Slide 2 of 6
Slide 3 of 6
Slide 4 of 6
Slide 5 of 6
Slide 6 of 6
Slider Controls