Responsive container:

Content must be wrapped in a container with a class of .responsive-content for thes styles below to be applied.


Override default scaling by appending "-m" or "-t". For example, this headline will not scale at any breakpoint: <h1 class="headline-xl headline-xl-t headline-xl-m"> Example <h1>
.headline-xl - Scales down to .headline-md [tablet], .headline-sm [mobile]

Headline XL

.headline-lg - Scales down to .headline-md [tablet], .headline-sm [mobile]

Headline LG

.headline-md - Stays .headline-md [tablet], scales down to .headline-sm [mobile]

Headline MD


Headline SM


.button - Scales down to secondary-button [mobile]
Shop Now Read More

Background Images:

.home-carousel-bg will set the height to: 630px [desktop], 525px [small desktop (990px-1280px)], 450px [tablet], 320px [mobile].

Viewport specific cropping:
Append "-m" or "-t". For example, this would crop from the right on desktop, from the left on tablet, and from both sides on mobile: <div class="bg-crop-right bg-crop-left-t bg-crop-both-m"></div>

Alignment & Grid System:

.center-vertically - Vertically centers the container
.grid-column-1 - Grid columns (1 through 12)
.grid-column-offset-1 - Column offset (1 through 12)
.grid-column-sd-1 - Small desktop (990px-1280px) grid columns (1 through 12)
.grid-column-offset-sd-1 - Small desktop (990px-1280px) column offset (1 through 12)
.grid-column-t-1 - Tablet grid (768px-989px) columns (1 through 12)
.grid-column-offset-t-1 - Tablet (768px-989px) column offset (1 through 12)
.grid-column-m-1 - Mobile (767px and below) grid columns (1 through 12)
.grid-column-offset-m-1 - Mobile (767px and below) columns offset (1 through 12)


.color-white - Changes font color to white