- 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
- Don’t pair the full-width and carousel components together.
- Don’t pair the 369 Grid with the 4x Grid components together.
- Don’t lead with the tab component – users might mistake the tab headers for a secondary nav on the page.
- Don’t stack two of the same components together.
- Only use the carousel component at the top of the page. Other components can be used anywhere else on the page.
- 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 |