Refine By

Layouts

  • Contents:

The layouts listed below are guidelines on ways to pair different components on a page to deliver a great user experience. These recommendations ensure a consistent and intuitive user experience across our brand homepages and other auxiliary pages.

Guidelines

  1. Don’t pair the full-width and carousel components together.
  2. Don’t pair the 369 Grid with the 4x Grid components together.
  3. Don’t lead with the tab component – users might mistake the tab headers for a secondary nav on the page.
  4. Don’t stack two of the same components together.
  5. Only use the carousel component at the top of the page. Other components can be used anywhere else on the page.
  6. Avoid using more than one tab component on the same page.

Recommended components for use at the top of a page

  • Carousel
  • Full-width image
  • 369 Grid
  • Text

Recommended components for use right below the hero area

  • Tabs
  • 4x Grid
  • 369 Grid
  • Full-width image

Homepage Templates

 

Carousel leading layouts

Layout 1 Layout 2 Layout 3 Layout 4
Carousel Carousel Carousel Carousel
4x Grid Tabs 4x Grid 369 Grid
Full width image 4x Grid Full width image Full width image
369 Grid Full width image Tabs Tabs
Tabs Footer Footer 4x Grid

Full-width image leading layouts

Layout 5 Layout 6 Layout 7
Full width image Full-width image Full-width image
4x Grid Tabs 369 Grid
Tabs 4x Grid Tabs
369 Grid Full width image 4x Grid
Full-width image 369 Grid

Auxiliary Page Templates

 

369 Grid leading layouts

Layout 8 Layout 9 Layout 10
369 Grid 369 Grid 369 Grid
Tabs Full-width image Tabs
4x Grid 4x Grid Full-width image
Full-width image 369 Grid