- 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.
General Guidelines
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
3-6-9 Grid
- Default state
- Image label – 20 characters
- Expanded state
- Headline – 30 characters
- Paragraph – 400 characters
- CTA label – 20 characters
4X Grid
- Default
- Tile label – 40 characters
- Modal
- Headline – 40 characters
- Paragraph – 300 characters
- CTA label – 20 characters
Carousel
- Headline – 30 characters
- Paragraph – 250 characters
- Caption – 75 characters
- CTA label – 20 characters
Text Headliner
- Headline text – 75 characters max (including link)
- Text link is required
- Text Link sends user to a specific URL
- Recommends up to 3 content items
- Left/right arrows if more than 1 content item and arrows will loop between content items
- Component is not dismissible by the user
Full-width Image
- Default
- Headline – 20 characters
- Expanded state
- Headline – 20 characters
- Paragraph – 250 characters
Tabs
- Header
- Label – 25 characters
- Body
- Headline – 30 characters
- Paragraph – 400 characters
- CTA label – 20 characters
