Walmart Web Style Guide

1 Containers #

The .container class is used to horizontally constrain content at the highest level. It has an exact width of 1024px. It should be used to wrap all content, ensuring that it stays within the maximum width of the page. Also includes padding on the left and right side to prevent content from resting against the edge of small screens.

In this example, the blue background on .module spans the width of the screen, while the .container inside constrains content to the target width. The .fullwidth class on .module gives the containing element a minimum width equal to our minimum page width. This prevents an issue where the background doesn't extend to the edge of the page when the browser is more narrow than the page and a user scrolls to the right.

<div class="module fullwidth" style="background: blue;">
  <div class="container">
    <p>Content goes here.</p>
  </div>
</div>

In this example, .container can be the top level element because there is no background (or border, or other visual treatment) that must span the screen outside of the width of the container.

<div class="container">
  <p>Content without a background goes here.</p>
</div>

Responsive Container

The .container-responsive class is deprecated. Use .ResponsiveContainer instead.

The .ResponsiveContainer class is used to constrain responsive-ready content at the highest level. It should be used to wrap all responsive-ready content.

NOTE: Do not use .ResponsiveContainer in combination with .container.

When the .responsive class is present on the <body>, the .ResponsiveContainer has media queries for all of the Responsive Breakpoints. Additionally, the padding on the left and right side of the container will adjust for each breakpoint according to the UX Responsive Grid guidelines. This will prevent content from resting against the edge of small screens.

When the .no-responsive class is present on the <body>, the .ResponsiveContainer defaults to the $breakpoint-l width and padding sizes. It has one media query for $breakpoint-xl sizes.

<div class="ResponsiveContainer">
  <p>Responsive-ready content goes here.</p>
</div>

2 Layout #

2.5 FlexStack #

Uses a vertical FlexBox to "bookend" elements before and after a flexible-height content element.

Notes

  • Browser support currently dictates that this only be used for cosmetic enhancements and not critical layout styles
<div class="FlexStack" style="height: 200px;">
  <h3>Items</h3>
  <div class="FlexStack-body well scrollable">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <span>10 items total</span>
</div>

Items

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
10 items total

2.1 Grid #

The responsive grid system is fluid-width, supports our global major breakpoints, and is based on the SUIT CSS Grid. It is built with display: inline-block instead of a traditional float-based approach. This allows for greater flexibility. For example, columns can be aligned to the left, right, or center, can use various vertical-alignments, and can be reversed for left-to-right language support.

To use the grid, create a .Grid element to contain columns, and add .Grid-col elements with size utilities applied to create columns. For information on the size utility, see Size.

<div class="Grid">
  <div class="Grid-col u-size-1-2"></div>
  <div class="Grid-col u-size-1-4"></div>
  <div class="Grid-col u-size-1-4"></div>
</div>
Default
1-2
1-2
1-3
1-3
1-3
1-4
1-4
1-4
1-4
1-5
1-5
1-5
1-5
1-5
1-6
1-6
1-6
1-6
1-6
1-6
1-8
1-8
1-8
1-8
1-8
1-8
1-8
1-8
1-10
1-10
1-10
1-10
1-10
1-10
1-10
1-10
1-10
1-10
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12

Gutters

To add default gutters to a grid, add the .Grid--gutters modifier class to the .Grid element. Default gutters adjust for various screen sizes.

<div class="Grid Grid--gutters">...</div>
1-2
1-4
1-4

Nested Grids

Grids can also be nested.

<div class="Grid">
  <div class="Grid-col u-size-1-2"></div>
  <div class="Grid-col u-size-1-2">
    <div class="Grid Grid--gutters">
      <div class="Grid-col u-size-1-3"></div>
      <div class="Grid-col u-size-2-4"></div>
    </div>
  </div>
</div>
1-2
1-3
2-3

Offset Columns

Individual columns can be offset to create gaps in the grid. For example, adding .u-offset-1-2 to a column will push it halfway across the container.

<div class="Grid">
  <div class="Grid-col u-size-1-2 u-offset-1-2"></div>
</div>
1-2

Responsive Grids

For ease of responsive design, we supply versions of the grid tuned to our major CSS media query breakpoints (see Responsive Breakpoints).

To start a grid, use normal .u-size-[col-width] elements for your columns. The width declared here will apply for all screen sizes. From there, add additional classes to target progressively larger screens. Adding u-size-1-2-m will apply the new column width to any devices larger than the $breakpoint-m breakpoint.

Thorough Example:

<div class="Grid">
  <div class="Grid-col u-size-1-2 u-size-1-4-m u-size-1-3-l u-size-1-6-xl"></div>
  <div class="Grid-col u-size-1-2 u-size-1-4-m u-size-1-3-l u-size-1-6-xl"></div>
  <div class="Grid-col u-size-1-2-m u-size-1-3-l u-size-1-3-xl u-offset-1-3-xl"></div>
</div>

This structure of this grid shifts dramatically between breakpoints.

On screens more narrow than $breakpoint-m it renders two columns that are half the width of the page (.u-size-1-2) and one full width column below it.

After the first breakpoint, it renders two columns that are one fourth as wide as the page (.u-size-1-4-m) with a third next to them that is half the width (.u-size-1-2-m).

After the second breakpoint, it renders three columns that are one third of the screen width (.u-size-1-3-l).

After the third breakpoint, it renders two columns that are one sixth of the screen width (.u-size-1-6-xl) and a third that is one third (u-size-1-3-xl) that is pushed three columns to the right, leaving a 3 column blank space between it and the other columns (u-offset-1-3-xl).

This example is thorough but contrived. More realistic usage might look something like this:

<div class="Grid Grid--gutters">
  <div class="Grid-col u-size-1-2 u-size-1-4-l"></div>
  <div class="Grid-col u-size-1-2 u-size-1-4-l"></div>
  <div class="Grid-col u-size-1-2-l"></div>
</div>

2.2 Deprecated Grid #

This grid system is deprecated. See the above grid system.

The grid system is fluid and spans 12 columns. By default, the grid does not include gutters so that they may be added manually depending on individual designs.

The .grid container should not have any additional classes or styles applied to it. That way lies madness (and a good chance that the grid will break). Tempting as it is, avoid simply adding the .grid class to another element unless necessary.

<div class="grid">
  <div class="col2"></div>
  <div class="col4"></div>
  <div class="col6"></div>
</div>
.col1
.col11
.col2
.col10
.col3
.col9
.col4
.col8
.col5
.col7
.col6
.col6

Padded Columns

To add gutters to the grid, add the .grid-padded class to the .grid element. The gutters are fluid and adjust with screen size.

<div class="grid grid-padded">...</div>
.col2
.col2
.col2
.col2
.col2
.col2
.col3
.col4
.col5
.col6
.col6

Nested Columns

Grids can also be nested. When nesting grids, the grid is based on the width of its parent element, not the base grid size. This means that columns and gutters will be more narrow in nested grids.

<div class="grid">
  <div class="col6"></div>
  <div class="col6">
    <div class="grid grid-padded">
      <div class="col4"></div>
      <div class="col8"></div>
    </div>
  </div>
</div>
.col6
.col4
.col8

Offset Columns

Individual columns can be offset to create gaps in the grid.

<div class="grid">
  <div class="col4 guide-grid-col">.col6</div>
  <div class="col6 offset2 guide-grid-col">
    <div class="grid grid-padded">
      <div class="col4 guide-grid-col-nested">.col4</div>
      <div class="col5 offset3 guide-grid-col-nested">.col5</div>
    </div>
  </div>
</div>
.col6
.col4
.col5

Responsive Grids

For ease of responsive design, we supply versions of the grid tuned to our major CSS media query breakpoints (see Responsive Breakpoints).

To start a grid, use un-prefixed .col[col-width] elements for your columns. The width declared here will apply for all screen sizes. From there, add additional classes to target progressively larger screens. Adding .m-col[col-width] will apply the new column width to any devices larger than the $screen-m breakpoint.

Thorough Example:

<div class="grid">
  <div class="col6 m-col3 l-col4 xl-col2"></div>
  <div class="col6 m-col3 l-col4 xl-col2"></div>
  <div class="col12 m-col6 l-col4 xl-col4 xl-offset4"></div>
</div>

This structure of this grid shifts dramatically between breakpoints.

On screens more narrow than $screen-m (our base size), it renders two columns that are half the width of the page (.col6) and one full width column below it (.col12).

After the first breakpoint, it renders two columns that are one fourth as wide as the page (.m-col3) with a third next to them that is half the width (.m-col6).

After the second breakpoint, it renders three columns that are one third of the screen width (.l-col4).

After the third breakpoint, it renders two columns that are one sixth of the screen width (.xl-col2) and a third that is one third (.xl-col4) that is pushed three columns to the right, leaving a 3 column blank space between it and the other columns (.xl-offset4).

This example is thorough but contrived. More realistic usage might look something like this:

<div class="grid">
  <div class="col6 l-col3"></div>
  <div class="col6 l-col3"></div>
  <div class="col12 l-col6"></div>
</div>

2.3 Arrange #

The arrange system (adapted from SUIT CSS components-arrange) controls horizontal and vertical alignment within a single row of cells. There are modifier classes for equal-width cells and for adding a gutter between cells.

The row shrink-wraps content of .arrange-fit and fills remaining space with content of .arrange-fill.

Usage

The .arrange class must only contain .arrange-fit and .arrange-fill child nodes.

It is recommended to use only one .arrange-fill in the single row, unless you are using the modifier for equal-width cells. The first .arrange-fill will not share the extra space with any subsequent .arrange-fill classes.

<div class="arrange">
  <div class="arrange-fit"></div>
  <div class="arrange-fill"></div>
</div>
.arrange-fit
.arrange-fill

Middle-aligned content

To add middle-align cells, add .arrange-middle to the .arrange element.

<div class="arrange arrange-middle">
  <div class="arrange-fit"></div>
  <div class="arrange-fill"></div>
</div>
.arrange-fit
.arrange-fill

Bottom-aligned content

To add bottom-align cells, add .arrange-bottom to the .arrange element.

<div class="arrange arrange-bottom">
  <div class="arrange-fit"></div>
  <div class="arrange-fill"></div>
</div>
.arrange-fit
.arrange-fill

Cells with gutters

To add gutters to the cells, add .arrange-spaced to the .arrange element.

Caution: this can trigger a horizontal scrollbar if the component is as wide as the viewport. Use padding on a container, or overflow-x:hidden to protect against it.

<div class="arrange arrange-spaced">
  <div class="arrange-fit"></div>
  <div class="arrange-fill"></div>
  <div class="arrange-fit"></div>
</div>
content of .arrange-fit
content of .arrange-fill
content of .arrange-fit

Cells with equal spacing

To add equal spacing between cells without adding a gutter, add .arrange-equal-spacing to the .arrange element.

<div class="arrange arrange-equal-spacing">
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
</div>
.arrange-fill
A
.arrange-fill
Beta Bananas
.arrange-fill
Gremlins, goblins and ghouls

Equal-width cells

For equal-width cells, add .arrange-equal to the .arrange element.

<div class="arrange arrange-equal">
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
</div>
.arrange-fill
A
.arrange-fill
Beta Bananas
.arrange-fill
Gremlins, goblins and ghouls

Equal-width cells with gutters

To add gutters to equal-width cells, add .arrange-spaced to the .arrange element.

<div class="arrange arrange-equal arrange-spaced">
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
  <div class="arrange-fill"></div>
</div>
content of .arrange-fill
content of .arrange-fill
content of .arrange-fill
content of .arrange-fill

Media object and Flag objects

Use .arrange as a replacement for the .media or .flag objects. Doing so will allow greater control over the vertical-alignment.

To use, add .arrange-media-object to the cell, which adds a padding-right.

Read more about the beautiful properties of laying out the Media Object and Flag Object in this way.

<div class="arrange arrange-middle">
  <div class="arrange-fit arrange-media-object"></div>
  <div class="arrange-fill"></div>
</div>
Panda Backpack

2.4 Stack #

The Stack micro-component is similar to the Arrange system, but for vertical table rows. There are no additional modifier classes for stack.

<div class="stack">
  <div class="stack-fit">
    <div class="stack-cell"></div>
  </div>
  <div class="stack-fill">
    <div class="stack-cell"></div>
  </div>
  <div class="stack-fit">
    <div class="stack-cell"></div>
  </div>
</div>
.stack-fit .stack-cell
.stack-fill .stack-cell
.stack-fit .stack-cell

3 Modules and Margins #

To move individual elements or components around the page without the use of the grid system, prefer margin-top for vertical spacing and margin-left for horizontal spacing.

Vertical Margins

To minimize issues with collapsing margins and to normalize spacing, block level elements include margin-top without margin-bottom. This ensures even padding on the bottom of content areas (unaffected by element or component margins), and allows us to remove the margin from the first element or component in a module with a :first-child selector, making it easy to add padding to a content area without the content affecting adding additional space.

Modules

To facilitate this, we add the .module class to content containers. This class removes the margin-top from the first element in a module, ensuring even spacing. The .module class can be applied to elements with other classes and styles freely.

Horizontal Margins

When spacing elements horizontally, apply margin-left instead of margin-right and remove the margin from the first element with :first-child.

If a collection of horizontal elements should wrap but should not be built with the grid system, do not remove margin-left from the first child, but apply a negative margin equal to the margin-left to the container element.

.example-list {
  margin-left: -24px;

  li {
    margin-left: 24px;
  }
}
<ul class="example-list">
  <li>Example List Item 1</li>
  <li>Example List Item 2</li>
</ul>

If the container element has its own styles, it may be necessary to add an additional wrapper with the negative margin inside of the parent.

4 Variables #

4.1 Colors #

  • Primary Orange

    #f47421 $orange
  • #f58238 $orange-hover
    #db681e $orange-active
  • Primary Blue

    #007dc6 $blue
  • #3da1e0 $blue-hover
    #0070b2 $blue-active
  • Secondary Blue

    #79b9e7 $blue-secondary
  • #98cffd $blue-secondary-hover
    #6da6cf $blue-secondary-active
  • Tertiary Blue

    #9ed6fa $blue-tertiary
  • #a8dafb $blue-tertiary-hover
    #8ec0e1 $blue-tertiary-active
  • Pale Blue

    #dfebed $blue-pale
  • #e2edef $blue-pale-hover
    #c8d3d5 $blue-pale-active
  • Cool Grey

    #c2cfd6 $grey-cool
  • #c8d4da $grey-cool-hover
    #aebac0 $grey-cool-active
  • Light Blue

    #f2f8fd $blue-light
  • Primary Yellow

    #ffc120 $yellow
  • #ffcc46 $yellow-hover
  • Secondary Yellow

    #ffd76e $yellow-secondary
  • Primary Green

    #76c143 $green
  • Primary Red

    #f42121 $red
  • Secondary Red

    #f1252c $red-secondary
  • Primary White

    #fff $white
  • Primary Black

    #222 $black
  • Dark Grey

    #444 $grey-dark
  • Medium Grey

    #888 $grey-medium
  • Light Grey

    #d9d9d9 $grey-light
  • Very Light Grey

    #e9e9e9 $grey-very-light

4.2 Responsive Breakpoints #

We use five major breakpoints in Atlas. These breakpoints are primarily meant for use in min-width "mobile-first" media queries:

// Applies to screens wider than or equal to 768px.

.component {
  @media (min-width: $breakpoint-m) {
    display: inline-block;
    border-radius: 4px;
  }
}

In cases where max-width "desktop-first" media queries are necessary, use the accompanying -max variants of the breakpoint media queries:

// Applies to screens more narrow than the "large" breakpoint of 1024px.

.component {
  @media (max-width: $breakpoint-m-max) {
    display: inline-block;
    border-radius: 4px;
  }
}

Each -max variable is 1px more narrow than the next largest breakpoint, preventing overlap between min-width and max-width media queries.

Default Extra Small Small Medium Large Extra Large
Screen Sizes < 320px >= 320px >= 480px >= 768px >= 1024px >= 1364px
Variable None $breakpoint-xs $breakpoint-s $breakpoint-m $breakpoint-l $breakpoint-xl
Max-width Variable None $breakpoint-xxs-max $breakpoint-xs-max $breakpoint-s-max $breakpoint-m-max $breakpoint-l-max

4.3 Deprecated: Responsive Breakpoints #

These variables are deprecated in favor of the new breakpoint set above.

We use four major breakpoints in Atlas. These breakpoints are primarily meant for use in min-width "mobile-first" media queries:

// Applies to screens wider than or equal to than 768px.

.component {
  @media (min-width: $screen-m) {
    display: inline-block;
    border-radius: 4px;
  }
}

In cases where max-width "desktop-first" media queries are necessary, use the accompanying -max variants of the breakpoint media queries:

// Applies to screens more narrow than the "large" breakpoint of 768px.

.component {
  @media (max-width: $screen-m-max) {
    display: inline-block;
    border-radius: 4px;
  }
}

Each -max variable is 1px more narrow than the next largest breakpoint, preventing overlap between min-width and max-width media queries.

Default (Small) Medium Large Extra Large Extra Extra Large
Screen Sizes < 544px >= 544px >= 768px >= 992px >= 1366px
Variable None $screen-m $screen-l $screen-xl $screen-xxl
Max-width Variable None $screen-s-max $screen-m-max $screen-l-max $screen-xl-max

4.4 Spacing #

Spacing between and within different elements can be achieved with the -spacing variables. This ensures consistent spacing throughout the page, and opens up the process for responsive spacing in the (near) future.

Each variable is a non-responsive, fixed unit.

// Applies 20px of top margin and 4px of left margin, and
// applies 8px padding on all sides.

.component {
  margin-top: $m-spacing;
  margin-left: $xxs-spacing;
  padding: $xs-spacing;
}
Extra Extra Small Extra Small Small Medium Large Extra Large Extra Extra Large
Size 4px 8px 12px 20px 32px 48px 60px
Spacing variable $xxs-spacing $xs-spacing $s-spacing $m-spacing $l-spacing $xl-spacing $xxl-spacing

5 Icons #

Use the Walmarticons icon font for single color iconography. There are two methods for including icons on a page. Usually, you'll want to use the .wmicon- classes on <i> elements. For example, to display a cart icon, use the following HTML: <i class="wmicon wmicon-cart"></i>.

You can also reference icons in stylesheets through Stylus mixins. To include an icon this way, add the following mixins to a style block:

walmarticons();
wmicon("cart");

The walmarticons() mixin adds required rules for the icon font, and the wmicon() mixin references a particular icon. This is useful when toggling icons depending on user interface state, or when icons should be part of a component by default.

Adding Icons

To add an icon to Walmarticons:

  1. Using a font editor like Glyphs Mini, copy and paste icon outlines from Adobe Illustrator or another icon font into Walmarticons.
  2. Export the font file as an .otf file, and convert it to webfonts using the Font Squirrel Webfont Generator with the following settings:
Expert

Font Formats:
- TrueType
- WOFF
- EOT Compressed

Truetype Hinting: Font Squirrel

Rendering:
- Fix Vertical Metrics
- Fix GASP Table

Fix Missing Glyphs: None

X-height Matching: None

Subsetting: No Subsetting

Advanced Options:
- Font Name Suffix: None
- Em Square Value: 1792
- Adjust Glyph Spacing: 0
  • .wmicon-cart
  • .wmicon-list
  • .wmicon-gift
  • .wmicon-pin
  • .wmicon-card
  • .wmicon-search
  • .wmicon-help
  • .wmicon-zoom
  • .wmicon-zoom-out
  • .wmicon-menu
  • .wmicon-grid
  • .wmicon-lock
  • .wmicon-package
  • .wmicon-truck
  • .wmicon-print
  • .wmicon-mail
  • .wmicon-twitter
  • .wmicon-pinterest
  • .wmicon-facebook
  • .wmicon-youtube
  • .wmicon-google-plus
  • .wmicon-instagram
  • .wmicon-vudu
  • .wmicon-vudu-alt
  • .wmicon-mobile
  • .wmicon-add-to-cart
  • .wmicon-add-to-list
  • .wmicon-store
  • .wmicon-add
  • .wmicon-weekly-ad
  • .wmicon-angle-left
  • .wmicon-angle-right
  • .wmicon-ok
  • .wmicon-exclamation-circle
  • .wmicon-caret-down
  • .wmicon-caret-up
  • .wmicon-remove
  • .wmicon-play
  • .wmicon-ban-circle
  • .wmicon-spark
  • .wmicon-trophy
  • .wmicon-star
  • .wmicon-user
  • .wmicon-thumbs-up
  • .wmicon-comment
  • .wmicon-play-circle
  • .wmicon-new-window
  • .wmicon-thumbs-alt-up
  • .wmicon-thumbs-alt-down
  • .wmicon-flag
  • .wmicon-modal
  • .wmicon-clock
  • .wmicon-savings-catcher
  • .wmicon-gift-card
  • .wmicon-credit-card
  • .wmicon-membership
  • .wmicon-pharmacy
  • .wmicon-laptop
  • .wmicon-heart
  • .wmicon-plane
  • .wmicon-user-alt
  • .wmicon-bag
  • .wmicon-calendar
  • .wmicon-onesie
  • .wmicon-globe
  • .wmicon-add-user
  • .wmicon-flu
  • .wmicon-pharmacy-pin
  • .wmicon-info
  • .wmicon-download
  • .wmicon-cake
  • .wmicon-snowflake
  • .wmicon-home
  • .wmicon-graduate
  • .wmicon-gift-alt

Usage

<i class="wmicon wmicon-cart"></i>

6 Base #

6.1 Headings #

We use six primary heading styles, which correspond to .heading- classes af.

Use heading elements h1h6 to write markup based on structure, not style. Avoid skipping heading levels when marking up content. Content headed by an h3 should be within content headed by an h2.

Add a .heading- class to style the element based on the design. In the example below, each heading is an h6 element to demonstrate that styling is based on class, not HTML tag.

For more information, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements.

About this item
Faded Glory Women’s Ruffled Knit Dress
Stitch Women's Cutout
Explore the Features
Departments
Stitch Women's Cutout Detail Ponte Dress
<h6 class="heading-a">About this item</h6>
<h6 class="heading-b">Faded Glory Women’s Ruffled Knit Dress</h6>
<h6 class="heading-c">Stitch Women's Cutout</h6>
<h6 class="heading-d">Explore the Features</h6>
<h6 class="heading-e">Departments</h6>
<h6 class="heading-f">Stitch Women's Cutout Detail Ponte Dress</h6>

6.2 Body Text #

I am 5'6 218 pounds and 40D...

.copy-open-leading

I am 5'6 218 pounds and 40D...

.copy-small

I am 5'6 218 pounds and 40D...

.copy-mini

I am 5'6 218 pounds and 40D...

<p class="{$modifiers}">I am 5'6 218 pounds and 40D...</p>

6.3 Font Weights #

We use 4 primary font weights. Which correspond to .font-light, .font-normal ,font-semibold & .font-bold classes.

Light Normal Semibold Bold
300
.font-light
400
.font-normal
600
.font-semibold
700
.font-bold

6.5 Images #

Deprecated: These classes are deprecated. Do not use in old or new projects. Pages using it may break at any time.

You should use width and height attributes on img in your HTML. Torbit delivers correctly resized images based on those attributes if you use them.

Common images widths include:

30px img-30
45px img-45
50px img-50
60px img-60
100px img-100
125px img-125
150px img-150
180px img-180
300px img-300
450px img-450
2000px img-2000

6.6 Description Lists #

Small
Lorem ipsum dolor
Medium Medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Large Large Large Large
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

.dl-emphasize

Small
Lorem ipsum dolor
Medium Medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Large Large Large Large
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

.dl-horizontal

Small
Lorem ipsum dolor
Medium Medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Large Large Large Large
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

.dl-horizontal.copy-small.dl-emphasize

Small
Lorem ipsum dolor
Medium Medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Large Large Large Large
Lorem ipsum dolor sit amet, consectetur adipisicing 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.

.dl-horizontal.copy-mini

Small
Lorem ipsum dolor
Medium Medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Large Large Large Large
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
<dl class="{$modifiers}">
  <dt>Small</dt><dd>Lorem ipsum dolor</dd>
  <dt>Medium Medium</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
  <dt>Large Large Large Large</dt><dd>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</dd>
</dl>

7 Buttons #

7.1 Standard Buttons #

Link Disabled Link

.btn-inverse

Link Disabled Link

.btn-primary

Link Disabled Link

.btn-secondary

Link Disabled Link

.btn-compact

Link Disabled Link

.btn-mini

Link Disabled Link
<button class="btn {$modifiers}" type="button">Button</button>

<a class="btn {$modifiers}" href="#">Link</a>

<button disabled class="btn {$modifiers}" type="button">Disabled Button</button>

<a tabindex="-1" aria-disabled="true" class="btn disabled {$modifiers}" href="#">Disabled Link</a>

7.1.1 Large Button #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

As per UX guidelines, .btn-large is deprecated. Use one of the buttons above.

Link Disabled Link
<button class="btn btn-large" type="button">Button</button>

<a class="btn btn-large" href="#">Link</a>

<button disabled class="btn btn-large" type="button">Disabled Button</button>

<a tabindex="-1" aria-disabled="true" class="btn disabled btn-large" href="#">Disabled Link</a>

7.2 Progress Buttons #

Use to indicate that an action is in progress after a user clicks a button. To use, add the .btn-progress-spinner elements (see code sample) to a .btn element's markup, then add the .btn-progress class. Typically, the button should be disabled as well.

A common JavaScript module is available that handles this behavior and creates the additional elements in the button if necessary. This is the preferred way to use the component. See progress-btn.js.

.btn-inverse

.btn-primary

.btn-mini

.btn-mini.btn-inverse

.btn-mini.btn-primary

<button disabled type="button" class="btn btn-progress {$modifiers}">Write a review
  <b class="btn-progress-spinner">
    <b class="btn-progress-spinner-icon"></b>
  </b>
</button>

<button type="button" class="guide-example-demo-button">Reset</button>

7.4 Voting Buttons #

Was this review helpful? (273) (37)
<div class="btn-vote-group">
  <span class="btn-vote-heading">Was this review helpful?</span>
  <button type="button" class="btn btn-vote"><i class="btn-vote-up"></i> Yes</button>
  <span class="btn-vote-count">(273)</span>
  <button type="button" class="btn btn-vote"><i class="btn-vote-down"></i> No</button>
  <span class="btn-vote-count">(37)</span>
</div>

7.5 Badge Buttons #

.btn-badge-alt

<button type="button" class="btn btn-badge {$modifiers}">Update</button>
<button type="button" class="btn btn-badge {$modifiers} active">Update Active</button>

7.5.1 Badge Button Groups #

.btn-badge-alt

<div class="btn-badge-group">
  <button type="button" class="btn btn-badge {$modifiers}">1 star <span>(2)</span></button>
  <button type="button" class="btn btn-badge {$modifiers} active">2 stars <span>(1)</span></button>
  <button type="button" class="btn btn-badge {$modifiers}">3 stars <span>(0)</span></button>
  <button type="button" class="btn btn-badge {$modifiers}">4 stars <span>(20)</span></button>
  <button type="button" class="btn btn-badge {$modifiers}">5 stars <span>(4)</span></button>
</div>

7.6 Delete Buttons #

<button type="button" class="btn-delete">
  <span class="visuallyhidden">Remove item</span>
  <i class="wmicon wmicon-remove"></i>
</button>

7.7 Close Buttons #

7.8 Responsive Block Buttons #

Used to create buttons that fill the entire available horizontal space, up to or starting from a specified breakpoint. Above or below that breakpoint, the button will revert to the default .btn styling of display: inline-block and width: auto. Most commonly used for narrow breakpoints. The default class .btn-block should be applied to buttons that should be always full width.

.btn-block

.btn-block-xs

.btn-block-s

.btn-block-m

.btn-block-l

.btn-block-max-xs

.btn-block-max-s

.btn-block-max-m

.btn-block-max-l

<button class="btn {$modifiers}" type="button">Button</button>

8 Components #

8.1 Modal #

The default modal component does not include any interior padding to accomodate modals with sections that expand to the edges of the component. The .modal-padded modifier adds standard padding.

The .modal-fixed modifier adds position: fixed with the result that the modal stays in place when the page is scrolled.

.modal-padded

<div class="modal-backdrop js-modal-backdrop"></div>

<div class="modal {$modifiers} js-modal">
  <button type="button" class="modal-close">
    <i class="wmicon wmicon-remove"></i>
    <span class="visuallyhidden">Close</span>
  </button>
  <div class="module">
    <p>
      Now, the grand distinction drawn between officer and man at sea, is
      this—the first lives aft, the last forward. Hence, in whale-ships and
      merchantmen alike, the mates have their quarters with the captain; and
      so, too, in most of the American whalers the harpooneers are lodged in
      the after part of the ship. That is to say, they take their meals in the
      captain's cabin, and sleep in a place indirectly communicating with it.
     </p>
  </div>
</div>

8.1.1 Tray Modal #

Deprecated: This component is deprecated. For future responsive modal needs, consider the .Modal component instead, which offers similar behavior with less fragility.

This "tray" modal is a responsive variant of the standard modal, using a right-aligned fixed position default style for small screen sizes, and a screen centered layout for larger screen sizes (similar to current modal)

Now, the grand distinction drawn between officer and man at sea, is this—the first lives aft, the last forward. Hence, in whale-ships and merchantmen alike, the mates have their quarters with the captain; and so, too, in most of the American whalers the harpooneers are lodged in the after part of the ship. That is to say, they take their meals in the captain's cabin, and sleep in a place indirectly communicating with it.

<div class="modal-backdrop js-modal-backdrop"></div>

<div class="tray-modal js-tray-modal">
  <div class="tray-modal-dialog">
    <div class="tray-modal-content js-tray-modal-content">
      <p>
        Now, the grand distinction drawn between officer and man at sea, is
        this—the first lives aft, the last forward. Hence, in whale-ships and
        merchantmen alike, the mates have their quarters with the captain; and
        so, too, in most of the American whalers the harpooneers are lodged in
        the after part of the ship. That is to say, they take their meals in the
        captain's cabin, and sleep in a place indirectly communicating with it.
      </p>
      <button class="tray-modal-close js-tray-modal-close" type="button">
        <i class="wmicon wmicon-remove"></i>
        <span class="visuallyhidden">Close</span>
      </button>
    </div>
  </div>
</div>

8.1.2 Responsive Modal #

This is a responsive, mobile-first replacment of the standard modal. It has a fullscreen, fixed position layout for small screen sizes, and a centered, width-contrained layout for larger screen sizes (like the current .modal).

The behavior of this modal is to translate upwards from the bottom of the viewport, while also fading in opacity from 0 to 1. The "backdrop" layer is achieved with a :before pseudo element.

Modifiers

  • .Modal--bordered applies a rounded border to the layout at larger screen sizes. This can be omitted to create a modal with no inherent border styling.

  • .Modal--borderThick applies a thick, light border and an inset close button at larger screen sizes.

  • .Modal--small and .Modal--large control the width at larger screen sizes.

Notes

  • The dual-axis centering at larger screen sizes is acheived with Flexbox display styles, falling back to just horizontal centering for browsers not supporting those styles.

.Modal--small

.Modal--large

<button class="btn js-modal-trigger">Show Modal</button>

<div class="Modal Modal--bordered {$modifiers}">
  <div class="Modal-outer">
    <div class="Modal-inner">
      <footer class="hide-content-m padding" style="background-color:#eee">
        <button class="btn-fake-link">
          Back
        </button>
      </footer>
      <div class="padding">
        <p>Modal contents</p>
        <p>Modal contents</p>
        <p>Modal contents</p>
        <p>Modal contents</p>
        <p>Modal contents</p>
        <p>Modal contents</p>
      </div>
    </div>
    <button class="Modal-closeButton hide-content display-block-m">
      <i class="wmicon wmicon-remove"></i>
      <span class="visuallyhidden">Close</span>
    </button>
  </div>
</div>

8.2 Alert Modal #

<div class="modal-backdrop js-modal-backdrop"></div>

<div class="js-alert-modal-inner modal modal-alert" aria-hidden="false" aria-labelledby="modal-title" role="dialog">
  <div class="modal-content" role="document">
    <h1 class="modal-message" id="modal-title">Main Modal Message</h1>
    <div class="modal-alert-actions clearfix">
      <button type="button" class="btn js-btn-primary btn-primary pull-right modal-alert-btn-primary">Primary Button</button>
      <button type="button" class="btn btn-inverse js-btn-secondary pull-right modal-alert-btn-secondary">Secondary Button</button>
    </div>
  </div>
</div>

8.3 Dropdowns #

.dropdown-alt

.dropdown-dark

.dropdown-wide

.dropdown-alt.dropdown-wide

.dropdown-dark.dropdown-wide

.dropdown-full

<button type="button" class="dropdown {$modifiers}">Options</button>

8.4 Flyout #

Hi. I'm a flyout.

.flyout-top

Hi. I'm a flyout.

.flyout-right

Hi. I'm a flyout.

.flyout-bottom

Hi. I'm a flyout.

.flyout-left

Hi. I'm a flyout.
<div class="js-flyout flyout {$modifiers} active">
  <button type="button" class="js-flyout-toggle" aria-controls="flyout-{$modifiers}">Flyout</button>
  <div id="flyout-{$modifiers}" class="js-flyout-modal flyout-modal">
    Hi. I'm a flyout.
  </div>
</div>

8.5 Flyout Sizes #

Hi. I'm a flyout.

.flyout-modal-narrow

Hi. I'm a flyout.

.flyout-modal-wide

Hi. I'm a flyout.

.flyout-modal-extrawide

Hi. I'm a flyout.

.flyout-fluid

Hi. I'm a flyout.
<div class="js-flyout flyout flyout-bottom active">
  <button type="button" class="js-flyout-toggle" aria-controls="flyout-{$modifiers}">Flyout</button>
  <div id="flyout-{$modifiers}" class="js-flyout-modal flyout-modal {$modifiers}">
    Hi. I'm a flyout.
  </div>
</div>

8.6 Flyout Alignment #

Alignment classes anchor the flyout to the right or left side of its toggle, instead of centering it. This is useful when a flyout should rest on the edge of a container.

To use, apply the .flyout-align and .flyout-align-{direction} classes to the .flyout and the .flyout-align-caret to the toggle.

NOTE: .flyout-align currently only works with .flyout-top and .flyout-bottom. It is incompatible with .flyout-left and .flyout-right.

Hi. I'm a flyout.

.flyout-top.flyout-align-right

Hi. I'm a flyout.

.flyout-top.flyout-align-left

Hi. I'm a flyout.

.flyout-bottom.flyout-align-right

Hi. I'm a flyout.

.flyout-bottom.flyout-align-left

Hi. I'm a flyout.
<div class="js-flyout flyout active flyout-align {$modifiers}">
  <button type="button" class="js-flyout-toggle flyout-align-caret" aria-controls="flyout-{$modifiers}">Flyout</button>
  <div id="flyout-{$modifiers}" class="js-flyout-modal flyout-modal">
    Hi. I'm a flyout.
  </div>
</div>

8.7 Flyout Close Button #

Hi. I'm a flyout.
<div class="js-flyout flyout flyout-bottom active">
  <button type="button" class="js-flyout-toggle" aria-controls="flyout-close-button">Flyout with Close Button</button>

  <div id="flyout-close-button" class="js-flyout-modal flyout-modal flyout-modal-extrawide">
    <button type="button" class="flyout-close js-flyout-close" aria-controls="flyout-close-button">
      <i class="wmicon wmicon-remove"></i>
      <span class="visuallyhidden">Close</span>
    </button>
    Hi. I'm a flyout.
  </div>
</div>

8.8 Meter #

91%

24%
<div class="guide-example">
  <div class="meter">
    <span style="width: 91%" class="meter-bar">
      <b class="meter-text">91%</b>
    </span>
  </div>

  <br>

  <div class="meter">
    <span style="width: 24%" class="meter-bar">
      <b class="meter-text">24%</b>
    </span>
  </div>
</div>

8.8.1 Percentage Circle http://circle.firchow.net/ #

http://circle.firchow.net/

Percentage display meter in a circle format. It uses the class .meter-circle-p80 where the p80 value is the percent to fill the meter.

80%
<div class="guide-example">
  <div class="meter-circle meter-circle-p80">
      <span>80%</span>
      <div class="meter-circle-slice">
          <div class="meter-circle-bar"></div>
          <div class="meter-circle-fill"></div>
      </div>
  </div>
</div>

8.9 Spinner #

The loading spinner can be used standalone or with a .spinner-backdrop wrapper, which adds a semi-transparent white backdrop.

.spinner-small

.spinner-mini

<div class="spinner-backdrop">
  <div class="spinner {$modifiers}"></div>
</div>

8.10 Zoom #

<button class="zoom wmicon wmicon-zoom">
  <span class="visuallyhidden">Zoom In</span>
</button>

<button class="zoom wmicon wmicon-zoom-out">
  <span class="visuallyhidden">Zoom Out</span>
</button>

8.11 Play Button #

<button class="play-button wmicon wmicon-play-circle">
  <span class="visuallyhidden">Play</span>
</button>

8.12 Error text #

Some error text
<span class="error-text">Some error text</span>

8.13 Wells #

Now, the grand distinction drawn between officer and man at sea, is this—the first lives aft, the last forward. Hence, in whale-ships and merchantmen alike, the mates have their quarters with the captain; and so, too, in most of the American whalers the harpooneers are lodged in the after part of the ship. That is to say, they take their meals in the captain's cabin, and sleep in a place indirectly communicating with it.

.well-padded

Now, the grand distinction drawn between officer and man at sea, is this—the first lives aft, the last forward. Hence, in whale-ships and merchantmen alike, the mates have their quarters with the captain; and so, too, in most of the American whalers the harpooneers are lodged in the after part of the ship. That is to say, they take their meals in the captain's cabin, and sleep in a place indirectly communicating with it.

.well-filled

Now, the grand distinction drawn between officer and man at sea, is this—the first lives aft, the last forward. Hence, in whale-ships and merchantmen alike, the mates have their quarters with the captain; and so, too, in most of the American whalers the harpooneers are lodged in the after part of the ship. That is to say, they take their meals in the captain's cabin, and sleep in a place indirectly communicating with it.

.well-subtle

Now, the grand distinction drawn between officer and man at sea, is this—the first lives aft, the last forward. Hence, in whale-ships and merchantmen alike, the mates have their quarters with the captain; and so, too, in most of the American whalers the harpooneers are lodged in the after part of the ship. That is to say, they take their meals in the captain's cabin, and sleep in a place indirectly communicating with it.

.well-cool

Now, the grand distinction drawn between officer and man at sea, is this—the first lives aft, the last forward. Hence, in whale-ships and merchantmen alike, the mates have their quarters with the captain; and so, too, in most of the American whalers the harpooneers are lodged in the after part of the ship. That is to say, they take their meals in the captain's cabin, and sleep in a place indirectly communicating with it.
<div class="well {$modifiers}">
  Now, the grand distinction drawn between officer and man at sea, is this—the
  first lives aft, the last forward. Hence, in whale-ships and merchantmen
  alike, the mates have their quarters with the captain; and so, too, in most
  of the American whalers the harpooneers are lodged in the after part of the
  ship. That is to say, they take their meals in the captain's cabin, and sleep
  in a place indirectly communicating with it.
</div>

8.14 Media Object #

Panda Backpack

<div class="media">
  <img class="media-object" width="22px" height="33px" alt="" src="img/guide-paginator-chapters-1.png">
  <div class="media-body">
    <h4 class="media-heading">Panda Backpack</h4>
  </div>
</div>

8.15 Separator #

Common horizontal rules for separating content blocks.

.separator-alt is a darker variant for use on blue backgrounds.





<hr class="separator">

<hr class="separator-heavy">

<hr class="separator-alt">

<hr class="separator-dotted">

8.16 Tables #

Control the width of each column with the <colgroup> and <col> elements. To make a column take up only as much room as it needs, add the .table-size-fit class to the corresponding <col> element. To make a column take up all the remaining space, use .table-size-fill.

Processor 3.5GHz quad-core
Memory 8GB of 1600MHz
Storage 1TB Fusion Drive

.table-striped-odd

Processor 3.5GHz quad-core
Memory 8GB of 1600MHz
Storage 1TB Fusion Drive

.table-striped-even

Processor 3.5GHz quad-core
Memory 8GB of 1600MHz
Storage 1TB Fusion Drive

.table-striped-light-odd

Processor 3.5GHz quad-core
Memory 8GB of 1600MHz
Storage 1TB Fusion Drive

.table-striped-light-even

Processor 3.5GHz quad-core
Memory 8GB of 1600MHz
Storage 1TB Fusion Drive
<table class="table table-first-col-font-alt font-semibold {$modifiers}">
  <colgroup>
    <col class="table-size-fit">
    <col class="table-size-fill">
  </colgroup>
  <tbody>
    <tr>
      <td>Processor</td>
      <td>3.5GHz quad-core</td>
    </tr>
    <tr>
      <td>Memory</td>
      <td>8GB of 1600MHz</td>
    </tr>
    <tr>
      <td>Storage</td>
      <td>1TB Fusion Drive</td>
    </tr>
  </tbody>
</table>

8.16.1 Tables with column headers #

Date Description Transaction Balance
02/15/14 Purchased: Walmart.com -$82.55 $64.42
02/14/14 Purchase: San Leandro Walmart Store #3456 -$26.35 $146.97
02/13/14 Purchased: Walmart.com -$52.63 $173.32
<table class="table table-header table-striped-odd">
  <thead class="align-left">
    <tr>
      <th>Date</th>
      <th>Description</th>
      <th class="align-right">Transaction</th>
      <th class="align-right">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>02/15/14</td>
      <td>Purchased: Walmart.com</td>
      <td class="align-right">-$82.55</td>
      <td class="align-right">$64.42</td>
    </tr>
    <tr>
      <td>02/14/14</td>
      <td>Purchase: San Leandro Walmart Store #3456</td>
      <td class="align-right">-$26.35</td>
      <td class="align-right">$146.97</td>
    </tr>
    <tr>
      <td>02/13/14</td>
      <td>Purchased: Walmart.com</td>
      <td class="align-right">-$52.63</td>
      <td class="align-right">$173.32</td>
    </tr>
  </tbody>
</table>

8.16.2 Tables with column and row headers #

Size Height Chest Waist Hip
4 4/5 (XS) 39–41 23 21 23
5 42–44 24 21 24
18 18 (XXL) 64–66 32 30 34
<table class="table table-header-alt table-striped-light-even">
  <thead>
    <tr>
      <th colspan="2">Size</th>
      <th>Height</th>
      <th>Chest</th>
      <th>Waist</th>
      <th>Hip</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>4</th>
      <th rowspan="2">4/5 (XS)</th>
      <td class="align-center">39–41</td>
      <td class="align-center">23</td>
      <td class="align-center">21</td>
      <td class="align-center">23</td>
    </tr>
    <tr>
      <th>5</th>
      <td class="align-center">42–44</td>
      <td class="align-center">24</td>
      <td class="align-center">21</td>
      <td class="align-center">24</td>
    </tr>
    <tr>
      <th>18</th>
      <th>18 (XXL)</th>
      <td class="align-center">64–66</td>
      <td class="align-center">32</td>
      <td class="align-center">30</td>
      <td class="align-center">34</td>
    </tr>
  </tbody>
</table>

8.17 Carets #

Add a caret next to any element by adding the .caret class. The caret should automatically be centered vertically.

By default, add the .active class to view the rotated caret.

Options

.active

Options

.caret-hover

Options

.caret-yellow

Options

.caret-blue

Options

.caret-top

Options

<p class="caret {$modifiers}">
  Options
</p>

<p class="caret {$modifiers}">
  <img width="22px" height="33px" alt="" src="img/guide-paginator-chapters-1.png">
</p>

<button type="button" class="btn btn-inverse">
  <span class="caret {$modifiers}">
    Caret button
  </span>
</button>

<button type="button" class="btn-fake-link caret {$modifiers}">
  I’m a link, but really I’m a button
</button>

8.18 Disclosure #

Add a caret underneath any element by adding the .disclosure-alignCaret class. The caret will be centered underneath the element.

UX for In-line Progressive Disclosure: https://confluence.walmart.com/display/UX/In-line+Progressive+Disclosure+vs+ Tray+vs+Page+Takeover

1 Dell Black 15.6" Inspiron Laptop

.disclosure--secondary

1 Dell Black 15.6" Inspiron Laptop

.disclosure--bubble

1 Dell Black 15.6" Inspiron Laptop
<div class="disclosure {$modifiers}">
  <button type="button" class="disclosure-alignCaret">View items</button>
  <div class="disclosure-content">
    <span>1 Dell Black 15.6" Inspiron Laptop</span>
  </div>
</div>

8.19 Segmented Control #

An iOS or Android-style group of segmented controls.

This component doesn't include web styles and should only be used in hybrid apps for now.

<div class="m-margin-ends">
  <button type="button" class="Segment">
    Segment
  </button>
</div>

<div class="SegmentGroup">
  <button type="button" class="Segment">
    Credit Card
  </button>

  <button type="button" class="Segment is-active">
    Gift Card
  </button>

  <button type="button" class="Segment">
    PayPal
  </button>

  <button type="button" class="Segment">
    Cash
  </button>
</div>

9 Navigation #

9.1 Persistent Subnavigation #

<nav class="persistent-subnav fullwidth js-persistent-subnav">
  <ul class="persistent-subnav-list">
    <li class="persistent-subnav-item current"><a href="">About this item</a></li>
    <li class="persistent-subnav-item"><a href="">Reviews</a></li>
    <li class="persistent-subnav-item"><a href="">Accessories</a></li>
    <li class="persistent-subnav-item"><a href="">Other info</a></li>
  </ul>
</nav>

9.2 Persistent Back to Top #

<a class="persistent-nav-top" href="#">
  <span class="visuallyhidden">Back to top</span>
</a>

9.3 Breadcrumb #

<nav>
  <ol class="breadcrumb-list {$modifiers}">
    <li class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="" itemprop="url">
        <span itemprop="title">All Departments</span>
      </a>
    </li>
    <li class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="" itemprop="url">
        <span itemprop="title">Apparel</span>
      </a>
    </li>
    <li class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="" itemprop="url">
        <span itemprop="title">Women</span>
      </a>
    </li>
    <li class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="" itemprop="url">
        <span itemprop="title">Dresses</span>
      </a>
    </li>
    <li class="breadcrumb active">
      <a href="">Sundress</a>
    </li>
  </ol>
</nav>

10 Products #

10.1 Expander #

Brands

.expanded

Brands
<div class="expander {$modifiers}">
  <a class="expander-toggle" href="#">Brands</a>

  <div class="expander-content module">
    <ul class="block-list module">
      <li>
        <label class="option option-small no-margin">
          <input type="checkbox" checked>
          <div class="option-content">Alexis Taylor</div>
        </label>
      </li>

      <li>
        <label class="option option-small">
          <input type="checkbox" checked>
          <div class="option-content">Bella Bird</div>
        </label>
      </li>
    </ul>
  </div>
</div>

10.2 Shelf Sidebar #

Brands
Colors
<div class="grid">
  <div class="shelf-sidebar col3">
    <div class="expander expanded">
      <a class="expander-toggle" href="#">Brands</a>
      <div class="expander-content module">
        <ul class="block-list module">
          <li>
            <label class="option option-small no-margin">
              <input type="checkbox" checked>
              <div class="option-content">Alexis Taylor</div>
            </label>
          </li>

          <li>
            <label class="option option-small">
              <input type="checkbox" checked>
              <div class="option-content">Bella Bird</div>
            </label>
          </li>

          <li>
            <label class="option option-small">
              <input type="checkbox" checked>
              <div class="option-content">Miss Tina</div>
            </label>
          </li>

          <li>
            <label class="option option-small">
              <input type="checkbox" checked>
              <div class="option-content">Stitch</div>
            </label>
          </li>
        </ul>
      </div>
    </div>

    <div class="expander">
      <a class="expander-toggle" href="#">Price</a>
      <div class="expander-content module">

      </div>
    </div>

    <div class="expander expanded">
      <a class="expander-toggle" href="#">Colors</a>
      <div class="expander-content module">
        <div class="variants variants-swatches">
          <input type="checkbox" name="sidebar-variant-1" id="sidebar-variant-1">
          <label class="variant" for="sidebar-variant-1">
            <span class="variant-swatch" style="background: #fead41">Yellow</span>
          </label>

          <input type="checkbox" checked="" name="sidebar-variant-2" id="sidebar-variant-2">
          <label class="variant" for="sidebar-variant-2">
            <span class="variant-swatch" style="background: #d40b23">Red</span>
          </label>

          <input type="checkbox" name="sidebar-variant-3" id="sidebar-variant-3">
          <label class="variant" for="sidebar-variant-3">
            <span class="variant-swatch" style="background: #47d9bf">Teal</span>
          </label>

          <input type="checkbox" name="sidebar-variant-4" id="sidebar-variant-4">
          <label class="variant" for="sidebar-variant-4">
            <span class="variant-swatch" style="background: #9b69c9">Purple</span>
          </label>

          <input type="checkbox" name="sidebar-variant-5" id="sidebar-variant-5">
          <label class="variant" for="sidebar-variant-5">
            <span class="variant-swatch" style="background: #000">Black</span>
          </label>

          <input type="checkbox" name="sidebar-variant-6" id="sidebar-variant-6">
          <label class="variant" for="sidebar-variant-6">
            <span class="variant-swatch" style="background: #fff">White</span>
          </label>

          <input type="checkbox" name="sidebar-variant-7" id="sidebar-variant-7">
          <label class="variant" for="sidebar-variant-7">
            <span class="variant-swatch" style="background: #fead41">Yellow</span>
          </label>

          <input type="checkbox" name="sidebar-variant-8" id="sidebar-variant-8">
          <label class="variant" for="sidebar-variant-8">
            <span class="variant-swatch" style="background: #d40b23">Red</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

10.3 Stars #

Average rating: 3.5 stars (123) ratings

.stars-small

Average rating: 3.5 stars (123) ratings

.stars-medium

Average rating: 3.5 stars (123) ratings

.stars-large

Average rating: 3.5 stars (123) ratings
<div class="stars {$modifiers}">
  <i class="star star-rated"></i>
  <i class="star star-rated"></i>
  <i class="star star-rated"></i>
  <i class="star star-partial"></i>
  <i class="star star-empty"></i>
  <span class="visuallyhidden">Average rating: 3.5 stars</span>
  <span class="stars-reviews">(123)
    <span class="visuallyhidden">ratings</span>
  </span>
</div>

10.4 Price #

Component for presenting prices in a consistent way. Successor to the deprecated .price-display component.

Price style

By default, the .Price component will not hide or otherwise treat .Price-mark, .Price-sup or .Price-sub. This is to preserve readability for smaller screen sizes.

Use the .Price--stylized modifier to apply this treatment.

An alternative to the .Price--stylized modifier is the .Price--flair treatment.

Price color

Use the Text Color Themes to set color. Example: .u-textBlue

Price sizes

On its own, the .Price component will inherit the font-size of its parent. You can use the following modifiers to increase its relative size:

  • .Price--medium: 1.125 times larger than parent font size (ie 18px).
  • .Price--large: 1.5 times larger than parent font size.
  • .Price--larger: 2 times larger than parent font size.
  • .Price--largest: 2.5 times larger than parent font size.

Responsive price modifiers

Append any of the standard breakpoint abbreviations to these modifiers to apply them at a specific breakpoint. For example:

  • .Price--stylized-m: Stylize .Price starting at $breakpoint-m.
  • .Price--large-l: Make .Price 1.5 times larger starting at $breakpoint-l.

$19.95

Was $25.00

FREE

Loading price…

.Price--stylized

$19.95

Was $25.00

FREE

Loading price…

.Price--stylized.Price--medium

$19.95

Was $25.00

FREE

Loading price…

.Price--stylized.Price--large

$19.95

Was $25.00

FREE

Loading price…

.Price--stylized.Price--larger

$19.95

Was $25.00

FREE

Loading price…

.Price--stylized.Price--largest

$19.95

Was $25.00

FREE

Loading price…

.Price--large.Price--larger-m.Price--stylized-m

$19.95

Was $25.00

FREE

Loading price…

<p>
  <span class="Price {$modifiers} u-textBlue">
    <span class="Price-sup">$</span>19<span class="Price-mark">.</span><span class="Price-sup">95</span>
  </span>
</p>
<p class="copy-small no-margin u-textGrey">Was <s>$25.00</s></p>

<p>
  <span class="Price {$modifiers} u-textBlue">
    FREE
  </span>
</p>

<p>
  <span class="Price {$modifiers}">
    <span class="Price-message u-textGrey">Loading price&hellip;</span>
  </span>
</p>

10.4.1 Price Flair #

The .Price--flair is a new modifier on the .Price component. Use it as you would use the .Price--stylized modifier.

This new treatment follows the new UX guidelines.

Usage

<span class="Price Price--flair">
  {{displayPrice 34 flair=true}}
</span>

Price sizes

On its own, the .Price component will inherit the font-size of its parent. You can use the following modifiers to increase its relative size:

  • .Price--medium: 1.125 times larger than parent font size (ie 18px for base 16px).
  • .Price--large: 1.5 times larger than parent font size.
  • .Price--larger: 2 times larger than parent font size.
  • .Price--largest: 2.5 times larger than parent font size.

Responsive price modifiers

Append any of the standard breakpoint abbreviations to these modifiers to apply them at a specific breakpoint. For example:

  • .Price--flair-m: Stylize .Price starting at $breakpoint-m.
  • .Price--large-l: Make .Price 1.5 times larger starting at $breakpoint-l.

$34.00 Was $39.00

Save $5.00

.Price--flair

$34.00 Was $39.00

Save $5.00

.Price--flair.Price--medium

$34.00 Was $39.00

Save $5.00

.Price--flair.Price--large

$34.00 Was $39.00

Save $5.00

.Price--flair.Price--larger

$34.00 Was $39.00

Save $5.00

.Price--flair.Price--largest

$34.00 Was $39.00

Save $5.00

.Price--large.Price--larger-m.Price--flair-m

$34.00 Was $39.00

Save $5.00

<p>
  <span class="Price {$modifiers} u-textBlue xxs-margin-right">
    <span class="Price-sup">$</span>34<span class="Price-mark">.</span>00
  </span>

  <span class="copy-small no-margin u-textBlue">Was $39.00</span>
</p>

<p class="Price-savings font-semibold">
  Save $5.00
</p>

10.5 Display Price #

Deprecated: Styling for legacy display prices. Use the .Price component instead.

$19.95
Was $25.00
Loading price ...
<div class="price-display">
  <span class="sup">$</span>19<span class="visuallyhidden">.</span><span class="sup">95</span>
</div>
<span class="old-price">Was <s>$25.00</s></span>

<div class="price-display">
  <div class="price-not-available">Loading price ...</div>
</div>

10.6 Flags #

Rollback Rollback

.flag-outline

Rollback Rollback

.flag-clearance

Rollback Rollback

.flag-rollback

Rollback Rollback

.flag-bestseller

Rollback Rollback

.flag-reduced

Rollback Rollback
<span class="flag {$modifiers}">Rollback</span>
<span class="flag flag-alt {$modifiers}">Rollback</span>

11 Variants #

11.1 Variant Swatcher #

The variant swatcher is used to display product variants on item pages and tiles, as well as filters on shelf pages.

Individual swatches can use button, input type="checkbox", and input type="radio" markup, depending on behavioral requirements. When possible, use the native checkbox and variant markup instead of defining custom behavior with button tags.

Buttons

Radio Buttons

Checkboxes

<h4>Buttons</h4>

<div class="variants">
  <button class="variant">XS</button>
  <button class="variant selected">S</button>
  <button class="variant disabled">M</button>
  <button class="variant selected disabled">L</button>
  <button class="variant variant-unavailable">XL</button>
</div>

<h4>Radio Buttons</h4>

<div class="variants">
  <input type="radio" name="variant-swatcher-radio" id="variant-swatcher-radio-1">
  <label class="variant" for="variant-swatcher-radio-1">XS</label>

  <input type="radio" checked="" name="variant-swatcher-radio" id="variant-swatcher-radio-2">
  <label class="variant" for="variant-swatcher-radio-2">S</label>

  <input type="radio" name="variant-swatcher-radio" id="variant-swatcher-radio-3">
  <label class="variant disabled" for="variant-swatcher-radio-3">M</label>

  <input type="radio" name="variant-swatcher-radio" id="variant-swatcher-radio-4">
  <label class="variant" for="variant-swatcher-radio-4">L</label>

  <input type="radio" name="variant-swatcher-radio" id="variant-swatcher-radio-5">
  <label class="variant variant-unavailable" for="variant-swatcher-radio-5">XL</label>
</div>

<h4>Checkboxes</h4>

<div class="variants">
  <input type="checkbox" name="variant-swatcher-checkbox" id="variant-swatcher-checkbox-1">
  <label class="variant" for="variant-swatcher-checkbox-1">XS</label>

  <input type="checkbox" checked="" name="variant-swatcher-checkbox" id="variant-swatcher-checkbox-2">
  <label class="variant" for="variant-swatcher-checkbox-2">S</label>

  <input type="checkbox" name="variant-swatcher-checkbox" id="variant-swatcher-checkbox-3">
  <label class="variant disabled" for="variant-swatcher-checkbox-3">M</label>

  <input type="checkbox" checked="" name="variant-swatcher-checkbox" id="variant-swatcher-checkbox-4">
  <label class="variant disabled" for="variant-swatcher-checkbox-4">L</label>

  <input type="checkbox" name="variant-swatcher-checkbox" id="variant-swatcher-checkbox-5">
  <label class="variant variant-unavailable" for="variant-swatcher-checkbox-5">XL</label>
</div>

11.2 Color Variant Swatcher #

The color variant swatcher uses background images to display product colors and patterns.

Buttons

Radio Buttons

Checkboxes

<h4>Buttons</h4>

<div class="variants variants-swatches">
  <button class="variant">
    <span class="variant-swatch" style="background: #fead41">Yellow</span>
  </button>
  <button class="variant selected">
    <span class="variant-swatch" style="background: #d40b23">Red</span>
  </button>
  <button class="variant disabled">
    <span class="variant-swatch" style="background: #47d9bf">Teal</span>
  </button>
  <button class="variant disabled selected">
    <span class="variant-swatch" style="background: #9b69c9">Purple</span>
  </button>
  <button class="variant variant-unavailable">
    <span class="variant-swatch" style="background: #3168b3">Blue</span>
  </button>
</div>

<h4>Radio Buttons</h4>

<div class="variants variants-swatches">
  <input type="radio" name="variant-swatcher-color-radio" id="variant-swatcher-color-radio-1">
  <label class="variant" for="variant-swatcher-color-radio-1">
    <span class="variant-swatch" style="background: #fead41">Yellow</span>
  </label>

  <input type="radio" checked="" name="variant-swatcher-color-radio" id="variant-swatcher-color-radio-2">
  <label class="variant" for="variant-swatcher-color-radio-2">
    <span class="variant-swatch" style="background: #d40b23">Red</span>
  </label>

  <input type="radio" name="variant-swatcher-color-radio" id="variant-swatcher-color-radio-3">
  <label class="variant disabled" for="variant-swatcher-color-radio-3">
    <span class="variant-swatch" style="background: #47d9bf">Teal</span>
  </label>

  <input type="radio" name="variant-swatcher-color-radio" id="variant-swatcher-color-radio-4">
  <label class="variant disabled" for="variant-swatcher-color-radio-4">
    <span class="variant-swatch" style="background: #9b69c9">Purple</span>
  </label>

  <input type="radio" name="variant-swatcher-color-radio" id="variant-swatcher-color-radio-5">
  <label class="variant variant-unavailable" for="variant-swatcher-color-radio-5">
    <span class="variant-swatch" style="background: #3168b3">Blue</span>
  </label>
</div>

<h4>Checkboxes</h4>

<div class="variants variants-swatches">
  <input type="checkbox" name="variant-swatcher-color-checkbox-1" id="variant-swatcher-color-checkbox-1">
  <label class="variant" for="variant-swatcher-color-checkbox-1">
    <span class="variant-swatch" style="background: #fead41">Yellow</span>
  </label>

  <input type="checkbox" checked="" name="variant-swatcher-color-checkbox-2" id="variant-swatcher-color-checkbox-2">
  <label class="variant" for="variant-swatcher-color-checkbox-2">
    <span class="variant-swatch" style="background: #d40b23">Red</span>
  </label>

  <input type="checkbox" name="variant-swatcher-color-checkbox-3" id="variant-swatcher-color-checkbox-3">
  <label class="variant disabled" for="variant-swatcher-color-checkbox-3">
    <span class="variant-swatch" style="background: #47d9bf">Teal</span>
  </label>

  <input type="checkbox" checked="" name="variant-swatcher-color-checkbox-4" id="variant-swatcher-color-checkbox-4">
  <label class="variant disabled" for="variant-swatcher-color-checkbox-4">
    <span class="variant-swatch" style="background: #9b69c9">Purple</span>
  </label>

  <input type="checkbox" checked="" name="variant-swatcher-color-checkbox-5" id="variant-swatcher-color-checkbox-5">
  <label class="variant variant-unavailable" for="variant-swatcher-color-checkbox-5">
    <span class="variant-swatch" style="background: #3168b3">Blue</span>
  </label>
</div>

11.3 Mini Variant Swatcher #

Buttons

Radio Buttons

Checkboxes

<h4>Buttons</h4>

<div class="variants variants-small variants-swatches">
  <button class="variant">
    <span class="variant-swatch" style="background: #fead41">Yellow</span>
  </button>
  <button class="variant selected">
    <span class="variant-swatch" style="background: #d40b23">Red</span>
  </button>
  <button class="variant disabled">
    <span class="variant-swatch" style="background: #47d9bf">Teal</span>
  </button>
  <button class="variant disabled selected">
    <span class="variant-swatch" style="background: #9b69c9">Purple</span>
  </button>
  <button class="variant variant-unavailable">
    <span class="variant-swatch" style="background: #3168b3">Blue</span>
  </button>
</div>

<h4>Radio Buttons</h4>

<div class="variants variants-small variants-swatches">
  <input type="radio" name="variant-swatcher-color-radio-1" id="variant-swatcher-color-radio-1">
  <label class="variant" for="variant-swatcher-color-radio-1">
    <span class="variant-swatch" style="background: #fead41">Yellow</span>
  </label>

  <input type="radio" checked="" name="variant-swatcher-color-radio-1" id="variant-swatcher-color-radio-2">
  <label class="variant" for="variant-swatcher-color-radio-2">
    <span class="variant-swatch" style="background: #d40b23">Red</span>
  </label>

  <input type="radio" name="variant-swatcher-color-radio-1" id="variant-swatcher-color-radio-3">
  <label class="variant disabled" for="variant-swatcher-color-radio-3">
    <span class="variant-swatch" style="background: #47d9bf">Teal</span>
  </label>

  <input type="radio" name="variant-swatcher-color-radio-1" id="variant-swatcher-color-radio-4">
  <label class="variant" for="variant-swatcher-color-radio-4">
    <span class="variant-swatch" style="background: #9b69c9">Purple</span>
  </label>

  <input type="radio" name="variant-swatcher-color-radio-1" id="variant-swatcher-color-radio-5">
  <label class="variant variant-unavailable" for="variant-swatcher-color-radio-5">
    <span class="variant-swatch" style="background: #3168b3">Blue</span>
  </label>
</div>

<h4>Checkboxes</h4>

<div class="variants variants-small variants-swatches">
  <input type="checkbox" name="variant-swatcher-color-checkbox-1" id="variant-swatcher-color-checkbox-1">
  <label class="variant" for="variant-swatcher-color-checkbox-1">
    <span class="variant-swatch" style="background: #fead41">Yellow</span>
  </label>

  <input type="checkbox" checked="" name="variant-swatcher-color-checkbox-2" id="variant-swatcher-color-checkbox-2">
  <label class="variant" for="variant-swatcher-color-checkbox-2">
    <span class="variant-swatch" style="background: #d40b23">Red</span>
  </label>

  <input type="checkbox" name="variant-swatcher-color-checkbox-3" id="variant-swatcher-color-checkbox-3">
  <label class="variant disabled" for="variant-swatcher-color-checkbox-3">
    <span class="variant-swatch" style="background: #47d9bf">Teal</span>
  </label>

  <input type="checkbox" checked="" name="variant-swatcher-color-checkbox-4" id="variant-swatcher-color-checkbox-4">
  <label class="variant disabled" for="variant-swatcher-color-checkbox-4">
    <span class="variant-swatch" style="background: #9b69c9">Purple</span>
  </label>

  <input type="checkbox" checked="" name="variant-swatcher-color-checkbox-5" id="variant-swatcher-color-checkbox-5">
  <label class="variant variant-unavailable" for="variant-swatcher-color-checkbox-5">
    <span class="variant-swatch" style="background: #3168b3">Blue</span>
  </label>
</div>

11.4 Expand Variant Buttons #

.variant-expand-less

<div class="variants variants-small variants-swatches">
  <button class="variant variant-expand {$modifiers}">
    <span class="visuallyhidden">Show More</span>
  </button>

  <button class="variant variant-expand active {$modifiers}">
    <span class="visuallyhidden">Show More</span>
  </button>
</div>

12 Pagination #

12.1 Paginator Button #

.paginator-btn-alt

<button type="button" class="paginator-btn paginator-btn-prev {$modifiers}">
  <span class="visuallyhidden">Previous</span>
</button>

<button type="button" class="paginator-btn paginator-btn-next {$modifiers}">
  <span class="visuallyhidden">Next</span>
</button>

12.2 Paginator Hairline Button #

For use in carousels. Comes in three color schemes and two sizes. For typical carousel usage, include the .paginator-hairline-btn-positioned modifier class.

.paginator-hairline-btn-light

.paginator-hairline-btn-dark

.paginator-hairline-btn-large

.paginator-hairline-btn-large.paginator-hairline-btn-light

.paginator-hairline-btn-large.paginator-hairline-btn-dark

.paginator-hairline-btn-light-no-hover

.paginator-hairline-btn-dark-no-hover

.paginator-hairline-btn-large..paginator-hairline-btn-light-no-hover

.paginator-hairline-btn-large..paginator-hairline-btn-dark-no-hover

<button type="button" class="paginator-hairline-btn paginator-hairline-btn-prev {$modifiers}">
  <span class="visuallyhidden">Previous</span>
</button>

<button type="button" class="paginator-hairline-btn paginator-hairline-btn-next {$modifiers}">
  <span class="visuallyhidden">Next</span>
</button>

<button type="button" class="paginator-hairline-btn paginator-hairline-btn-up {$modifiers}">
  <span class="visuallyhidden">Previous</span>
</button>

<button type="button" class="paginator-hairline-btn paginator-hairline-btn-down {$modifiers}">
  <span class="visuallyhidden">Next</span>
</button>

12.2.1 Paginator Hairline Button Positioning #

The .paginator-hairline-btn-positioned modifier class pins hairline buttons to the edge of their parent, for use when buttons should be displayed on top of a carousel.

For use with prev and next directional modifiers, the .paginator-hairline-btn-voffset modifier offsets directional buttons by 30px from the bottom of the container. This allows them to remain vertically centered over carousel content when carousels include statically positioned paginators below them.

<div>
  <button
    type="button"
    class="paginator-hairline-btn paginator-hairline-btn-positioned paginator-hairline-btn-prev">
    <span class="visuallyhidden">Previous</span>
  </button>

  <button
    type="button"
    class="paginator-hairline-btn paginator-hairline-btn-positioned paginator-hairline-btn-next">
    <span class="visuallyhidden">Next</span>
  </button>

  <button
    type="button"
    class="paginator-hairline-btn paginator-hairline-btn-positioned paginator-hairline-btn-up">
    <span class="visuallyhidden">Previous</span>
  </button>

  <button
    type="button"
    class="paginator-hairline-btn paginator-hairline-btn-positioned paginator-hairline-btn-down">
    <span class="visuallyhidden">Next</span>
  </button>
</div>

12.3 Paginator List #

<ul class="paginator-list">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a class="active" href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li class="paginator-list-gap"></li>
  <li><a href="#">20</a></li>
</ul>

12.4 Paginator #

<div class="paginator">
  <a class="paginator-btn paginator-btn-prev" href="#">
    <span class="visuallyhidden">Previous</span>
  </a>

  <ul class="paginator-list">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a class="active" href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li class="paginator-list-gap"></li>
    <li><a href="#">20</a></li>
  </ul>

  <a class="paginator-btn paginator-btn-next" href="#">
    <span class="visuallyhidden">Next</span>
  </a>
</div>

12.6 Chapter Paginator #

<nav class="chapter-paginator">
  <ol class="chapter-paginator-list">
    <li>
      <button class="chapter-paginator-item">
        <span class="chapter-paginator-item-img chapter-paginator-item-img-none">
          <img width="22px" height="33px" alt="Special Summer is Here" src="img/guide-paginator-chapters-1.png">
        </span>
        <span class="chapter-paginator-item-text">New gear for back to school</span>
      </button>
    </li>

    <li>
      <button class="chapter-paginator-item active">
        <span class="chapter-paginator-item-img chapter-paginator-item-img-none">
          <img width="35px" height="27px" alt="Special Summer is Here" src="img/guide-paginator-chapters-2.png">
        </span>
        <span class="chapter-paginator-item-text">Dress up in summer savings</span>
      </button>
    </li>

    <li>
      <button class="chapter-paginator-item">
        <span class="chapter-paginator-item-img chapter-paginator-item-img-bottom">
          <img width="57px" height="47px" alt="Special Summer is Here" src="img/guide-paginator-chapters-3.png">
        </span>
        <span class="chapter-paginator-item-text">Just in: school uniforms</span>
      </button>
    </li>

    <li class="last">
      <button class="chapter-paginator-item">
        <span class="chapter-paginator-item-img  chapter-paginator-item-img-left">
          <img width="51px" height="38px" alt="Special Summer is Here" src="img/guide-paginator-chapters-4.png">
        </span>
        <span class="chapter-paginator-item-text">Quick &amp; easy lunch supplies</span>
      </button>
    </li>
  </ol>
</nav>

13 Forms #

13.1 Form Control #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

See "Float Label Form Control" for an alternative to this component.

Styles text inputs for default form usage. Inputs should always be used with a label element that describes the input. For general usage, the .form-control should be nested in a label.form-label. This will add a visible label above the input.

In some cases, you can use placeholder text on the .form-control input in place of a visible label (see the "Credit Card" example below). In these cases, a label should still be used for screen reader accessibility. To do so, nest a .form-control inside a label element (with no .form-label class), and wrap the label text in a span.visuallyhidden so that it is available for screen readers but not visible to sighted users.

If for some reason you cannot nest the .form-control in a label, place the label directly before the .form-control, give the .form-control a unique ID, and add a for attribute that references the ID to the label. If you are using placeholder text in this case, apply the .visuallyhidden class directly to the label, rather than to a span inside it.

To apply disabled styles to a .form-control and .form-label, add the disabled attribute to the .form-control and the .disabled class to the label.

<label class="form-label">
  Name on Card <span class="form-label-instructional">(First then Last)</span>
  <input class="form-control" type="text">
</label>

<label class="form-label">
  Email
  <div class="validation-group">
    <input class="form-control error" type="text">
    <i class="validation-marker validation-marker-error">
      <span class="visuallyhidden">Help</span>
    </i>
    <p class="error-label">Please enter an email address in the format yourname@domain.com</p>
  </div>
</label>

<label class="form-label disabled">
  Phone Number
  <input class="form-control" type="tel" value="888-888-8888" disabled>
</label>

<label class="form-label">
  Review
  <textarea class="form-control"></textarea>
</label>

<label>
  <span class="visuallyhidden">Credit Card</span>
  <input class="form-control" type="text" placeholder="Credit Card">
</label>

13.1.1 Mini Form Control #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

See "Float Label Form Control" for an alternative to this component.

Help

Please enter an email address in the format yourname@domain.com

<label class="form-label" for="full-name">Name on Card <span class="form-label-instructional">(First then Last)</span></label>
<input class="form-control form-control-mini" type="text" id="full-name">

<label class="form-label" for="email">Email</label>
<div class="validation-group validation-group-mini">
  <input class="form-control form-control-mini error" type="text" id="email">
  <i class="validation-marker validation-marker-error">
    <span class="visuallyhidden">Help</span>
  </i>
  <p class="error-label">Please enter an email address in the format yourname@domain.com</p>
</div>

<label class="form-label disabled">
  Phone Number
  <input class="form-control form-control-mini" type="tel" value="888-888-8888" disabled>
</label>

<label class="form-label" for="review">Review</label>
<textarea class="form-control form-control-mini" id="review"></textarea>

<label class="form-label visuallyhidden" for="creditcard">Credit Card</label>
<input class="form-control form-control-mini" type="text" id="creditcard" placeholder="Credit Card">

13.1.2 Float Label Form Control #

Styles text inputs for default form usage. Inputs should always be used with a label element that describes the input. For general usage, the .FloatLabel-control and .FloatLabel-text should be nested in a label.FloatLabel. This follows the Float Label Pattern.

The .FloatLabel-text elements acts both as placeholder text and a visible label above the input. In older browsers, it defaults to only a visible label above the input.

To apply disabled styles to a .FloatLabel-control and .FloatLabel, add the disabled attribute to the .FloatLabel-control and the .disabled class to the label.

To use the Float Label pattern, include the float-label.js jQuery plugin and initialize it on elements that should include this behavior: $(".js-float-label-example").floatLabel();

<label class="FloatLabel js-float-label">
  <input class="FloatLabel-control form-control" type="text">
  <div class="FloatLabel-text">
    Name on Card <span class="form-label-instructional">(First then Last)</span>
  </div>
</label>

<label class="FloatLabel js-float-label">
  <div class="validation-group">
    <input class="FloatLabel-control form-control error" type="text">
    <i class="validation-marker validation-marker-error">
      <span class="visuallyhidden">Help</span>
    </i>
    <p class="error-label">Please enter an email address in the format yourname@domain.com</p>
  </div>
  <span class="FloatLabel-text">Email</span>
</label>

<label class="FloatLabel disabled js-float-label">
  <input class="FloatLabel-control form-control" type="tel" value="888-888-8888" disabled>
  <span class="FloatLabel-text">Phone Number</span>
</label>

<label class="FloatLabel js-float-label">
  <textarea class="FloatLabel-control form-control"></textarea>
  <span class="FloatLabel-text">Review</span>
</label>

<label class="FloatLabel js-float-label">
  <input class="FloatLabel-control form-control" type="text">
  <span class="FloatLabel-text">Credit Card</span>
</label>

13.2 Validation Markers #

Help Help
Help
Help
<i class="validation-marker validation-marker-success">
  <span class="visuallyhidden">Help</span>
</i>

<i class="validation-marker validation-marker-error">
  <span class="visuallyhidden">Help</span>
</i>

<label class="form-label">
  Email Address
  <div class="validation-group">
    <input type="text" class="form-control" placeholder="Email" value="email@walmart" name="email">
    <i class="validation-marker validation-marker-error">
      <span class="visuallyhidden">Help</span>
    </i>
  </div>
</label>

<label>
  <div class="validation-group">
    <input type="text" class="form-control" placeholder="Email" value="email@walmart.com" name="email">
    <i class="validation-marker validation-marker-success">
      <span class="visuallyhidden">Email Address</span>
    </i>
  </div>
</label>

<form class="form-inline">
  <label class="form-label" for="email">Email Address</label>

  <div class="validation-group">
    <input type="text" class="form-control" placeholder="Email" value="email@walmart" name="email">
    <i class="validation-marker validation-marker-error">
      <span class="visuallyhidden">Help</span>
    </i>
  </div>

  <label class="form-label visuallyhidden" for="email">Email Address</label>

  <div class="validation-group">
    <input type="text" class="form-control" placeholder="Email" value="email@walmart" name="email">
    <i class="validation-marker validation-marker-error">
      <span class="visuallyhidden">Help</span>
    </i>
  </div>
</form>

13.3 Form Inline #

<form class="form-inline">
  <label for="username-inline">Username:</label>
  <input class="form-control" id="username-inline" name="username-inline" type="text">
</form>

13.4 Form Flex #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

See "Form Arrange" for an alternative to this component.

<form class="form-flex">


  <div class="validation-group form-flex-wrapper">
    <label>
      <span class="visuallyhidden">Enter ZIP Code</span>
      <input id="form-flex-control" type="text" class="form-control form-control-mini" placeholder="Enter ZIP Code" name="zipcode">
    </label>

    <button type="button" class="btn btn-mini">Go</button>
  </div>

</form>

13.4.1 Form Arrange #

A form variant for use in conjunction with the .arrange layout component. Add the class .form-arrange to the .arrange element to remove all vertical margin from form components and add default horizontal form padding between .arrange-fill and .arrange-fit components.

Use the .form-arrange-compact modifier class to cut the horizontal padding in half.

Use the .form-arrange-margin modifier class to add standard vertical margin to the top of the component.

.form-arrange-compact

.form-arrange-margin

<form class="arrange form-arrange {$modifiers}">
  <label class="arrange-fill">
    <span class="visuallyhidden">Enter ZIP Code</span>
    <input type="text" class="form-control" placeholder="Enter ZIP Code" name="zipcode">
  </label>

  <div class="arrange-fit">
    <button type="button" class="btn">Find Stores</button>
  </div>
</form>

13.5 Chooser #

Error! Please make a selection.

.chooser-alt

Error! Please make a selection.

.chooser-fixed-width

Error! Please make a selection.

.chooser-block

Error! Please make a selection.

.chooser-rounded

Error! Please make a selection.

.chooser-rounded-mini

Error! Please make a selection.
<select name="" class="js-chooser-example {$modifiers}">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  <option selected value="option-4">Option 4</option>
  <option value="option-5">Option 5</option>
  <option value="option-6">Option 6</option>
  <option disabled value="option-7">Option 7</option>
  <option value="option-8">Option 8</option>
  <option value="option-9">Option 9</option>
  <option value="option-10">Option 10</option>
</select>

<p></p>

<div class="validation-chooser-error">
  <select name="" class="js-chooser-example-error {$modifiers}">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
    <option selected value="option-4">Option 4</option>
    <option value="option-5">Option 5</option>
    <option value="option-6">Option 6</option>
    <option disabled value="option-7">Option 7</option>
    <option value="option-8">Option 8</option>
    <option value="option-9">Option 9</option>
    <option value="option-10">Option 10</option>
  </select>

  <div class="validation-message validation-message-error">
    Error! Please make a selection.
  </div>
</div>

13.6 Option #

.option-form-control

.option-checkout

.option-small

<label class="option {$modifiers}">
  <input type="checkbox">
  <div class="option-content">Remember Me</div>
</label>

<label class="option {$modifiers}">
  <input type="checkbox" checked>
  <div class="option-content">Remember Me</div>
</label>

<label class="option {$modifiers}">
  <input type="checkbox">
  <div class="option-content validation-error">
    Error
    <i class="validation-marker validation-marker-error">
      <span class="visuallyhidden">Error Text</span>
    </i>
  </div>
</label>

13.6.1 Vertically Centered Option #

By default, option checkboxes are aligned with the top line of label text. Use the .option-valign modifier for option text that should be vertically centered regardless of line length.

<label class="option option-valign">
  <input checked type="checkbox">
  <div class="option-content">
    By this time the faint air had become a complete calm; so that whether or
    no, the Pequod was now fairly entrapped in the smell, with no hope of
    escaping except by its breezing up again.
  </div>
</label>

13.7 Radio #

.radio-alt

.radio-hero

<label class="radio {$modifiers}">
  <input type="radio" name="radio-group" id="radio-1">
  <div class="radio-content">Excellent</div>
</label>

<label class="radio {$modifiers}">
  <input type="radio" checked name="radio-group" id="radio-2">
  <div class="radio-content">Excellent</div>
</label>

<label class="radio {$modifiers}">
  <input type="radio" name="radio-group" id="radio-3">
  <div class="radio-content">
    <span class="display-inline-block">
      <span class="radio-heading">Excellent</span>
      <span class="radio-desc copy-mini">Excellent radio option description.</span>
      </span>
  </div>
</label>

<label class="radio {$modifiers}">
  <input type="radio" name="radio-group" id="radio-4">
  <div class="radio-content validation-error">
    <span class="display-inline-block">
      <span class="radio-heading">Error
        <i class="validation-marker validation-marker-error"><span class="visuallyhidden"></span></i>
      </span>
    </span>
  </div>
</label>

13.8 Radio Option Tile #

The radio option tile can contain as much content as needed. Their widths are flexible and can be controlled with a (responsive) container. There are three modifier classes available:

  • .radio-tile-no-borders
  • .radio-tile-valign-top
  • .radio-tile-valign-bottom

.radio-tile-no-borders

.radio-tile-valign-top

.radio-tile-valign-bottom

<label class="radio-tile {$modifiers}">
  <input type="radio" name="radio-tile-option" class="visuallyhidden">
  <span class="radio-tile-content">
    <span class="radio-tile-header">
      <i class="radio-tile-icon"></i>
      <span class="radio-tile-primary">
        <span class="radio-tile-heading">
          <span class="price-display"><span class="sup">$</span>1<span class="visuallyhidden">.</span><span class="sup">97</span></span>
          Standard
        </span>
        3 - 5 business days
      </span>
      <span class="radio-tile-aside">
        Estimated by <b>Sept 23</b>
      </span>
    </span>
  </span>
</label>

<label class="radio-tile {$modifiers}">
  <input type="radio" name="radio-tile-option" class="visuallyhidden">
  <span class="radio-tile-content">
    <span class="radio-tile-header">
      <i class="radio-tile-icon"></i>
      <span class="radio-tile-primary">
        <span class="radio-tile-heading">
          <span class="price-display">FREE</span>
          Pickup
        </span>
        Estimated by 5pm
      </span>
      <span class="radio-tile-aside">
        Available <b>Today</b>
      </span>
    </span>
    <span class="radio-tile-footer">San Jose - Story Rd</span>
  </span>
</label>


<label class="radio-tile {$modifiers}">
  <input type="radio" name="radio-tile-option" class="visuallyhidden">
  <span class="radio-tile-content">
    <span class="radio-tile-header">
      <i class="radio-tile-icon"></i>
      <span class="radio-tile-primary">
        <span class="radio-tile-heading">
          <span class="price-display">FREE</span>
        </span>
        Mixed shipping<br>
        6 - 9 business days
      </span>
      <span class="radio-tile-aside">
        Arrives <b>Fri, Aug 7 - 9</b>
      </span>
    </span>
    <span class="radio-tile-footer radio-tile-footer-alt">One or more items arrive by <b>value shipping</b> and the rest by <b>email</b>.</span>
  </span>
</label>

13.8.1 Mini Radio Option Tile #

.radio-tile-width

<div class="arrange arrange-spaced radio-tile-narrow-gutter">
  <div class="arrange-fit no-wrap">
    <label class="radio-tile radio-tile-mini {$modifiers}">
      <input type="radio" name="radio-tile-option" class="visuallyhidden">
      <span class="radio-tile-content">
        <span class="radio-tile-header">
          <i class="radio-tile-icon"></i>
          <span class="radio-tile-primary radio-tile-primary-alt">
            Credit Card
          </span>
        </span>
      </span>
    </label>
  </div>

  <div class="arrange-fit no-wrap">
  <label class="radio-tile radio-tile-mini {$modifiers}">
    <input type="radio" name="radio-tile-option" class="visuallyhidden">
    <span class="radio-tile-content">
      <span class="radio-tile-header">
        <i class="radio-tile-icon"></i>
        <span class="radio-tile-primary radio-tile-primary-alt">
          Cash
        </span>
      </span>
    </span>
  </label>
  </div>

  <div class="arrange-fit no-wrap">
    <label class="radio-tile radio-tile-mini {$modifiers}">
      <input type="radio" name="radio-tile-option" class="visuallyhidden">
      <span class="radio-tile-content">
        <span class="radio-tile-header">
          <i class="radio-tile-icon"></i>
          <span class="radio-tile-primary radio-tile-primary-alt">
            Paypal
          </span>
        </span>
      </span>
    </label>
  </div>

  <div class="arrange-fit no-wrap">
    <label class="radio-tile radio-tile-mini {$modifiers}">
      <input type="radio" name="radio-tile-option" class="visuallyhidden">
      <span class="radio-tile-content">
        <span class="radio-tile-header">
          <i class="radio-tile-icon"></i>
          <span class="radio-tile-primary radio-tile-primary-alt">
            Gift Card
          </span>
        </span>
      </span>
    </label>
  </div>

  <div class="arrange-fill">
  </div>
</div>

13.9 Radio Option #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

See "Radio Option Tile" for an alternative to this component.

<ul class="block-list">
  <li class="radio-option">
    <input type="radio" checked="" name="radio-option-radio" id="radio-option-radio-1">
    <label for="radio-option-radio-1">Credit Card</label>
  </li>

  <li class="radio-option">
    <input type="radio" name="radio-option-radio" id="radio-option-radio-2">
    <label for="radio-option-radio-2">Cash</label>
  </li>

  <li class="radio-option">
    <input type="radio" name="radio-option-radio" id="radio-option-radio-3">
    <label for="radio-option-radio-3">Paypal</label>
  </li>

  <li class="radio-option">
    <input type="radio" name="radio-option-radio" id="radio-option-radio-4">
    <label for="radio-option-radio-4">Gift Card</label>
  </li>
</ul>

13.9.1 Expanded Radio Option #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

See "Radio Option Tile" for an alternative to this component.

<div class="radio-expanded">
  <input type="radio" name="radio-expanded" id="Standard" value="Standard">
  <label for="Standard">
    <span class="radio-expanded-content">
      <span class="radio-expanded-primary">
        <span class="radio-expanded-heading">
          <span class="price-display"><span class="sup">$</span>1<span class="visuallyhidden">.</span><span class="sup">97</span></span>
          Standard
        </span>
        3 - 5 business days
      </span>
      <span class="radio-expanded-aside">
        Estimated by <b>Sept 23</b>
      </span>
    </span>
  </label>
</div>

<div class="radio-expanded">
  <input type="radio" name="radio-expanded" id="radio-expanded-2">
  <label class="radio-expanded" for="radio-expanded-2">
    <span class="radio-expanded-content">
      <span class="radio-expanded-primary">
        <span class="radio-expanded-heading">
          <span class="price-display">FREE</span>
          Pickup
        </span>
        Estimated by 5pm
      </span>
      <span class="radio-expanded-aside">
        Available <b>Today</b>
      </span>
    </span>
    <span class="radio-expanded-footer">San Jose - Story Rd</span>
  </label>
</div>

<div class="radio-expanded">
  <input type="radio" name="radio-expanded" id="radio-expanded-3">
  <label class="radio-expanded" for="radio-expanded-3">
    <span class="radio-expanded-content">
      <span class="radio-expanded-primary">
        <span class="radio-expanded-heading">
          <span class="price-display">FREE</span>
        </span>
        Mixed shipping<br>
        6 - 9 business days
      </span>
      <span class="radio-expanded-aside">
        Arrives <b>Fri, Aug 7 - 9</b>
      </span>
    </span>
    <span class="radio-expanded-footer radio-expanded-footer-alt">One or more items arrive by <b>value shipping</b> and the rest by <b>email</b>.</span>
  </label>
</div>

13.10 Alert #

This is an alert message.

.alert-error

This is an alert message.

.alert-success

This is an alert message.

.alert-warning

This is an alert message.

.alert-error.alert-block

This is an alert message.

.alert-error.alert-above-form

This is an alert message.
<span class="alert {$modifiers} active">This is an alert message.</span>

14 Product Tiles #

14.1 Brick #

Farberware 15pc Forged Cutlery Set

<div class="brick">
  <div class="brick-primary">
    <img class="product-image" src="img/product-small.png" alt="">
    <p class="heading-d brick-heading">Farberware 15pc Forged Cutlery Set</p>
  </div>

  <div class="brick-footer form-inline">
    <label>Quantity</label>
    <select>
      <option value="">1</option>
      <option value="">2</option>
    </select>
    <b class="pull-right">$29.97</b>
  </div>
</div>

14.2 Tile #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

  • $18.64

    Precision Economy Drop Spreader

    Average rating: 3.5 stars (123) ratings
  • $18.64

    Precision Economy Drop Spreader

    Average rating: 3.5 stars (123) ratings

.tile-alt

  • $18.64

    Precision Economy Drop Spreader

    Average rating: 3.5 stars (123) ratings
  • $18.64

    Precision Economy Drop Spreader

    Average rating: 3.5 stars (123) ratings
<ul class="tile-list">
  <li class="tile {$modifiers}">
    <a href="" class="tile-section">
      <img class="product-image" src="img/example-item.png" alt="">
    </a>

    <div class="price-display tile-row tile-section">
      <span class="sup">$</span>18<span class="visuallyhidden">.</span><span class="sup">64</span>
    </div>

    <p class="heading-d tile-heading tile-row tile-section">Precision Economy Drop Spreader</p>

    <div class="stars stars-small tile-row tile-section">
      <a href="">
        <i class="star star-rated"></i>
        <i class="star star-rated"></i>
        <i class="star star-rated"></i>
        <i class="star star-partial"></i>
        <i class="star star-empty"></i>
      </a>
      <span class="visuallyhidden">Average rating: 3.5 stars</span>
      <a href="">
        <span class="stars-reviews">(123)
          <span class="visuallyhidden">ratings</span>
        </span>
      </a>
    </div>

    <div class="tile-section tile-controls">
      <button class="dropdown-link">Quick look</button>
      <button class="btn btn-link"><i class="wmicon wmicon-add-to-cart"></i></button>
      <button class="btn btn-link"><i class="wmicon wmicon-add-to-list"></i></button>
    </div>
  </li>

  <li class="tile {$modifiers}">
    <a href="" class="tile-section">
      <img class="product-image" src="img/example-item.png" alt="">
    </a>

    <div class="price-display tile-row tile-section">
      <span class="sup">$</span>18<span class="visuallyhidden">.</span><span class="sup">64</span>
    </div>

    <p class="heading-d tile-heading tile-row tile-section">Precision Economy Drop Spreader</p>

    <div class="stars stars-small tile-row tile-section">
      <i class="star star-rated"></i>
      <i class="star star-rated"></i>
      <i class="star star-rated"></i>
      <i class="star star-partial"></i>
      <i class="star star-empty"></i>
      <span class="visuallyhidden">Average rating: 3.5 stars</span>
      <span class="stars-reviews">(123)
        <span class="visuallyhidden">ratings</span>
      </span>
    </div>

    <div class="tile-section tile-controls">
      <button class="dropdown-link">Quick look</button>
      <button class="btn btn-link"><i class="wmicon wmicon-add-to-cart"></i></button>
      <button class="btn btn-link"><i class="wmicon wmicon-add-to-list"></i></button>
    </div>
  </li>
</ul>

14.3 Responsive Tile #

A responsive product tile for use with the Grid component and in carousels. Tiles fill the width of their container.

<div class="Grid Grid--gutters">
  <div class="Grid-col u-size-1-2-s u-size-1-4-m u-size-1-5-l u-size-1-6-xl">
    <div class="Tile">
      <a
        class="Tile-linkOverlay"
        href="#"
        tabindex="-1"
        aria-hidden="true">
      </a>

      <div class="Tile-flags">
        <span class="flag flag-rollback flag-outline">Rollback</span>
      </div>

      <img
        width="144"
        height="144"
        class="Tile-img"
        src="img/example-item-alt.jpg"
        alt="">

      <div class="Tile-content">
        <div class="Tile-priceContent">
          <div class="price-display">
            <span class="sup">$</span>490<span class="visuallyhidden">.</span><span class="sup">00</span>
          </div>

          <div class="old-price">
            <span class="display-inline-block">Was <s>$649.95</s></span>
            <span class="display-inline-block"> | 23% Off</span>
          </div>
        </div>

        <a href="#" class="Tile-heading js-tile-heading">
          Straight talk Apple iPhone 5S 4G LTE 16GB Prepaid Smartphone
        </a>

        <a href="#" class="stars stars-small">
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <span class="visuallyhidden">Average rating: 5 stars</span>
          <span class="stars-reviews">201
            <span class="visuallyhidden">ratings</span>
          </span>
        </a>

        <div class="Tile-shippingPass">
          <span class="visuallyhidden">ShippingPass</span>
        </div>
      </div>

      <button class="Tile-footer">
        Quick Look
      </button>
    </div>
  </div>

  <div class="Grid-col u-size-1-2-s u-size-1-4-m u-size-1-5-l u-size-1-6-xl">
    <div class="Tile">
      <a
        class="Tile-linkOverlay"
        href="#"
        tabindex="-1"
        aria-hidden="true">
      </a>

      <img
        width="144"
        height="144"
        class="Tile-img"
        src="img/example-item-alt.jpg"
        alt="">

      <div class="Tile-content">
        <div class="Tile-priceContent">
          <div class="price-display">
            <span class="sup">$</span>490<span class="visuallyhidden">.</span><span class="sup">00</span>
          </div>
        </div>

        <a href="#" class="Tile-heading js-tile-heading">
          Straight talk Apple iPhone 5S 4G LTE 16GB Prepaid Smartphone
        </a>
      </div>

      <button class="Tile-footer">
        See All Department
      </button>
    </div>
  </div>

  <div class="Grid-col u-size-1-2-s u-size-1-4-m u-size-1-5-l u-size-1-6-xl">
    <div class="Tile">
      <a
        class="Tile-linkOverlay"
        href="#"
        tabindex="-1"
        aria-hidden="true">
      </a>

      <div class="Tile-flags">
        <span class="flag flag-rollback flag-outline">Rollback</span>
      </div>

      <img
        width="144"
        height="144"
        class="Tile-img"
        src="img/example-item-alt.jpg"
        alt="">

      <div class="Tile-content">
        <div class="Tile-priceContent">
          <div class="price-display">
            <span class="sup">$</span>490<span class="visuallyhidden">.</span><span class="sup">00</span>
          </div>

          <div class="old-price">
            <span class="display-inline-block">List price <s>$649.95</s></span>
            <span class="display-inline-block"> | 23% Off</span>
          </div>
        </div>

        <a href="#" class="Tile-heading js-tile-heading">
          Apple iPhone 5S
        </a>

        <a href="#" class="stars stars-small">
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <span class="visuallyhidden">Average rating: 5 stars</span>
          <span class="stars-reviews">201
            <span class="visuallyhidden">ratings</span>
          </span>
        </a>
      </div>
    </div>
  </div>

  <div class="Grid-col u-size-1-2-s u-size-1-4-m u-size-1-5-l u-size-1-6-xl">
    <div class="Tile">
      <a
        class="Tile-linkOverlay"
        href="#"
        tabindex="-1"
        aria-hidden="true">
      </a>

      <div class="Tile-flags">
        <span class="flag flag-rollback flag-outline">Rollback</span>
      </div>

      <img
        width="144"
        height="144"
        class="Tile-img"
        src="img/example-item-alt.jpg"
        alt="">

      <div class="Tile-content">
        <div class="Tile-priceContent">
          <div class="price-display">
            <span class="sub">From</span>

            <span class="sup">$</span>490<span class="visuallyhidden">.</span><span class="sup">00</span>
          </div>

          <div class="old-price">
            <span class="display-inline-block">Was <s>$649.95</s></span>
            <span class="display-inline-block"> | 23% Off</span>
          </div>
        </div>

        <a href="#" class="Tile-heading js-tile-heading">
          Straight talk Apple iPhone 5S 4G LTE 16GB Prepaid Smartphone
        </a>

        <div class="Tile-shippingPass">
          <span class="visuallyhidden">ShippingPass</span>
        </div>
      </div>
    </div>
  </div>

  <div class="Grid-col u-size-1-2-s u-size-1-4-m u-size-1-5-l u-size-1-6-xl">
    <div class="Tile">
      <a
        class="Tile-linkOverlay"
        href="#"
        tabindex="-1"
        aria-hidden="true">
      </a>

      <div class="Tile-flags">
        <span class="flag flag-rollback flag-outline">Rollback</span>
      </div>

      <img
        width="144"
        height="144"
        class="Tile-img"
        src="img/example-item-alt.jpg"
        alt="">

      <div class="Tile-content">
        <div class="Tile-priceContent">
          <div class="price-display">
            <span class="sub">See price in cart</span>
          </div>
        </div>

        <a href="#" class="Tile-heading js-tile-heading">
          Straight talk Apple iPhone 5S 4G LTE 16GB Prepaid Smartphone
        </a>

        <a href="#" class="stars stars-small">
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <span class="visuallyhidden">Average rating: 5 stars</span>
          <span class="stars-reviews">201
            <span class="visuallyhidden">ratings</span>
          </span>
        </a>

        <div class="Tile-shippingPass">
          <span class="visuallyhidden">ShippingPass</span>
        </div>
      </div>
    </div>
  </div>
</div>

14.4 Grid Tile #

<ul class="tile-list">
  <li class="tile-grid-unit-wrapper">
    <div class="tile-grid-unit">
      <span class="flag flag-clearance">Clearance</span>

      <a href="">
        <img class="product-image" src="img/example-item-large.png" alt="">
      </a>

      <div class="variants variants-small variants-swatches">
        <input type="radio" checked="" name="variant-grid" id="variant-grid-1">
        <label class="variant" for="variant-grid-1">
          <span class="variant-swatch" style="background: #fead41">Yellow</span>
        </label>

        <input type="radio" name="variant-grid" id="variant-grid-2">
        <label class="variant" for="variant-grid-2">
          <span class="variant-swatch" style="background: #d40b23">Red</span>
        </label>

        <input type="radio" name="variant-grid" id="variant-grid-3">
        <label class="variant" for="variant-grid-3">
          <span class="variant-swatch" style="background: #47d9bf">Teal</span>
        </label>

        <input type="radio" name="variant-grid" id="variant-grid-4">
        <label class="variant" for="variant-grid-4">
          <span class="variant-swatch" style="background: #9b69c9">Purple</span>
        </label>

        <div class="js-flyout flyout flyout-bottom">
          <button class="variant variant-expand js-flyout-toggle">
            <span class="visuallyhidden">Show More</span>
          </button>
        </div>
      </div>

      <div class="tile-price">
        <span class="price-display">
          <span class="sup">$</span>199<span class="visuallyhidden">.</span><span class="sup">94</span>
        </span>
      </div>

      <a href="">
        <p class="heading-d tile-heading">KitchenAid Classic White 4.5-Qt. Stand Mixer...</p>
      </a>

      <div class="stars stars-small">
        <a href="">
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-rated"></i>
          <i class="star star-partial"></i>
          <i class="star star-empty"></i>
        </a>
        <span class="visuallyhidden">3.5 stars</span>
        <a href="">
          <span class="stars-reviews">(123)
            <span class="visuallyhidden">ratings</span>
          </span>
        </a>
      </div>

      <div class="tile-details module">
        <ul class="block-list">
          <li><b>Free</b> home shipping</li>
        </ul>
      </div>

      <div class="tile-section tile-controls tile-controls-dotted">
        <button class="dropdown-link">Quick look</button>
        <button class="btn btn-link"><i class="wmicon wmicon-add-to-cart"></i></button>
        <button class="btn btn-link"><i class="wmicon wmicon-add-to-list"></i></button>
      </div>
    </div>
  </li>

  <li class="tile-grid-unit-wrapper">
    <div class="tile-grid-unit">
      <a href="">
        <img class="product-image" src="img/example-item-large.png" alt="">
      </a>

      <div class="variants variants-small variants-swatches"></div>

      <div class="tile-price">
        <span class="in-store-only">In stores only</span>
      </div>

      <a href="">
        <p class="heading-d tile-heading">KitchenAid Classic White 4.5-Qt. Stand Mixer...</p>
      </a>

      <div class="stars stars-small"></div>

      <div class="tile-details module">
        <ul class="block-list">
          <li><b>Free</b> shipping on orders over $50</li>
        </ul>
      </div>

      <div class="tile-section tile-controls tile-controls-dotted">
        <button class="dropdown-link">Quick look</button>
        <button class="btn btn-link"><i class="wmicon wmicon-add-to-cart"></i></button>
        <button class="btn btn-link"><i class="wmicon wmicon-add-to-list"></i></button>
      </div>
    </div>
  </li>
</ul>

14.5 Landscape Tile #

KitchenAid Classic White 4.5-Qt. Stand Mixer, K45SSWH

$199.94 Was: $199.00
Rollback in Mixers
Features:
  • 250 watts mixer
  • Planetary mixing action
  • Mixing accessories included
  • 97¢ shipping
  • Free store pick-up

Heritage Series Stand Mixer

In stores only
<div class="tile-landscape">
  <a href="#"><img class="product-image" src="img/example-item-large.png" alt=""></a>

  <div class="tile-content-wrapper">
    <div class="tile-content">
      <p class="heading-d tile-heading"><a href="#">KitchenAid Classic White 4.5-Qt. Stand <mark>Mixer</mark>, K45SSWH</a></p>

      <div class="tile-primary">
        <div class="tile-row">
          <span class="price-display">
            <span class="sup">$</span>199<span class="visuallyhidden">.</span><span class="sup">94</span>
          </span>

          <span class="price-old">Was: <s>$199.00</s></span>
        </div>

        <div class="tile-row">
          <span class="flag flag-{{flag_type}}">Rollback</span>
            <span class="flag-link">
              in <a href="#">Mixers</a>
            </span>
        </div>

        <div class="stars stars-small tile-row">
          <a href="">
            <i class="star star-rated"></i>
            <i class="star star-rated"></i>
            <i class="star star-rated"></i>
            <i class="star star-partial"></i>
            <i class="star star-empty"></i>
          </a>
          <span class="visuallyhidden">3.5 stars</span>
          <a href="">
            <span class="stars-reviews">(123)
              <span class="visuallyhidden">ratings</span>
            </span>
          </a>
        </div>

        <div class="variants variants-small variants-swatches">
          <input type="radio" checked="" name="variant-landscape" id="variant-landscape-1">
          <label class="variant" for="variant-landscape-1">
            <span class="variant-swatch" style="background: #fead41">Yellow</span>
          </label>

          <input type="radio" name="variant-landscape" id="variant-landscape-2">
          <label class="variant" for="variant-landscape-2">
            <span class="variant-swatch" style="background: #d40b23">Red</span>
          </label>

          <input type="radio" name="variant-landscape" id="variant-landscape-3">
          <label class="variant" for="variant-landscape-3">
            <span class="variant-swatch" style="background: #47d9bf">Teal</span>
          </label>

          <input type="radio" name="variant-landscape" id="variant-landscape-4">
          <label class="variant" for="variant-landscape-4">
            <span class="variant-swatch" style="background: #9b69c9">Purple</span>
          </label>

          <input type="radio" name="variant-landscape" id="variant-landscape-5">
          <label class="variant" for="variant-landscape-5">
            <span class="variant-swatch" style="background: #000">Black</span>
          </label>

          <input type="radio" name="variant-landscape" id="variant-landscape-6">
          <label class="variant" for="variant-landscape-6">
            <span class="variant-swatch" style="background: blue">Blue</span>
          </label>

          <div class="js-flyout flyout flyout-bottom">
            <button class="variant variant-expand js-flyout-toggle">
              <span class="visuallyhidden">Show More</span>
            </button>
          </div>
        </div>
      </div>

      <div class="tile-aside">
        <div class="quick-specs module">
          Features:
          <ul>
            <li>250 watts <mark>mixer</mark></li>
            <li>Planetary mixing action</li>
            <li>Mixing accessories included</li>
          </ul>
        </div>

        <div class="tile-aside-content">
          <ul class="block-list">
            <li>97¢ shipping</li>
            <li>Free store pick-up</li>
            <li><button class="dropdown-link">More</button></li>
          </ul>
        </div>
      </div>

      <div class="tile-footer">
        <a href="">See all KitchenAid Mixers</a>

        <div class="tile-section tile-controls tile-controls-dotted">
          <button class="dropdown-link">Quick look</button>
          <button class="btn btn-link"><i class="wmicon wmicon-add-to-cart"></i></button>
          <button class="btn btn-link"><i class="wmicon wmicon-add-to-list"></i></button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tile-landscape">
  <a href="#"><img class="product-image" src="img/example-item-large.png" alt=""></a>

  <div class="tile-content-wrapper">
    <div class="tile-content">
      <p class="heading-d tile-heading"><a href="#">Heritage Series Stand <mark>Mixer</mark></a></p>

      <div class="tile-primary">
        <div class="tile-row">
          <span class="in-store-only">In stores only</span>
        </div>
      </div>

      <div class="tile-aside">
        <div class="tile-aside-content">
          <ul class="block-list">
            <li><button class="dropdown-link">More</button></li>
          </ul>
        </div>
      </div>

      <div class="tile-footer">
        <div class="tile-section tile-controls tile-controls-dotted">
          <button class="dropdown-link">Quick look</button>
          <button class="btn btn-link"><i class="wmicon wmicon-add-to-cart"></i></button>
          <button class="btn btn-link"><i class="wmicon wmicon-add-to-list"></i></button>
        </div>
      </div>
    </div>
  </div>
</div>

15 Mixins #

15.1 wmzindex() #

We name every z-index and use them with the wmzindex() mixin. This lets us keep track of all z-indices used so that there is no guesswork about order. For more information, see http://css-tricks.com/handling-z-index/

To add a z-index, refer to the $wmzindex list in variables.styl and create a new z-index with the desired stacking order.

Most z-indices are named for their component. There are also several utility indices which cover common use cases:

  • "negative": Sets z-index: -1 to place content behind the normal flow.
  • "none": Resets z-index to 0.
  • "basic": Sets z-index: 1 to place content in front of the normal flow.
  • "basic-increment": Sets z-index: 2 to place content in front of elements with a "basic" z-index.

To use, call wmzindex() with a name. wmzindex("basic") will return z-index: 1;.

15.2 font-smoothing() #

The font-smoothing() mixin applies -webkit-font-smoothing and -moz-osx-font-smoothing to adjust font smoothing behavior on OS X browsers (Chrome, Safari, Opera, and Firefox). Best used on icon fonts and large text.

The mixin applies -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale by default. You can pass in "off" as a parameter to set these values back to their browser defaults, or "inherit" to set them to inherit.

15.3 css3pie() #

The css3pie() mixin adds basic CSS3 support for IE7+. Do not use this on * as it has a substantial performance impact. It should only be used on a case-by-case basis.

For more details, see http://css3pie.com/

15.4 blinktext() #

The blinktext() mixin applies a 'blinking' animation indefinitely, most commonly used to the make an ellipsis blink.

15.5 clearfix() #

The clearfix() mixin clears any float beahvior, allowing the component to stack horizontally neatly.

The clearfix() mixin applies display: table and content: "" on the pseudo elements &:before and &:after, avoiding the collapsed height effect of floats. Additionally, it applies clear: both to the &:after pseudo element to allow horizontal stacking.

15.6 ir() #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

The mixin ir() is used for image replacement. Apply the mixin to an element and add a background image, so that there is accessible text, but it displays an image for sighted users.

The preferred solution to use instead is to wrap the accessible text in a <span class="visuallyhidden"></span>.

15.7 visuallyhidden() #

We use the visuallyhidden() mixin when content should be made availble to screen readers users, but kept hidden from sighted users.

The visuallyhidden() mixin positions content off the visible screen using position: absolute; to remove the element from the page flow. It applies width: 1px; height: 1px; to make the element a one-pixel square in size and uses overflow: hidden to visually hide everything that does not fit in these dimensions. A negative margin, margin: -1px;, and a clip, clip: rect(0 0 0 0), is applied to define what portion of an element is visible while avoiding any page scrolling.

15.8 ellipsis() #

The ellipsis() mixin truncates a single line of text to an ellipsis (...) when it is too long. It applies white-space: nowrap, which means it will not work on a paragraph of text.

15.9 horizontal-dotted-border() #

The horizontal-dotted-border() mixin applies a horizontal border. The horizontal border has a repeating pattern of 1 gray and 2 transparent pixels, resulting in a visually aesthetic separator line.

15.10 img-hide-alt() #

The img-hide-alt() mixin is for hiding the alt-text in certain browsers (i.e. Firefox) since we have limited space the alt-text will go all over the place.

15.11 to-rem() #

The to-rem($prop, $values) mixin takes a CSS property with px values and converts the values to rem. It also adds a px fallback for old browsers. All font sizing should use this mixin, unless there is a particular use case in which an element should be sized with em values instead.

to-rem() accepts multiple values, allowing for shorthand declarations. For example, the following is valid: to-rem(padding, 20px 16px).

Examples:

  • to-rem(font-size, 24px);
  • to-rem(padding, 20px 16px);

15.12 remify() #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time. Use the to-rem() mixin instead.

The remify($values) mixin takes a px value and converts it to rem. It also adds a px fallback for old browsers. All font sizing should use this mixin, unless there is a particular use case in which an element should be sized with em values instead.

remify() accepts multiple values, allowing for shorthand declarations. For example, the following is valid: padding: remify(20px 16px).

15.13 emify() #

The emify($value) mixin takes a px value and converts it to em. emify() should only be used when adding minor breakpoints, because rem values cannot be used in breakpoints. In all other cases, use to-rem() instead.

15.14 absolute-center() #

The absolute-center() mixin centers an element vertically and horizontally.

To use, the containing element must have a position value of relative, absolute, or fixed and the element to be centered must have a fixed height if you want to center it vertically.

15.14.1 absolute-center-h() #

The absolute-center() mixin centers an element horizontally.

To use, the containing element must have a position value of relative, absolute, or fixed.

15.14.2 absolute-center-v() #

The absolute-center() mixin centers an element vertically.

To use, the containing element must have a position value of relative, absolute, or fixed and the element to be centered must have a fixed height if you want to center it vertically.

15.15 breakpoint() #

The breakpoint() mixin is used for min- and max-width media queries. It conditionally wraps code in media queries depending on the value of the $isResponsive variable. This allows us to generate fallback stylesheets that apply desktop screen styles without media queries.

breakpoint() takes two parameters:

  • $width: a px or em width for the media query
  • $type: the type of media query, min (default) or max

Pixel widths are automatically converted to em values.

breakpoint() is a block mixin. Example usage:

+breakpoint($breakpoint-m) {
  body {
    background: blue;
  }
}

16 Utilities #

16.1 Block list #

The .block-list utility applies zero padding, list-style: none, and aligns text to the left.

16.2 Pull #

.pull-[direction]-[size] applies float to elements with the given direction for the given screen size.

Valid directions:

  • right
  • left
  • none.

Valid sizes:

  • m
  • l
  • xl.

Examples:

  • .pull-right (Applies float: right to all screen sizes)
  • .pull-left-m (Applies float: left to screens wider than $breakpoint-m)
  • .pull-right-l (Applies float: right to screens wider than $breakpoint-l)
  • .pull-none-xl (Applies float: none to screens wider than $breakpoint-xl)

Deprecated examples:

  • .deprecated-pull-left-m (Applies float: left to screens wider than $screen-m)
  • .deprecated-pull-right-l (Applies float: right to screens wider than $screen-l)
  • .deprecated-pull-none-xl (Applies float: none to screens wider than $screen-xl)

16.3 Clearfix #

The .clearfix utility applies the mixin clearfix() to allow components to stack horizontally neatly.

16.4 Visually Hidden #

The .visuallyhidden utility applies the mixin visuallyhidden() to make content available to screen reader users, but kept hidden from sighted users.

Add to cart
<label>
  <span class="visuallyhidden">An accessible placeholder</span>
  <input class="form-control" type="text" placeholder="An accessible placeholder">
</label>

<i class="wmicon wmicon-add-to-cart">
  <span class="visuallyhidden">Add to cart</span>
</i>

16.5 Absolute Center #

The Absolute Center utilities are an elegant way to center an element in a container vertically or horizontally. To use, the containing element must have a position value of relative, absolute, or fixed, and the element to be centered must have a fixed height if you want to center it vertically.

The .absolute-center utility centers an element vertically and horizontally.

The .absolute-center-h utility centers an element horizontally.

The .absolute-center-v utility centers an element vertically.

16.6 Hide Content #

.hide-content-[size] applies display: none !important to elements for the given screen size.

Valid values:

  • .hide-content (Applies display: none to all screen sizes)
  • .hide-content-xs (Applies display: none to screens wider than $breakpoint-xs)
  • .hide-content-s (Applies display: none to screens wider than $breakpoint-s)
  • .hide-content-m (Applies display: none to screens wider than $breakpoint-m)
  • .hide-content-l (Applies display: none to screens wider than $breakpoint-l)
  • .hide-content-xl (Applies display: none to screens wider than $breakpoint-xl)
  • .hide-content-max-xs (Applies display: none to screens narrower than $breakpoint-xs)
  • .hide-content-max-s (Applies display: none to screens narrower than $breakpoint-s)
  • .hide-content-max-m (Applies display: none to screens narrower than $breakpoint-m)
  • .hide-content-max-l (Applies display: none to screens narrower than $breakpoint-l)
  • .hide-content-max-xl (Applies display: none to screens narrower than $breakpoint-xl)

Deprecated values (based on the old/deprecated breakpoints):

  • .deprecated-hide-content-m
  • .deprecated-hide-content-l
  • .deprecated-hide-content-xl

16.7 Display #

.display-[value]-[size] applies display for the given value at the given screen size.

Valid values:

  • inline
  • inline-block
  • block.

Valid sizes:

  • xs
  • s
  • m
  • l
  • xl.

Examples:

  • .display-block (Applies display: block to all screen sizes)
  • .display-inline-xs (Applies display: inline to screens wider than $breakpoint-xs)
  • .display-inline-block-l (Applies display: inline-block to screens wider than $breakpoint-l)
  • .display-block-xl (Applies display: block to screens wider than $breakpoint-xl)

Deprecated examples:

  • .deprecated-display-inline-m
  • .deprecated-display-inline-block-l
  • .deprecated-display-block-xl

Note: To hide content, use .hide-content. There is no .display-none class.

16.8 Hide Pseudo #

The .hide-pseudo utility applies display: none !important to both the :before and :after pseudo classes.

.hide-pseudo-before applies display: none !important only to the :before pseudo class.

.hide-pseudo-after applies display: none !important only to the :after pseudo class.

16.9 Text Align #

The .text-center utility center-aligns text with the !important flag.

The .text-left utility left-aligns text with the !important flag.

The .text-right utility right-aligns text with the !important flag.

16.9.1 Text Align (without the !important flag) #

Deprecated: This component is deprecated. Do not use it in old or new projects. Pages using it may break at any time.

See "Text Align" above as an alternative to this component.

The .align-center utility center-aligns text.

The .align-left utility left-aligns text.

The .align-right utility right-aligns text.

16.10 Vertically align #

The .valign-top utility applies vertical-align: top !important. Top aligns the top of the element and its descendants with the top of the entire line.

The .valign-middle utility applies vertical-align: middle !important. Middle aligns the middle of the element with the baseline of its parent.

The .valign-baseline utility applies vertical-align: baseline !important. Baseline aligns the dominant baseline of the element's first text node with the dominant baseline of its parent.

The .valign-bottom utility applies vertical-align: bottom !important. Bottom aligns the bottom of the element and its descendants with the bottom of the entire line.

16.11 Padding #

The .padding-ends utility applies 0.5em padding on the top and bottom.

The .padding-sides utility applies 0.5em padding on the left and right.

The .padding-top utility applies 0.5em padding on the top.

The .padding utility applies to-rem(padding, 16px).

The .padding-large utility applies to-rem(padding, 20px).

16.11.1 Padding spacing #

.[size]-padding-[direction] applies a padding to elements in the given direction and with the given size.

Valid directions:

  • ends
  • sides
  • none.

Valid sizes:

  • xxs
  • xs
  • s
  • m
  • l
  • xl
  • xxl

Examples:

  • .s-padding-ends applies $s-spacing on the top and bottom to all screen sizes
  • .xxl-padding-sides applies $xxl-spacing on the right and left to all screen sizes
  • .m-padding applies padding: $m-spacing to all screen sizes

16.12 Margin #

The .margin-ends utility applies 0.5em to the top and bottom margins.

The .margin-top utility applies 0.5em only to the top margin.

The .margin-bottom utility applies 0.5em only to the bottom margin.

The .margin-sides utility applies 0.5em to the left and right margins.

The .no-margin utility applies margin: 0 !important.

16.12.1 Margin spacing #

.[size]-margin-[direction] applies a margin-[direction] to elements with the given size.

Valid directions:

  • top
  • left
  • right
  • ends
  • sides

Valid sizes:

  • xxs
  • xs
  • s
  • m
  • l
  • xl
  • xxl

Examples:

  • .s-margin-top applies margin-top: $s-spacing to all screen sizes
  • .xxl-margin-left applies margin-left: $xxl-spacing to all screen sizes
  • .m-margin-ends applies $m-spacing to the top and bottom margins to all screen sizes
  • .xs-margin-sides applies a $xs-spacing to the left and right margins to all screen sizes

16.13 White-space #

The .no-wrap utility applies white-space: nowrap, which collapses whitespace as for normal, but prevents line breaks (text wrapping) within text. The result is a single line of text.

16.14 Width #

The .width-full utility applies width: 100%.

16.15 Height #

The .height-full and .fullheight utilities applies height: 100%.

The .height-max utility also applies an min-height: 100% in addition to height: 100%.

16.16 Skip #

The .skip utility is visually hidden until its :focus pseudo class is active. It appears in the top left of the screen, on top of all other content.

This is a standard for web accessibility, since it allows screen readers to skip the navigation and jump to the main content below.

16.17 Image Hide Alt #

The .img-hide-alt utility applies the img-hide-alt() mixin.

16.18 Scrollable #

The .scrollable utility applies overflow: auto and -webkit-overflow-scrolling: touch.

The result is the component will have scrollbars, and on a touch device, the component will use momentum-based scrolling (i.e. the content continues to scroll for a while after finishing the scroll gesture).

16.19 Size #

.u-size-[width]-[size] adds a given % width to an element at a given breakpoint. This utility is primarily meant for usage on grid columns, but can be used independently.

.u-size takes a fraction-based width and an optional minimum screen size to apply to. If no screen size is provided, the width will apply at all breakpoints.

For example, .u-size-1-2 spans half of the container and .u-size-1-12 spans one twelfth. .u-size-2-3-m spans two thirds of the container on screens wider than $breakpoint-m.

To set a width back to 100% at a given breakpoint, use `.u-size-1-[size].

Valid width bases:

  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
  • 10
  • 12

Valid sizes:

  • xs
  • s
  • m
  • l
  • xl

16.20 Offset #

.u-offset-[width]-[size] adds a given % margin-left to an element at a given breakpoint to push it to the side. This utility is primarily meant for usage on grid columns, but can be used independently.

.u-offset takes a fraction-based width and an optional minimum screen size to apply to. If no screen size is provided, the width will apply at all breakpoints.

See Size #16.20 for more information.

Valid width bases:

  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
  • 10
  • 12

Valid sizes:

  • xs
  • s
  • m
  • l
  • xl

16.21 Breakpoint Indicator #

Breakpoint-indicator for reading in breakpoints in JS, sets the content of hidden Breakpoint-indicator to current breakpoint size, to allow querying by JS.

16.22 Responsive Border Removal #

.u-borderNone removes border by setting border-style: none.

.u-borderNone-[size] can be used to limit the effect to a given screen size.

Valid sizes:

  • xs
  • s
  • m
  • l
  • xl

16.23 Border Radius #

.u-borderRadiusFull applies a huge border-radius to create a pill shape, or a full circle (on elements with equal dimensions.)

16.24 Text Color Themes #

.u-textBlack makes the text color $black

.u-textBlue makes the text color $blue

.u-textGreen makes the text color $green

.u-text[Grey|Gray] makes the text color $grey-medium

.u-textRed makes the text color $red

.u-textRedSecondary makes the text color $red-secondary

.u-textWhite makes the text color $white

16.25 Background Color Themes #

.u-bgBlue makes the background color $blue

.u-bgGreen makes the background color $green

16.26 Padded Row #

To utilize the same left and right paddings established from the .ResponsiveContainer class, but not inherit the min-width and max-width settings. This gives the class more flexibility. Currently this is used mainly when setting up carousels, but can be applied to any element as needed.

When applying on an element use the .u-paddedRow class the left and right padding settings will be as follows.

Padding Left and Right settings:

  • default: 8px
  • $breakpoint-s: 16px
  • $breakpoint-m: 16px
  • $breakpoint-l: 20px
  • $breakpoint-xl: 32px

16.27 Currency delimiter #

The .currency-delimiter utility applies the visuallyhidden() mixin to screens wider than $breakpoint-m.

One example is for price display to keep the "." hidden but accessible on screens wider than $breakpoint-m.