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.

Inverted anchor

Use .anchor-dark for dark anchor color variation.

Dark anchor

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.

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
`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.

Link component

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

Link underline

.link-underline

Underlined Link

Link with icon

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 Icon Right
Link Icon Left

Bricked Link

.link-brick

Bricked Link

Secondary Bricked Link

.link-brick--secondary

Secondary Bricked Link

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

Navs

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.

Nav stacked

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

Nav grid

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

Size modifier

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

Default .nav with alignment fix. The text in the links is aligned with the text in this paragraph.

Stacked .nav with alignment fix. The text in the links is aligned with the text in this paragraph.

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 checkbox

Disabled checkbox

.custom-control--checkbox-secondary

Custom checkbox

Disabled checkbox

.custom-control--radio

Custom radio

Disabled radio

Search form

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.

Email address

Example select

Example multiple select

Example textarea

Default checkbox and a link

Default radio

Second default radio

Email address

Example select

Example multiple select

Example textarea

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

I agree to all terms and conditions*

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.