Carousel - Hero

Interaction Specs

Interaction Specs: 
1. View Left using arrow.

Select left carousel navigation arrow to slide to the next image.

2. View Right using arrow.

Select right carousel navigation arrow to slide to the next image.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

The Hero Banner area is that main area seen when first arriving on a home page.  The content selected for this area should be eye-catching, memorable and important. It is used to showcase three to five banner screens with graphics and selected images.

What is the Solution

Images should be selected so that the primary focus is in the right one-third of the hero area. The background of the remaining two-thirds should fade out so that the overlaid brand graphics create a solid area for the headline, descriptive text and call to action.

When to Use This Pattern

Refer to VMware Corporate Brand Guidelines for more information on brand graphics use and apropriate image selection.

  • Use custom images not use stock photos.
  • Can use video selectively.
  • Use simplified, strategic wording in the tagline mesaging.
  • Use call to actions sparingly.
  • Use large font size.

Do Not Use This Pattern

  • For directional use or more than one call to action.
  • For when another visual treatment is better suited for the objective of the page, as in pages with transactional, workflow tasks.


GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015