Hero banner
Hero banner
Website visitors browse pages, scanning quickly for useful or interesting information. Pages with little visual interest and a weak title may cause visitors to leave your page quickly.
Hero banners provide a large contextual image with a bolded title to catch visitors' attention. This helps them quickly understand what information is on the page and encourages them to read further.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Containers
Demo
Configure: select the dropdowns below to display the variety of options that a hero banner supports.
Hero banner context title Hero banner title
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Code
Responsive preview
Usage best practices
Place the hero banner at the top of the page because it is meant to grab users' attention as well as it contains the main page title. For those same reasons, any given page must only contain a single instance of the banner.
Consider using hero banner to:
- help set a visual, emotional and informational tone
- provide a clear introduction to the page
- provide visual context to the page content, helping tell the story
- highlight primary calls to action (if applicable)
Usage examples:
- high profile content pages i.e. section home page/landing pages
- introductions to specific content
| Variation name | Unique features |
|---|---|
| Standard |
|
| Long text |
|
| Adaptable |
|
Do
Use high quality images which can scale to fit numerous screen sizes and aspect ratios with plenty of visual white space around the edges.
Use titles that are strong, descriptive and succinct.
Apply character limits on the content to reduce visual clutter:
- Title: 50 characters
- Context title - 50 characters
- Short description - 75 characters
- Body text (long text variation) - unlimited
Don't
Do not use slogans for the banner title as that is the main heading for the page. If you need a banner with a slogan, use the slogan banner instead.
Do not use multiple banners per page.
Do not embed any critical text into the background image.
Do not use images with important details close to the top, bottom or sides of the image, as they could get cropped out at different screen sizes.
