Header classes

Use these classes to style section headers, headlines, or large brand statements. Be sure to use the semantically-correct HTML element alongside these classes; you can use the Header 1 style on a p or the Header 5 style on an h1. Headers 1-3 increase in size between mobile and desktop.

Body classes

Use these classes for styling most content and metadata.

Text alignment

Adjust text alignment with the following classes, or adjust the text alignment at different breakpoints by adding in the breakpoint to the class name in between the property and the value. For example, to center align something on mobile and then to left-align it at md, add the classes pw-text-center pw-text-md-left to the element.

Utilities

WYSIWYG text

WYSIWYG (What You See Is What You Get) text is any content coming from the Shopify CMS that needs styling, usually descriptions or open text fields, like the product description, blog post content, or FAQs content. Normally we use classes to style each element, but the CMS doesn't give us that kind of fine-grained control, so we wrap these classes around the CMS contents and apply default styling to the elements themselves.

Text and fill colors

All text colors are at least 4.5:1 in color contrast. These colors should only be used for text or icons.

Background and fill colors (brand)

Use the background classes to change the background of a div or other container to one of our brand colors. Fill classes can be used to change the color of SVGs. Use pw-text-gray-dark for text on these colors; anything lighter likely won't pass color contrast requirements.

Background and fill colors (UI)

Use the background classes to change the background of a div or other container to one of our UI colors. Fill classes can be used to change the color of SVGs.

Border colors

Set the color of a container's border by adding a border color class. Use in combination with border classes.

Utilities

The standard icon size is 24px by 24px. Small icons (16px by 16px) can be used occasionally if necessary. All of the icons below are available as snippets, and a subset are also available in React. If the icon has any functionality (like a close button), place it in an icon button or a button reset (jump to the buttons section). If the icon isn't decorative, be sure to add a label for screenreaders.

Large icons

We have a few oversized, decorative icons for DIY.

Primary buttons

Primary buttons should be used for the most important action on a page. Typically there should only be one primary button on any given screen so that it stands out.

Secondary buttons

Secondary buttons are used for actions that aren't the most important action on the page, or in the case when there are many actions a user may take.

Icon buttons

Icon buttons are for icons used for actions, like close buttons or left/right arrows.

Reset buttons

Use a reset button when you need to use a button for accessibility or interaction reasons, but you want it to look like plain text or a text link. Note that unlike our typical buttons, you do not need the pw-button class.

Links with arrows

Another link style is using an arrow icon next to a text link. This style combines existing text link classes with SVGs so that the SVG isn't visible to a screenreader and doesn't receive a hover state.

Link reset

Use the link reset when you need to use a text link but you don't want the default link or hover styles on the element. For example, we use link resets on product cards so the text doesn't turn blue or show an underline. Use sparingly and when it's contextually clear that the element you're using it on is interactive.

Labels

Every input field must have a label whether hidden or visible. For visible labels, always use * or Optional on the label to indicate whether the input is required. Add filling instruction at the end of the label when needed. If an asterisk is used, make sure to define the meaning of the asterisks at the start of the form.

For hidden labels, use pw-screenreader-only to visually hide the label.

<label class="pw-header-5 pw-d-inline-block
 pw-m-b-1" for="InputId">Label<span 
 class="pw-label__required">*</span>
</label>

<label class="pw-header-5 pw-d-inline-block
 pw-m-b-1" for="InputId">Label<span 
 class="pw-body-accent pw-text-line-height-tight
  pw-p-l-2">Optional</span>
</label>

<label class="pw-header-5 pw-d-inline-block
 pw-m-b-1" for="InputId">Label<span 
 class="pw-label__required">*</span>
 <span class="pw-body-small 
 pw-text-line-height-tight">Instruction</span>
</label>

<p class="pw-body-medium"> 
  {{ 'general.accessibility.required_field' | t }} 
  <span class="pw-label__required">*</span>
</p>

<label class="pw-screenreader-only"
 for="InputId">Label
</label>

Inputs and textareas

Use the grid classes to size inputs and textareas. Placeholder text is optional, but note that it is not a replacement for using a label. There are many different types of inputs, like email, password, and telephone, depending on what kind of content you're expecting.

Selects

Use the grid classes to size selects. Don't forget to add a label!

Checkboxes

We use custom checkboxes that require specific markup to work properly. Here's an example:

<div class="pw-checkbox">
  <input class="pw-checkbox__input" type="checkbox" value="gift" id="is_gift" checked>
  <label class="pw-checkbox__label" for="is_gift">This is a gift</label>
</div>

Radios

We use custom radios that require specific markup to work properly. Here's an example:

<div class="pw-radio">
  <input class="pw-radio__input" type="radio" name="shipping" id="shipping-standard" value="standard">
  <label class="pw-radio__label" for="shipping-standard">Standard shipping</label>
</div>

Input groups

Input groups are made up of a side-by-side input and button and used for a very small form submission, like a search field or signing up for a newsletter. Use the regular input and button classes, then apply pw-input-group__input and pw-input-group__button, respectively, and wrap them in pw-input-group. Here's an example:

<div class="pw-input-group">
  <label for="text-input-group" class="pw-screenreader-only">Email address</label>
  <input type="email" id="text-input-group" class="pw-input pw-input-group__input" placeholder="Email address">
  <button class="pw-button pw-button--primary pw-button--regular pw-input-group__button" type="button">Sign up</button>
</div>

Action groups

Action groups are a group of related buttons that often behave similarly to radios but are more visually prominent. Currently, we use them for size selection on the PDP and for size filters on PLPs. They have many of the same states as radios (default, selected, disabled) but in some cases, like on the PDP, we want customers to be able to select an unavailable size. Use the action group classes in combination with button classes.

And an example of them all together:

Error and success messages

Error messages should help the user to understand the problem and (or) how to fix it. Inline error messages should be placed directly below the text field to specify the input error. Banner error messages should be placed at the top of the form to provide overall feedback and give possible solutions.

Success messages are used to inform the user of their success submission of the form and give instructions on how to proceed. A success message should be placed at the top of the form.

<span class="pw-d-inline-flex pw-m-t-2 pw-text-red">
  {% render 'icon-error' %}
  <span class="pw-m-l-2 pw-text-line-height-tight">
  Message</span>
</span>

<div class="pw-message pw-message--error">
  {% render 'icon-error' %}
  <p class="pw-message__text">Message</p>
</div>

<div class="pw-message pw-message--success">
  {% render 'icon-success' %}
  <p class="pw-message__text">Message</p>
</div>

<div class="pw-message-with-button pw-message--neutral">
  <div class="pw-message-with-button__message">Message</p>
  <button class="pw-message-with-button__button ...">Icon</button>
</div>

Dropdown trigger button

Use pw-button—secondary or pw-button--primary in combination with pw-dropdown__trigger or pw-dropdown__trigger--open to switch the look of the button for unselected / selected / closed / open states.

Skeleton loaders

Skeleton loaders show the elements of the page that haven't yet loaded in a shape similar to the actual content. For example, we can use a square loader when we're waiting for a product image to load, or a button loader when we're waiting for a size filter to load. Use inline styles to adjust the placeholder to be the size you need. Here's an example; sub in square for any of the shapes below:

<div class="pw-placeholder pw-placeholder--square">
  <div class="pw-placeholder__bg pw-placeholder__bg--animation pw-placeholder--square"></div>
</div>

Spinners

Spinners can be used while entire sections of content are being loaded.

Small overlay

Add pw-overlay--small to the overlay wrapper to resize to a small overlay.

Medium overlay

Add pw-overlay--medium to the overlay wrapper to resize to a medium overlay. Most overlays will probably fall into this category, like the shipping overlay in the cart and the waitlist overlay on the PDP.

Swatch sizes

Set the size of the swatch list by adding the size class to the container.

Swatch states

Set the state of the swatch (selected, unavailable, etc) by adding the state class to the swatch itself. Apply as many classes as needed to create infinite combinations of states. Note that in the swatch JS, we're calculating whether a swatch is light or dark based on the hex color's brightness and applying the appropriate class.

And an example of them all together:

Column grid

The column grid is for creating page layouts, placing content side-by-side, and controlling the width of its contents. It's responsive, meaning that we can change the width of each column at each breakpoint. We use a 12 column grid, so setting a grid width to 12 means that it will be 100% width, setting it to 6 means that it will be 50% wide, and so on.

Create a container with the class pw-grid, then create a series of divs within that and set the grid width classes on them using the following structure: pw-grid__col--[breakpoint]--[width]. By default there are no gutters (the space between each grid item); optionally add pw-grid--gutters-small or pw-grid--gutters-large to the container to add space between each column.

Here are some examples. Change your screen size to see how the grid widths change.

A three-column grid without gutters, with all columns 100% width by default, and then 6/3/3 at the sm breakpoint and above.

<div class="pw-grid">
  <div class="pw-grid__col--12 pw-grid__col--sm--6">A</div>
  <div class="pw-grid__col--12 pw-grid__col--sm--3">B</div>
  <div class="pw-grid__col--12 pw-grid__col--sm--3">C</div>
</div>

A three-column grid with small gutters, defaulting to 12/6/6, and then 4/4/4 at the md breakpoint and above.

<div class="pw-grid pw-grid--gutters-small">
  <div class="pw-grid__col--12 pw-grid__col--md--4">A</div>
  <div class="pw-grid__col--6 pw-grid__col--md--4">B</div>
  <div class="pw-grid__col--6 pw-grid__col--md--4">B</div>
</div>

A two-column grid with large gutters, with all columns 100% width by default, 4/8 at the md breakpoint and then 3/9 at the lg breakpoint and above.

<div class="pw-grid pw-grid--gutters-large">
  <div class="pw-grid__col--12 pw-grid__col--md--4 pw-grid__col--lg--3">A</div>
  <div class="pw-grid__col--12 pw-grid__col--md--8 pw-grid__col--lg--9">B</div>
</div>

Create column offsets (skipping columns) by inserting blank divs the width of the space you want to offset. For example, here's a one-column grid with no gutters that is 100% width by default, 6 columns wide and offset by 3 columns at the md breakpoint and then 4 columns wide and offset by 4 columns at the lg breakpoint and above.

<div class="pw-grid">
  <div class="pw-grid__col--md--3 pw-grid__col--lg--4"></div>
  <div class="pw-grid__col--12 pw-grid__col--md--6 pw-grid__col--lg--4">A</div>
</div>

Block grid

The block grid is used for laying out similar items, such as product cards or photos, in a grid. It's responsive, meaning that we can change the number of items per row at each breakpoint.

Create a container with the class pw-block-grid, then set the grid width classes on the container using the following structure: pw-block-grid--[breakpoint]--[# items per row]. By default there are no gutters (the space between each grid item); optionally add pw-block-grid--gutters-small (what we use for product cards) or pw-block-grid--gutters-large (what we use on the team page) to the container to add space between each block.

Here are some examples. Change your screen size to see how the grid widths change.

A block grid that's 2 across at xs, 4 across at md, and 6 across at lg and above with no gutters.

<div class="pw-block-grid pw-block-grid--2 pw-block-grid--md--4 pw-block-grid--lg--6">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

A block grid that's 2 across at xs, 3 across at md, and 4 across at lg and above with small gutters.

<div class="pw-block-grid pw-block-grid--2 pw-block-grid--md--4 pw-block-grid--lg--6 pw-block-grid--gutters-small">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

A block grid that's 2 across at xs and 4 across at md and above with large gutters.

<div class="pw-block-grid pw-block-grid--2 pw-block-grid--md--4 pw-block-grid--gutters-large">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Use border classes to add or hide a border in any direction. The border class shorthand is pw-b-{direction}-{width}. For example, pw-b-r-1 adds a border to the right-hand side of the element.

Here are some examples:

Margin and padding

Combine multiple margin and padding classes to set the spacing you need at each breakpoint. Margin and padding classes use a shorthand pw-{property}-{direction}-{breakpoint}-{amount}, such as pw-m-l-md-4 or pw-p-b-2. Use the breakpoint to control the spacing at different screen sizes. The breakpoints are mobile-first, so if you don't indicate a breakpoint, it will apply at xs and up.

Here are some examples:

Display

Change the display property of an element with display classes, and combine them to set the display you need at each breakpoint. Display classes use a shorthand pw-d-{breakpoint}-{value}, such as pw-d-sm-block or pw-d-none. Use the breakpoint to control the display at different screen sizes. The breakpoints are mobile-first, so if you don't indicate a breakpoint, it will apply at xs and up.

Accessibility

These classes provide functionality specifically for keyboard navigation and screenreaders.

Lists

Add list classes to the ul or ol, then control the spacing between each list item with margin or padding classes.

Z-index

Add z-index utilities to set the z-index of an element. With z-index, less is more; don't use a z-index of 30 if 1 will do! Don't forget to set the position of an element when using z-index.