Refine By

Brand components

  • 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