Layouts

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.

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 right below the hero area

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

Carousel leading layouts

Full-width image leading layouts

369 Grid leading layouts