Styleguide | Primary.com Skip to content

Primary styleguide

For a more in-depth overview of how we do CSS, refer to the CSS guidelines on Confluence.

Typography

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.

Class name Example
pw-header-1

Live your true colors.

pw-header-2

You May Also Like

pw-header-3

Short Sleeve Tees

pw-header-4

Product details

pw-header-5

Shop by color

Body classes

Use these classes for styling most content and metadata.

Class name Example
pw-body-large

At Primary, we are inspired by simplicity. Instead of chasing trends, we focus on timeless essentials every kid needs in a rainbow of vibrant colors. This focus allows us to offer the best price and also an easy shopping experience for busy parents. If there's a style or color you think we're missing, let us know!

pw-body-medium

At Primary, we are inspired by simplicity. Instead of chasing trends, we focus on timeless essentials every kid needs in a rainbow of vibrant colors. This focus allows us to offer the best price and also an easy shopping experience for busy parents. If there's a style or color you think we're missing, let us know!

pw-body-small

Having trouble? Reach out by emailing help@primary.com or calling 1-844-435-5675.

pw-body-accent-large

$121.50

pw-body-accent

Purchased: Classic tee, watermelon, 8-9

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.

Class name Example
pw-text-left

Left-aligned text

pw-text-center

Center-aligned text

pw-text-right

Right-aligned text

Utilities

Class name Example
pw-text-strong

Bold text

pw-text-line-through

Line through text

pw-text-overflow-ellipsis

This class will add an ellipsis and hide contents when a width is set.

pw-text-nowrap

Prevent text from wrapping to two lines.

pw-text-break-word

Force a word to break onto two lines.

pw-text-line-height-normal

This is the default, loose, easy-to-read line-height for multiple lines of text. This is the default, loose, easy-to-read line-height for multiple lines of text.

pw-text-line-height-tight

Adding this class will tighten the line-height of your text. Useful for text fragments or anything that isn't a paragraph of text.

pw-text-line-height-tightest

Adding this class will tighten the line-height of your text to be as tight as possible. Use rarely, as it can be difficult to read.

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.

Class name Example
pw-text-wysiwyg

At Primary, we believe there’s no wrong way to holiday. We asked the families who modeled our mix-and-match family PJs how they make the season their own, whether that's doing the *most* or nothing at all. Read on for their holiday lightning rounds.

The Kim Family

  • It's not the holidays without: hot chocolate
  • Movie night or sing-along? Movie night
  • Favorite holiday food? Pumpkin pie
  • A non-traditional tradition? Watch a movie on Christmas Day.
  • PJs or dress-up? PJs

Valentine’s Day is right around the corner, and we’re here for any reason to celebrate the kids we love. Here are a few gift ideas we’ve rounded up, all unsponsored from some of our favorite brands, large and small. Happy gifting!

pw-text-wysiwyg--link--primary
pw-text-wysiwyg--link--secondary

Colors

Text and fill colors

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

Class name Example
pw-text-gray-dark

Gray dark

pw-text-gray-light

Gray light

pw-text-white

White

pw-text-red

pw-fill-red

Red

pw-text-blue

Blue

pw-text-green

pw-fill-green

Green

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.

Jam

pw-bg-jam

pw-fill-jam

Heart

pw-bg-heart

pw-fill-heart

Clay

pw-bg-clay

pw-fill-clay

Peach

pw-bg-peach

pw-fill-peach

Twig

pw-bg-twig

pw-fill-twig

Yolk

pw-bg-yolk

pw-fill-yolk

Sun

pw-bg-sun

pw-fill-sun

Sand

pw-bg-sand

pw-fill-sand

Pine

pw-bg-pine

pw-fill-pine

Grass

pw-bg-grass

pw-fill-grass

Leaf

pw-bg-leaf

pw-fill-leaf

Sprout

pw-bg-sprout

pw-fill-sprout

Night

pw-bg-night

pw-fill-night

Rain

pw-bg-rain

pw-fill-rain

Wave

pw-bg-wave

pw-fill-wave

Mist

pw-bg-mist

pw-fill-mist

Grape

pw-bg-grape

pw-fill-grape

Dusk

pw-bg-dusk

pw-fill-dusk

Plum

pw-bg-plum

pw-fill-plum

Bloom

pw-bg-bloom

pw-fill-bloom

Punch

pw-bg-punch

pw-fill-punch

Gum

pw-bg-gum

pw-fill-gum

Rose

pw-bg-rose

pw-fill-rose

Spring

pw-bg-spring

pw-fill-spring

Storm

pw-bg-storm

pw-fill-storm

Rock

pw-bg-rock

pw-fill-rock

Fog

pw-bg-fog

pw-fill-fog

Cloud

pw-bg-cloud

pw-fill-cloud

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.

Gray dark

pw-bg-gray-dark

pw-fill-gray-dark

White

pw-bg-white

pw-fill-white

Red

pw-bg-red

Green

pw-bg-green

Border colors

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

Class name Example
pw-b-gray-dark

Gray dark border

Utilities

Class name Example
pw-fill-inherit

Set the fill color to inherit

pw-fill-currentcolor

Set the fill color to currentColor

Icons

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.

icon-bag

icon-call

icon-chevron-left

icon-chevron-right

icon-close

icon-email

icon-error

icon-facebook

icon-has-instructions

icon-has-instructions-small

icon-instagram

icon-last-minute

Last minute

icon-last-minute-small

icon-link-arrow-left

icon-link-arrow-right-large

icon-link-arrow-right

icon-link-arrow-up

icon-make-together

Make together

icon-make-together-small

icon-menu

icon-minus

icon-no-sew

No-sew

icon-no-sew-small

icon-pause

icon-pinterest

icon-play

icon-plus

icon-search

icon-success

icon-sustainable

icon-text

icon-twitter

icon-video

Video

icon-video-small

icon-yotpo-star--empty

icon-yotpo-star--full

icon-yotpo-star--half

Large icons

While most of our icons are shown at 24px by 24px, we have a few oversized, decorative icons for DIY.

icon-has-instructions-large

icon-last-minute-large

icon-make-together-large

icon-no-sew-large

icon-video-large

Buttons

Use the below classes to style either button elements or a anchor links to look like a button. buttons should be used for anything with interactivity, like triggering an overlay or changing a carousel frame, and a anchor links should be used for navigating to another page or jumping to another spot on the same page.

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.

Class name Example
pw-button pw-button--primary pw-button--regular
pw-button pw-button--primary pw-button--small
disabled

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.

Class name Example
pw-button pw-button--secondary pw-button--regular
pw-button pw-button--secondary pw-button--small
disabled

Icon buttons

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

Class name Example
pw-button pw-button--icon pw-button--icon--transparent
disabled

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.

Class name Example
pw-button--reset
pw-button--reset pw-link--primary

Forms

Forms have a lot of accessibility considerations, so please read through the accessibility guidelines to make sure you're implementing new forms with best practices in mind.

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. For hidden labels, use pw-screenreader-only to visually hide the label.

Label type Example
Required
<label class="pw-header-5 pw-d-inline-block
 pw-m-b-1" for="InputId">Label<span 
 class="pw-label__required">*</span>
</label>
Optional
<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>
With filling instruction
<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>
Hidden label
<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.

Class name Example
pw-input
pw-textarea
disabled
disabled
pw-input pw-input--error
pw-textarea pw-textarea--error

Selects

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

Class name Example
pw-select
disabled
pw-select pw-select--error

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>
Class name Example
Unchecked checkbox
Checkbox set to checked
Unchecked checkbox set to disabled
Checkbox set to checked and disabled

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>
Class name Example
Unchecked radio
Radio set to checked
Radio with multiple lines
Radio set to disabled
Radio set to checked and disabled

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" name="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>
Class name Example
Default input group
Input group with pw-input--error

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.

Class name Example
pw-action-group__item pw-button pw-button--secondary pw-button--small
pw-action-group__item pw-button pw-button--secondary pw-button--small pw-action-group__item--selected
pw-action-group__item pw-button pw-button--secondary pw-button--small pw-action-group__item--disabled
pw-action-group__item pw-button pw-button--secondary pw-button--small pw-action-group__item--selected pw-action-group__item--disabled

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.

Error type Example
Inline error message
<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>
No account found with that email.
Banner error message
<div class="pw-message pw-message--error">
  {% render 'icon-error' %}
  <p class="pw-message__text">Message</p>
</div>

The email and password you entered did not match our records. Please check and try again.

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

We’ve sent you an email with a link to update your password, if an account with that email exists. Contact us if you don't receive an email.

Loaders

Use loading states to let users know something is happening while the content is being loaded or an action is being performed.

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>
Class name Example
pw-placeholder--square
pw-placeholder--circle
pw-placeholder--button

Spinners

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

Class name Example
{% render 'spinner' %}

Overlays

Overlays are made up of a few pieces:

  • Mask pw-overlay__mask: Creates the transparent mask behind the overlay.
  • Wrapper pw-overlay: Wraps around the contents of the overlay.
  • Header pw-overlay__header: Container for the heading and, optionally, a close button.
  • Body pw-overlay__body: Container for the contents of the overlay.
  • Footer pw-overlay__footer: Optional footer container for buttons, like save or cancel.
<div class="pw-overlay__mask">
  <div class="pw-overlay pw-overlay--medium">
    <div class="pw-overlay__header">Overlay header, close button</div>
    <div class="pw-overlay__body">Overlay contents</div>
    <div class="pw-overlay__footer">Overlay footer</div>
  </div>
</div>

Small overlay

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

Are you sure?

Are you sure you want to proceed?

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.

Shipping options

We currently ship to the U.S. only. Orders placed M-F by 2pm ET ship the same day. Otherwise, orders ship next business day.

* For Alaska and Hawaii, standard shipping may take 12-16 business days and overnight shipping is unfortunately not available. For APO / FPO / DPO addresses, standard shipping can take up to 35 days and express options are not currently available.

Swatches

Swatches are used to represent color options for a product on product cards and the PDP, and color filter options on PLPs.

<ul class="pw-swatch-list pw-swatch-list--medium pw-list--unstyled">
  <li class="pw-swatch-list__swatch"><svg...></li>
  <li class="pw-swatch-list__swatch pw-swatch-list__swatch--selected"><svg...></li>
  <li class="pw-swatch-list__swatch pw-swatch-list__swatch--unavailable"><svg...></li>
</ul>

Swatch sizes

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

Class name Example
pw-swatch-list--small
pw-swatch-list--medium
pw-swatch-list--large

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.

Class name Example
Default
Light swatch pw-swatch-list__swatch--light
Selected pw-swatch-list__swatch--selected
Selected light swatch
Unavailable pw-swatch-list__swatch--unavailable
Unavailable light swatch
Unavailable dark swatch pw-swatch-list__swatch--dark
Unavailable + selected
Unavailable + selected dark swatch
Preview swatch (only visible to admin) pw-swatch-list__swatch--preview
Preview + selected

And an example of them all together:

Tooltips

We use a library called Tippy to render tooltips and to handle considerations for accessibility and mobile.

Class name Example
pw-tooltip plus data-tippy-content="Tooltip text"

Product cards

The product card text is styled with typography and utility classes, and we apply a class to the image pw-product-card__img to give the card its hover state. Use the block grid classes to adjust the size of product cards at each breakpoint.

Class name Example
<div class="pw-product-card">
  <a href="" class="pw-link--reset pw-d-block">
    <div class="pw-product-card__img">
      <img ...>
    <div>
    ...
  </a>
</div>
Vintage pocket tee in green apple

Vintage pocket tee

$14.00

Green apple

Grids

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
B
C

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
B
C

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>
A
B

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>
A

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>

Tables

Tables are used for presenting tabular data, like the Add to cart notification, Shipping information overlay, and Order summary in cart. A table should always have a table head thead and a table body tbody. If you wish to create a table that has an invisible table header, use pw-screenreader-only to keep the header visible to screen readers but invisible to people. Use padding classes to adjust the spacing within table cells if necessary.

Table style Example
Default
<table class="pw-table">
  <thead>...</thead>
  <tbody>...</tbody>
</table>
Size Height (in.) Weight (lb.)
2 33-35 30-33
3 35-38 33-36
4 38-40 36-39
Bordered
<table class="pw-table pw-table--bordered">
  <thead>...</thead>
  <tbody>...</tbody>
</table>
Size Height (in.) Weight (lb.)
2 33-35 30-33
3 35-38 33-36
4 38-40 36-39
Striped and bordered
<table class="pw-table pw-table--striped
  pw-table--bordered">
  <thead class="pw-bg-sprout">...</thead>
  <tbody>...</tbody>
</table>
Size Height (in.) Weight (lb.)
2 33-35 30-33
3 35-38 33-36
4 38-40 36-39
Hidden header
<table class="pw-table">
  <thead class="pw-screenreader-only">...</thead>
  <tbody>...</tbody>
</table>
Size Height (in.) Weight (lb.)
2 33-35 30-33
3 35-38 33-36
4 38-40 36-39

Borders

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.

Border Direction Width
pw-b-

a-

t-

r-

b-

l-

0

1

Here are some examples:

Class name Example
pw-b-l-1
Left-hand border
pw-b-a-1
Border on all sides
pw-b-t-1 pw-b-b-1
Top and bottom borders

Utilities

Utility classes are classes that serve one purpose. Use these classes in combination with all of the other styleguide classes to create complex, responsive layouts without needing to write new CSS. Here are some of the more commonly-used utilities; for the full list of utility classes, view _utilities.scss in your code editor.

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.

Property Direction Breakpoint Amount

pw-m-

pw-p-

a-

t-

r-

b-

l-

sm-

md-

lg-

xl-

0

1

2

3

4

5

6

7

8

9

auto (margin only)

Here are some examples:

Class name Example
pw-p-l-2 2 units of left padding at all screen sizes
pw-m-b-3 pw-m-b-md-6 3 units of bottom margin by default, then 6 units of bottom margin at the md breakpoint
pw-p-t-5 pw-p-t-sm-0 5 units of top padding by default, then no top padding at the sm breakpoint

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.

Display Breakpoint Value

pw-d-

sm-

md-

lg-

xl-

none

inline

inline-block

block

flex

inline-flex

Accessibility

These classes provide functionality specifically for keyboard navigation and screenreaders.

Class name Example
pw-screenreader-only Visually hide an element, but still allow a screenreader to see it. Useful for providing text labels for screenreaders.
pw-focus-hidden Only show an element when it's :focused. Powers the "Skip to content" link in the nav.

Lists

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

Class name Example
Default
  • Newborn
  • Bodysuits
  • Tees
pw-list--unstyled
  • Newborn
  • Bodysuits
  • Tees
pw-list--inline
  • Newborn
  • Bodysuits
  • Tees

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.

Class name Example
pw-z-index-0 Set z-index to 0
pw-z-index-1 Set z-index to 1
pw-z-index-10 Set z-index to 10. Used for search autocomplete dropdown.
pw-z-index-20 Set z-index to 20. Used for cart popup, mobile nav drawer.
pw-z-index-30 Set z-index to 30. Used for desktop nav drawer, dropdowns.