Grid

Overview

The grid uses bootstrap's grid classes. Below is an example of the grid. Above, you will see the HTML markup and you will see below how it is rendered. A .container or .container-fluid (100% viewport width) class is required on the outer element that wraps the grid. A .row class is required to wrap columns, which use the class .col or .col-*. For a full understanding of the Bootstrap grid system, please refer to the Bootstrap Grid documentation.

The grid is a 12-column grid across which content can be displayed.

In combination with the grid, developers will have the full use of Bootstrap Utilities for Layout (for example, see the centered column in the last row which uses flexbox layout utility classes .d-flex and .justify-content-center).

<div class="container">
    <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>
    <div class="row">
        <div class="col">Column</div>
        <div class="col">Column</div>
        <div class="col">Column</div>
    </div>
    <div class="row">
        <div class="col-4">Column</div>
        <div class="col-5">Column</div>
    </div>
    <div class="row d-flex justify-content-center">
        <div class="col-6">Column</div>
    </div>
</div>
Column
Column
Column
Column
Column
Column
Column
Column

Grid & Breakpoints

Design System grid at the SM breakpoint.
Design System grid at the MD breakpoint.
Design System grid at the LG breakpoint.
Design System grid at the XL breakpoint.

Breakpoint Reference Doc

All Brands

Overview of Design System at different breakpoints.

Grid Settings

Extra small
<576px
Small
≥760px
Medium
≥1023px
Large
≥1476px
Extra large
≥1814px
Max container width None (auto) None (auto) None (auto) None (auto) 1848px
Class prefix .col-
.col-xs-
see usage guidelines
.col-
.col-sm-
see usage guidelines
.col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 24px (12px on each side of a column)
Nestable Yes
Column ordering Yes

XS/SM Usage Guidelines

In nearly all instances the XS and SM breakpoints are intended to be visually and functionally identical.

If there is a need to target either of these breakpoints specifically an exception should be requested from the design team.

To achieve this, develop with a general Bootstrap mobile-first class, then override as needed for MD, LG, and XL breakpoints.

DO

  • Do apply a general .col- class.
    <div class="col-6 col-md-4 col-lg-3"></div>

DON'T

  • Don't apply specific .col-xs or .col-sm classes.
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3"></div>

PLP Reference

12 Column Grid & Breakpoints

Screenshots below are meant to highlight the grid and layout usage for the new PLP & Search Results grid.

Overview of Design System at different breakpoints.

Logo & Colors

Overview

Each brand is defined by its logo and primary color. This consistent use of logo and primary color throughout the site will provide a seamless user experience. Each brand’s primary color is used to show brand differentiation in nano bars, buttons, page elements and more.

Default

Favicon & Tab Icon

Primary

#3a2a7c

Core Colors

This set of core colors will be utilized by all brands. A consistent use of ADA compliant colors to represent core functions such as error, success and text links provide a seamless experience as users move from brand to brand as well as through the universal checkout process.

Universal Colors

#FFFFFF

#F5F5F5

#949494
Input Borders

#525252
Input Placeholder

#DFDFDF

#000000

Sale

#A70033

Validation

#B50000
Error

#096506
Text Only

#0DA508
Elements Only

Links

#0449B9
Text Link

#003FA3
Text Link Hover

Typography

Usage

To bring consistency to the user experience, as well as reduce font calls to improve site performance, we are leveraging a universal font style for all brands. Body, navigation and other universal elements will all use Helvetica Neue (Neue Helvetica W05). HTML heading tags will utilize brand specific fonts. Heading tags for all brands will utilize the same font size and placement on a page. Display tags should be used for homepage creative and other marketing areas throughout the site. The brand design teams have more freedom in regard to font size and usage with Display tags. Brands should follow the existing process with the content development team.

Brand Specific Fonts

Each brand has a maximum of 6 font choices to choose from. If a brand is using all 6 font choices, and desires to add another font, they must remove one before adding the new font. Fonts are added through Monotype. We utilize web projects and add the call into the css. Developers must be familiar with the process to add and remove fonts which is documented here.

Name Weight Style Utility Class
1 "linotype-didot" 400 normal .brand-font-1
2 "linotype-didot" 400 italic .brand-font-2
3 "Montserrat" 400 normal .brand-font-3
4 "Montserrat" 600 normal .brand-font-4
5 "Mighty River" 400 normal .brand-font-5
6 "Inter Tight" (Default Universal Font) 400 normal .brand-font-6

Universal Brand Fonts (Default)

Name Weight Style Utility Class
1 "Inter Tight" 400 normal .brand-font-0
4 "Inter Tight" 400 italic -
2 "Inter Tight" 500 normal -
3 "Inter Tight" 700 normal -

Primary Brand Fonts

Name Utility Class
1 "Montserrat" .brand-font-primary
2 "Montserrat" .brand-font-primary-bold

Headings

.h1 Catherine's Heading
.h2 Catherine's Heading
.h3 Catherine's Heading
.h4 Catherine's Heading
.h5 Catherine's Heading
.h6 Catherine's Heading

Body Text

Default Body Text

.font-size-base
.font-weight-bold
.font-italic
Body 16. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 16. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 16. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Medium Body Text

.font-size-md
.font-size-md .font-weight-bold
.font-size-md .font-italic
Body 14. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 14. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 14. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Small Body Text

.small OR .font-size-sm
.small OR .font-size-sm .font-weight-bold
.small OR .font-size-sm .font-italic
Body 12. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 12. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 12. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Muted Text

.text-muted
.text-muted .font-weight-bold
.text-muted .font-italic
Body 16. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 16. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Body 16. Normal paragraph. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Link Text

Standard HTML anchor, link texts are generally used to navigate within or to an outside website.

To visually show/represent an anchor tag (or link tag) like a button element, add relevant .btn classes from "Component Library" > "Buttons" section for button elements onto an anchor tag.

Inversely, to show/represent a button tag like a regular "Link Text", add the .btn-anchor class in addition to the .btn-link implementation of a button element. This implementation is exemplified in the "Component Library" > "Buttons" section

<a href="#link-text">Link Text</a>
Default
Hovered
Focused

Marketing Display

Used for homepage creative and other marketing areas throughout the site. The brand design teams have more freedom in regard to font size and usage with Display tags. Brands should follow the existing process with the content development team.

.display-1
Desktop Offer
Mobile Offer
.display-2
Desktop Headline
Mobile Headline
.display-3
Desktop Subhead
Mobile Subhead
.display-4
Desktop Eyebrow
Mobile Eyebrow

Iconography

Navigation Icons
General Icons
Payment Icons