Hero header
Showcase key messages and functionality for your service or section of a service in the header of the page.
On this page
Did this page help you?
Tell us more - optional
Key UX concepts
When to use a hero header
A hero header acts as a starting point of your users journey on a page. Because it is the first thing users see, it can be used to strengthen your brand identity with the usage of images and custom content, which can lead to an increase in conversion rates.
Types of hero headers
A hero header can be used on both service homepages and sub-pages, depending on your use-case. It can contain large display text, images, and other key functionality elements that informs users about the content on the page, or section of the service.
In service homepages, it is effective in communicating your service brand identity and offerings.
In sub-pages, it can be used to represent a product, a market type, or a category, that helps users to visually distinguish IA areas of your service.
Building blocks
A. Main content section
Positioned on the left, and contains the main content for the hero. Use a container component to increase color contrast between the image and the text.
B. Heading
The main h1 heading for the page. Use the display large bold type style.
C. Sub heading - optional
Supporting information for the heading of the page. Use the display large light type style.
D. Service summary - optional
You can add a summary of your service under the page title. Use the service summary to share what the service is and how the service benefits users. Use the body type style.
E. Actions - optional
Place any CTAs at the bottom of the main content section. For example a primary button to sign up to the service.
F. Background - optional
The background colour of the hero can be either white in light mode, dark grey in dark mode, or can use a background image. The image can be used to show your brands style and purpose of the service.
Layout
Use the grid component to structure the hero header content area.
We recommend to design the hero layout for all viewports, please refer to responsive design for more information.
Example layout structure:
On a 12 column layout: 8 columns for the main content area and four columns for the custom content.
On a 8 column layout: 4 columns for the main content area and four columns for the custom content.
On a 1 column layout: I column for the main content area and one column for the custom content, these are stacked.
Development guidelines
Hero header
Preview
Cloud software solutions
Shorten procurement times, implement the controls you need to operate with confidence, and enable your organization to unlock innovation.
Code
The following code uses React and JSX syntax.
import React from 'react';
import { Grid, Box, Container, SpaceBetween, Button } from '@cloudscape-design/components';
import './styles.scss';
export default () => {
return (
<div className="full-header">
<div
className="header-background-image awsui-util-hide-in-dark-mode"
style={{ backgroundImage: 'url(/hero-header-light.png)' }}
/>
<div
className="header-background-image awsui-util-show-in-dark-mode"
style={{ backgroundImage: 'url(/hero-header-dark.png)' }}
/>
<div className="inner-header">
<Grid gridDefinition={[{ colspan: { default: 12, s: 8 } }]}>
<Container>
<Box padding="s">
<Box fontSize="display-l" fontWeight="bold" variant="h1" padding="n">
Cloud software solutions
</Box>
<Box fontSize="display-l" fontWeight="light">
Industry solutions to unlock innovation
</Box>
<Box variant="p" color="text-body-secondary" margin={{ top: 'xs', bottom: 'l' }}>
Shorten procurement times, implement the controls you need to operate with confidence, and enable your
organization to unlock innovation.
</Box>
<SpaceBetween direction="horizontal" size="xs">
<Button variant="primary">Browse by Solution Category</Button>
<Button>Browse by Solution Industry</Button>
</SpaceBetween>
</Box>
</Container>
</Grid>
</div>
</div>
);
};
Sub page header
Preview
Elastic Cloud (Elastic search service)
With solutions in Enterprise Search, Observability, and Security, Elastic enhances customer and employee search experiences, keeps mission-critical applications running smoothly, and protects against cyber threats.
Code
The following code uses React and JSX syntax.
import React from 'react';
import { Grid, Box, SpaceBetween, Button, Link } from '@cloudscape-design/components';
import './styles.scss';
export default () => {
return (
<div className="full-header">
<div className="inner-header">
<Grid gridDefinition={[{ colspan: { default: 12, xs: 8, s: 9 } }, { colspan: { default: 12, xs: 4, s: 3 } }]}>
<div>
<Box variant="h1">Elastic Cloud (Elastic search service)</Box>
<Box variant="p" color="text-body-secondary" margin={{ top: 'xxs', bottom: 's' }}>
With solutions in Enterprise Search, Observability, and Security, Elastic enhances customer and employee
search experiences, keeps mission-critical applications running smoothly, and protects against cyber
threats.
</Box>
<SpaceBetween size="xs">
<div>
Sold by:{' '}
<Link variant="primary" href="#">
Elastic
</Link>
</div>
<div>
Tags:{' '}
<Link variant="primary" href="#">
Free trial
</Link>
{' | '}
<Link variant="primary" href="#">
Vendor insights
</Link>
</div>
</SpaceBetween>
</div>
<Box margin={{ top: 'l' }}>
<SpaceBetween size="s">
<Button variant="primary" fullWidth={true}>
View purchase options
</Button>
<Button fullWidth={true}>Request a demo</Button>
<Button fullWidth={true}>Save to a list</Button>
</SpaceBetween>
</Box>
</Grid>
</div>
</div>
);
};
Guidelines
Do
- Keep the service summary description brief, to avoid overcrowding the hero area with text.
- Use the container component to provide a background colour to the content area. Example: When a background image affects the legibility and contrast of the header text.
- Use h1 for headings.
Don't
- Don’t use more than three action buttons.
- Don’t use more that three meta data elements.
Writing guidelines
General writing guidelines
Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.
Use end punctuation, except in headers and buttons. Don’t use exclamation points.
Use present-tense verbs and active voice.
Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.
Avoid directional language.
For example: use previous not above, use following not below.
Use device-independent language.
For example: use choose or interact not click.
Component-specific guidelines
Heading
Keep headings short. Aim for a maximum of five words.
Don’t use terminal punctuation.
Use action words and present-tense verbs.
For example: Sign up
Description
Follow the guidelines for help system.
Accessibility guidelines
General accessibility guidelines
Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.
Make sure to define ARIA labels aligned with the language context of your application.
Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.
Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.