Employer Style Base Pattern Library

v1.0

Overview and Base Variables

These patterns are based on our style guide

Breakpoints

Mobile breakpoints

Variable Value Pixels
$small-screen-max 40em 640px
$medium-screen-min $small-screen-max 640px
$medium-screen-max 64em 1024px
$large-screen-min $medium-screen-max 1024px
Variable Value Notes
$midrange-nav-max 66.5em (~1060px) Point at which full nav + search no longer fits in one line
$mobile-nav-max 31em (490px) Point at which full nav + collapsed right-side nav no longer fit in one line

Spacing

Base Spacing

Variable Value
$base-spacing-smallest 6px
$base-spacing-small 12px
$base-spacing-medium 30px
$base-spacing-large 50px
$base-spacing-xlarge 70px

Container Padding

Variable Value
$section-padding 70px
$section-padding–mobile 50px
$header-padding 70px
$container-edge-padding 20px