Grid system

We're using Bootstrap 4 grid system and flexbox utility so check the docs.

Do not modify anything on any grid component by adding extra CSS or adding any other class than column classes provided in the grid. IE: don't add .d-flex on a col to make the content inside vertically aligned. Add classes to column content and let the columns do the layout work.

Breakpoint name XS SM MD LG XL
Breakpoint size <480px ≥480px ≥768px ≥1200px ≥1600px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

Typography

Body text

Lorem ipsum dolor and a link, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore. Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?

Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.

Lead text

Lead text uses different font family and follows breakpoint font size changes like titles and displays. Use .lead to style your content like this this.

Lorem ipsum dolor, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore. Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?

Anchors

Use .anchor-inv for inverted anchor color variation.

Use .anchor-dark for dark anchor color variation.

Headings

Headings by default all have %title-base and %title-link silent classes applied. Sizes are defined using utilities/type.scss. Check $title-breakpoint-settings in common/variables.scss for a list of sizes.

Example Heading Level

Heading 1

h1 $font-size-level-2

Heading 2

h2 $font-size-level-4

Heading 3

h3 $font-size-level-5

Heading 4

h4 $font-size-level-6
Heading 2
h5 $font-size-level-6
Heading 6
h6 $font-size-level-6

This is a h1 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h2 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h3 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h4 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h5 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h6 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Titles

Add .title class to heading or any other element to make it look like a title. You can also use size modifier classes. This component has more styling than basic heading.

Sizes modifiers are defined using utilities/type.scss. Check $title-breakpoint-settings in common/variables.scss for a list of classes and sizes.

This is a Level 1 title

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Level 2 title

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Level 3 title

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Level 4 title

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can also use type utilities to modify the titles.

This is a bold Level 2 title

This is an italic Level 3 title

This is an italic and font weight normal Level 4 title

Display

Add .display class to change style of any heading or text. You can also use size modifier classes. This component has different styling than title.

Sizes modifiers are defined using utilities/type.scss. Check $title-breakpoint-settings in common/variables.scss for a list of classes and sizes.

This is a Level 1 display

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Level 2 display

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Level 3 display

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Level 4 display

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Lists unstyled

Use .list-unstyled or extend %list-unstyled to get an unstyled list. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Custom Lists

Use .list-custom or extend %list-custom to get a custom list. This applies to all children list items.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Horizontal rule

Use to separate content sections.

Important: don't use it to separate div elements or some similar layout actions. Use border instead or if you have to add an element you can use .separator class on a div or span or any other element.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Emphasis

Lorem ipsum dolor sit amet and mark text and some small trailing text, 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Type utilities

Set font size and line height, some font style properties and fotn alignment using utility classes.

  • * - classes also have viewport modifiers (IE: .ta-md-right, .ta-lg-center, etc.).
Class Example
.tt-lower Lowercase text
.tt-upper Uppercase text
.tt-cap Capitalize text
.tt-none No text transformation
.fw-normal Font weight normal
.fw-bold Font weight bold
.fs-italic Font italic
.ff-prim Font primary
.ff-sec Font secondary
.ta-right * Text align right
.ta-center * Text align center
.ta-left * Text align left

Icons

Add icons in text or links. There are 2 size sets of icons, 1.6rem x 1.6rem and 2.4rem x 2.4rem. All svg elements have fill: currentColor set so the color follows the parent color.

Important: Don't foget to add aria-hidden="true" on the icon, and in case there is no text to explain the icon aria-label attribute on the parent.

Name 16-set 24-set Social (Example in link)
caret-left - -
caret-right -
caret-up - -
caret-down -
hide - -
show - -
back - -
close - -
edit - -
menu - -
search - -
facebook - -
google-plus - -
instagram - -
linkedin - -
twitter - -
youtube - -

There are 2 special icons:

play used in the button play wrapper .btn--play.

zip used as zip files icon.

Buttons

Use .btn class to reset button styling on button, input or a and use the modifier classes to add color styling. Allways use button element if you are writing the markup.

When using button classes on a elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

You can also use the .btn class on other elements but some interaction that is based on pseudo selectors (mainly :focus) will be different.

Pseudo selectors :focus and :active are styled but you also have classes (.focus and .active) to trigger the appearance programmatically.

Link Span

Button variants

.btn--primary
Link Span
.btn--primary-dark
Link Span
.btn--primary-light
Link Span

Button disabled

Add disabled attribute to button or .disabled class to a. All the buttons will look the same in their disabled state no mater the variant.

Loading state

You can use .loading class on all buttons if you need to add a loading feedback after user clicks on a button.

Font modifications

Use type utilities to modify button font text properties.

Button size

Use .btn--sm for small button size.

Link Span

Button block

Use .btn--block for full width buttons.

Button play

Use .btn--play for play button icon wrap.

Special components for link styling. Layout is set with grid.

.link-underline

When using link with icon, wrap the text in link with span so the svg automatically sets its spacing regardless of position (before/after)

.link-icon .link-brick .link-brick--secondary

Collections

Use .collection to style list of links. Collection class can be set easily on div or ul but note that it can only be consisted of anchors.

If you wish to imitate look of collection item use silent class %collection-item and extend it in the style of element you wish to look like in collection

Collection has modifiers which will modify only properly formatted collections, they wont work on elements that are not anchors.

Modifiers

For inverted collection use .collection--inv

For normal font weight use .collection--normal

For vertically stacked collection use .collection--stacked

For vertically stacked collection that aligns with its title use .collection--stacked in combination with .collection--align-fix

Collection

Use .nav class to reset unordered list styling on ul and use the modifier classes to change font sizes.

You can add .active and .disabled classes to style the links. Important: the classes get added to the li element, not the a.

For column navigation use .nav--stacked or use Flex utilities for more responsive controls.

Use .row for grid layout and add grid classes to li items for spacing and more complex layout functions.

.nav--sm

Utility helper to account for link padding align link text to left. Uses negative margin on left side of nav. Use it with .nav and .nav-stacked and with all size and color modifiers. Don't use with othe .nav modifiers.

Nav dropdown

Forms

Use .form-control to style all input elements except where otherwise noted.

Full border forms

Use .form-control--full-border to style forms like below.

Disabled Forms

Checkbox and radio

Styling for default checkbox and radio if we can't use our styled version.


For custom checkboxes and radios use .custom-control with modifiers below

.custom-control--checkbox


.custom-control--checkbox-secondary


.custom-control--radio

Form grid

Use Grid classes for grid layout in form. Add .row for form and add col classes to .form-block. Note that when you use a grid in a form ALL form elements have to be inside .form-block and have a col class applied to them to account for the negative margin on .row. Or add .row in form and wrap element's in .col classes.

Form modifiers

A opposed to .form-control--full-border form input modifier, inverted form modifier: .form--inv and small form modifier: .form--sm go directly on form element.

Small form inputs

Use .form-sm to style forms like below.

Form inverted

Use .form--inv to style forms like below.


These forms are made in HTML Forms

To use any of the forms simply add their shortcode.

Shortcode: [hf_form slug="quote"]

Shortcode: [hf_form slug="warranty"]

Personal Information

This is the personal information the warranty will be registered to.

Product Information

Select2

We're using select2 to style select's where possible. Just add .js-custom-select class to the select to the select to init select2.

Using the class has some options set by default:

  • width
  • dropdownParent

In case those options don't work for you can also init select2 by yourself without the class or use select2 data attributes to override the options.

The target class .js-custom-select has some CSS applied to it which hides the select element until select2 loads. Check components/select2.scss for more details.

Default selects look like this

Styled selects

Picker

Set .picker on an element which is used as an option for picking as seen on examples below:

Picker with text

S M L

Color picker uses modifier .picker--no-border so it does not have border from the start like regular picker.

Alerts

With links inside

Borderline

Borderline adds left border on content. Use .borderline on wrapper around content.

Regular borderline .borderline
Secondary borderline .borderline--secondary
Dick’s Sporting Goods 1221 7 Green Acres Commons
Valley Stream, NY 11582
(973) 759-3968
www.dickssportinggoods.com
Dick’s Sporting Goods 1221 7 Green Acres Commons
Valley Stream, NY 11582
(973) 759-3968
www.dickssportinggoods.com

Cards

Company Update

The only thing that is constant is change

January 22, 2018
Company Update

The only thing that is constant is change

January 22, 2018
Company Update

The only thing that is constant is change

January 22, 2018

Cards with left gradient

Inevitable

Inevitable

Inevitable

Inevitable

Inevitable

Pushbar


Dolor sit
Consectetuer
Adipiscing elit
Diam
Nonummy nibh
Tincidunt
Ut laoreet
Magna
Aliquam erat
Ut
Wisi enim
Minim
Veniam quis
Exerci
Tation ullamcorper
Lobortis
Nisl ut
Ex
Ea commodo

Lorem ipsum

Duis
Autem vel
Iriure
Dolor in

Feugait
Nulla facilisiepsum
Non
Deposit quid
Quo
Hic escorol
Quarrels
Et gorilla
Sic
Ad nauseum
Ignitus
Carborundum e
Unum
Defacto lingo
Igpay
Atinlay marquee
Non
Provisio incongruous
Nolo
Contendre gratuitous
In
Vulputate velit
Molestie
Consequat vel
Dolore
Eu feugiat
Facilisis
At vero
Et
Accumsan et
Odio
Dignissim qui
Praesent
Luptatum zzril
Augue
Duis dolore
Dolor sit
Consectetuer
Adipiscing elit
Diam
Nonummy nibh
Tincidunt
Ut laoreet
Magna
Aliquam erat
Ut
Wisi enim
Minim
Veniam quis
Exerci
Tation ullamcorper
Lobortis
Nisl ut
Ex
Ea commodo

Slider

  • In that truly which he stirreth not, he shall be.

  • What if it back that part with angels lives.

  • Faith, I will I hear that one side o' the fool is born.

Boxes

Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00
Striker HPPLT IIIa
$420.00
$378.00