ba-hero
Place an image, title, sub-heading, and key details at the top of a page
The hero component consists of:
- an h1 made up of eyebrow text and heading text
- an optional back link (ba-link-back) to navigate to the previous page
- an optional message component (ba-message) to display a message at the top of the page
- an image (21:9 on desktop and tablet, 16:9 on mobile)
- a slot for optional supporting elements (e.g. ba-grid, ba-content, ba-card, etc.)
The hero component is designed to be placed at the top of the page, above the fold, to ensure that it is one of the first things users see when they visit the page. This helps to grab their attention and provide a clear context for the content that follows.
A high-quality image is essential for creating a visually appealing hero section. The image should be clear, relevant to the content, and optimised for web use to ensure fast loading times.
Start with eyebrow text that gives quick context, then follow immediately with a concise, descriptive heading.
The eyebrow should flow naturally into the heading—together they grab attention, set expectations for what follows, and do so without overwhelming the reader.
The component exposes one alt attribute only. So the image shown on mobile, tablet, or desktop must depict the same photographic subject.
Keeping the visual identical (just differently cropped) ensures the single piece of alt text remains accurate and everyone experiences the same meaning, even when zoomed.
People with cognitive disabilities or those with partial sight may have trouble reading text with the authored font family, size and colour. People with low-vision may zoom in a lot, and text within bitmap images gets very pixelated and blurry.
In order to read content comfortably, they may change the visual presentation of the content using their own style sheets.
Text should always be used to present information rather than an image as the presentation of content in an image cannot be changed easily, if required.
If you're provided with an image asset which could be implemented in HTML, recommend this over using the visual asset. Often custom typefaces and visual styling via CSS can achieve desired effect. If this is not possible and text is included in image, try to include the text in HTML elsewhere on the page.
Provide equivalent alternative text descriptions for the hero image to allow people using assistive technologies to understand and enjoy the content on the page.
- Use the alt text to describe the image in a way that makes sense in the context.
- You don't need to explain that it's an image because screenreaders usually announce that. Keep alt text to a sentence or 2 and no longer than 250 characters.
- Imagine you were reading the page out to a friend. How would you describe the image?
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
alt
(required)
|
alt |
The `'alt'` attribute defines the alternative text for our image. This will be used to help our visually impaired users using screen readers. Also the text can be displayed when an image fails to load | string |
undefined |
sizes320vw
|
sizes-320vw |
This defines the |
string | undefined |
undefined |
sizes800vw
|
sizes-800vw |
This defines the |
string | undefined |
undefined |
src320vw
(required)
|
src-320vw |
The image URL to show up to 800px(50rem) wide | string |
undefined |
src800vw
(required)
|
src-800vw |
The image URL to show over 800px(50rem) wide | string |
undefined |
srcSet320vw
|
srcset-320vw |
The |
string | undefined |
undefined |
srcSet800vw
|
srcset-800vw |
The srcset values to show over 800px(50rem) wide | string | undefined |
undefined |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑accordion>, <ba‑card>, <ba‑card‑segmented>, <ba‑chart‑price>, <ba‑content>, <ba‑copy‑to‑clipboard>, <ba‑details>, <ba‑download>, <ba‑entry>, <ba‑flex>, <ba‑flight‑number>, <ba‑form>, <ba‑grid>, <ba‑image>, <ba‑link>, <ba‑link‑back>, <ba‑link‑entry>, <ba‑link‑price>, <ba‑loading‑skeleton>, <ba‑logo>, <ba‑message>, <ba‑star‑rating>, <div>, <form>, <section> |
"link-back" |
Elements will render in the body of the component | <ba‑link‑back> |
"message" |
Elements will render in the body of the component | <ba‑message> |
"heading" |
Elements will render in the body of the component | <h1> |
Permitted ARIA roles
None
Usage
Basic usage
If you cannot supply a full srcset (recommended), you can still provide a 16 : 9 mobile file and 21 : 9 desktop/tablet image:
<ba-hero
alt="Description of hero image"
src-320vw="16-9.webp"
src-800vw="21-9.webp"
>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
</ba-hero>
Using srcset and sizes
srcset lets the browser pick the most efficient file for the current viewport and pixel density, while sizes tells it how wide the image will actually render.
Always provide fallback files (src-320vw and src-800vw) for browsers that don’t understand srcset.
Recommended settings for under 800px wide (16:9 aspect ratio):
- 320 × 180 – 320w
- 480 × 270 – 480w
- 640 × 360 – 640w
- 960 × 540 – 960w
Use with 320-sizes value of 100vw and set the src-320vw value to the 320 × 180 image
Recommended settings for over 800px wide (21:9 aspect ratio):
- 800 × 343 – 800w
- 960 × 411 – 960w
- 1120 × 480 – 1120w
- 1280 × 549 – 1280w
- 1440 × 617 – 1440w
- 1920 × 823 – 1920w
- 2880 × 1234 – 2880w
Use with 800-sizes value of (min-width: 90rem) 1440px, 100vw and set the src-800vw value to the 800 × 343 image
<ba-hero
alt="Description of hero image"
src-320vw="320x180.webp"
srcset-320vw="16-9-image-320x180.webp 320w,
16-9-image-480x270.webp 480w,
16-9-image-640x360.webp 640w,
16-9-image-960x540.webp 960w"
sizes-320vw="100vw"
src-800vw="800x343.webp"
srcset-800vw="21-9-image-800x343.webp 800w,
21-9-image-960x411.webp 960w,
21-9-image-1120x480.webp 1120w,
21-9-image-1280x549.webp 1280w,
21-9-image-1440x617.webp 1440w,
21-9-image-1920x823.webp 1920w,
21-9-image-2880x1234.webp 2880w"
sizes-800vw="(min-width: 90rem) 1440px, 100vw"
>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
</ba-hero>
Improving performance by preloading the hero images
To improve the performance of the hero component, you can preload the hero images. This ensures that the images are loaded quickly when the page is accessed, providing a better user experience.
You can do this by adding a <link rel="preload"> tag in the <head> section of your HTML document. This tag should include the as="image" attribute to indicate that the resource being preloaded is an image.
<!-- preload for narrow viewports (≤ 49.9375 rem) -->
<link
rel="preload"
fetchpriority="high"
as="image"
href="16-9-image-320x180.webp"
media="(max-width: 49.9375rem)"
imagesrcset="
16-9-image-320x180.webp 320w,
16-9-image-480x270.webp 480w,
16-9-image-640x360.webp 640w,
16-9-image-960x540.webp 960w"
imagesizes="100vw"
/>
<!-- preload for wide viewports (≥ 50rem) -->
<link
rel="preload"
fetchpriority="high"
as="image"
href="21-9-image-800x343.webp"
media="(min-width: 50rem)"
imagesrcset="
21-9-image-800x343.webp 800w,
21-9-image-960x411.webp 960w,
21-9-image-1120x480.webp 1120w,
21-9-image-1280x549.webp 1280w,
21-9-image-1440x617.webp 1440w,
21-9-image-1920x823.webp 1920w,
21-9-image-2880x1234.webp 2880w"
imagesizes="(min-width: 90rem) 1440px, 100vw"
/>
Using the hero component with ba-link-back
ba-link-back can be added to the hero component to allow users to navigate back to the previous page
<ba-hero
alt="Description of hero image"
src-320vw="16-9.webp"
src-800vw="21-9.webp"
>
<ba-link-back slot="link-back" href="#">Link back</ba-link-back>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
</ba-hero>
Using the hero component with ba-message
ba-message can be added to the hero component to display a message, such as a success or information, at the top of the page
<ba-hero
alt="Description of hero image"
src-320vw="demo-images/16-9.webp"
src-800vw="demo-images/21-9.webp"
>
<ba-message slot="message" variant="info">
<h2 slot="heading">Message heading</h2>
<ba-content>
<p>Message content</p>
<p>Important information about this page</p>
</ba-content>
</ba-message>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
</ba-hero>
Adding content to the hero component and relationship with ba-page-segment
Content can be added to the hero component in the same way that it is added to the ba-page-segment component. This allows you to add additional information, such as a description or key details, below the heading and image.
The hero component will automatically adjust the padding of the adjoining ba-page-segment to ensure that the vertical spacing is consistent with the rest of the page
<ba-hero
alt="Description of hero image"
src-320vw="demo-images/16-9.webp"
src-800vw="demo-images/21-9.webp"
>
<ba-message slot="message" variant="info">
<h2 slot="heading">Message heading</h2>
<ba-content>
<p>Message content</p>
<p>Important information about this page</p>
</ba-content>
</ba-message>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
<!-- ba-grid, ba-content, ba-card etc can be added here -->
</ba-hero>
<ba-page-segment>
<!-- Adjoining page segment top padding adjusted -->
</ba-page-segment>