Breakpoints

Usage

To deliver a consistent experience across all devices, we place responsive web design at the forefront of our design process.

By using a fluid grid with breakpoints at key resolution widths, we can optimize the customer experience across device groups and always provide them with an interface that they recognize and are accustomed to.

Our current breakpoints are defined at:

Small (mobile): 375px
Medium (tablet): 768px
Large (desktop): 1024px
X-Large (desktop): 1280px

Example - Visual Reference

Minimum Page Height

Usage

We have set a minimum page height between the bottom of the navigation and the top of the footer. This helps to deliver a cohesive experience throughout a journey and prevents the navigation and footer from colliding.

The following specifications refer to the vertical breakpoints between the bottom of the navigation and top of the footer, and the padding above and below the component between them.

Specs - X-Small (Mobile)

Vertical Breakpoint = 320px
Padding Above and Below = 10px

Specs - Small (Mobile)

Vertical Breakpoint = 375px
Padding Above and Below = 12px

Specs - Medium (Tablet)

Vertical Breakpoint = 430px
Padding Above and Below = 18px

Specs - Large (Desktop)

Vertical Breakpoint = 380px
Padding Above and Below = 20px

Specs - X-Large (Desktop)

Vertical Breakpoint = 380px
Padding Above and Below = 20px

Example - Visual Reference Large