ba-hero
Place an image, title, sub-heading, and key details at the top of a page
Airframe
Web Components
React
React Native
Anatomy
Image
A configurable aspect ratio image that depends on the variant and viewport, providing visual context for the page
Back link (optional)
A ba-link-back element that allows users to navigate to the previous page
Message (optional)
A ba-message element used to display a success, info, or other message at the top of the page
Eyebrow text
Short supporting text that gives quick context and flows naturally into the heading
Heading
The h1 heading that clearly identifies the purpose of the page
Slot
An area for optional supporting elements such as ba-grid, ba-content, or ba-card
Design Documentation
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 half variant was created for use in secondary levels throughout the user journey. It creates a shorter hero section that's ideal when you want a more subtle page header or when vertical space is limited. It displays at half the height of the default variant, creating a more streamlined appearance.
The half variant works best when:
- You need to prioritize content below the hero
- The page has multiple sections and a full-height hero would dominate too much
- You're using theming colors, BA speedmarque branding, or decorative images where the image content is less important
- You're working with horizontal imagery that looks better in a letterbox format
The half variant should not be used for destination or confirmation pages as the content will not fit the half-frame. The reduced height makes it unsuitable for pages where image content needs to tell a story or convey important information about a destination.
For destination and confirmation pages, use the default variant to ensure sufficient space for meaningful imagery that enhances the user experience.
Properties and 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 |
halfImageBackground |
half-image-background |
This defines the background color of the image when the image is loading only available when variant is set to half | "" | undefined |
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 |
theme |
theme |
The theme to set for the hero component | "default" | "midnight-500" | "midnight-700" | "sale" | "the-club-blue" | "the-club-bronze" | "the-club-gold" | "the-club-gold-guest-list" | "the-club-premier" | "the-club-silver" | undefined |
'default' |
variant |
variant |
This defines the |
"default" | "half" | undefined |
'default' |
Permitted ARIA roles
- None
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> |
Parent components
None
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> |
Parent components
None
Usage
Basic usage
If you cannot supply a full srcset (recommended), you can still provide a 16 : 9 mobile file and 3 : 9 desktop/tablet image:
<ba-hero
alt="Description of hero image"
src-320vw="16-9.webp"
src-800vw="3-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 (3:1 aspect ratio):
- 960×320 960w
- 1200×400 1200w
- 1440×480 1440w
- 1920×640 1920w
Use with 800-sizes value of (min-width: 120rem) 1920px, (min-width: 90rem) 1440px, 100vw and set the src-800vw value to the 960×320 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="960×320.webp"
srcset-800vw="3-1-image-960×320.webp 960w,
3-1-image-1200×400.webp 1200w,
3-1-image-1440×480.webp 1440w,
3-1-image-1920×640.webp 1920w,
sizes-800vw="(min-width: 120rem) 1920px, (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="3-1-image-960×320.webp"
media="(min-width: 50rem)"
imagesrcset="
3-1-image-960×320.webp 960w,
3-1-image-1200×400.webp 1200w,
3-1-image-1440×480.webp 1440w,
3-1-image-1920×640.webp 1920w,
imagesizes="(min-width: 120rem) 1920px, (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="3-1.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/3-1.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/3-1.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>Using the half variant
The half variant creates a more compact hero with a shorter aspect ratio. Set variant="half" to use this style:
Recommended settings for under 800px wide (16:4.5 aspect ratio):
- 320×90 320w
- 480×135 480w
- 640×180 640w
- 960×270 960w
Use with 320-sizes value of 100vw and set the src-320vw value to the 320×90 image
Recommended settings for over 800px wide (3:0.5 aspect ratio):
- 960×160 960w
- 1200×200 1200w
- 1440×240 1440w
- 1920×320 1920w
Use with 800-sizes value of (min-width: 120rem) 1920px, (min-width: 90rem) 1440px, 100vw and set the src-800vw value to the 960×160 image
<ba-hero
variant="half"
alt="Description of hero image"
src-320vw="16-4.5-image-320x90.webp"
srcset-320vw="16-4.5-image-320x90.webp 320w,
16-4.5-image-480x135.webp 480w,
16-4.5-image-640x180.webp 640w,
16-4.5-image-960x270.webp 960w"
sizes-320vw="100vw"
src-800vw="3-0.5-image-960x160.webp"
srcset-800vw="3-0.5-image-960x160.webp 960w,
3-0.5-image-1200x200.webp 1200w,
3-0.5-image-1440x240.webp 1440w,
3-0.5-image-1920x320.webp 1920w"
sizes-800vw="(min-width: 120rem) 1920px, (min-width: 90rem) 1440px, 100vw"
>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
</ba-hero>Using the half-image-background attribute
When using the half variant, you can set a themed background color that appears while the image is loading. This is particularly useful for maintaining visual consistency with your page theme.
Available background options include:
- Club tiers:
the-club-blue,the-club-bronze,the-club-silver,the-club-gold,the-club-gold-guest-list,the-club-premier - Cabin classes:
cabin-class-economy,cabin-class-premium-economy,cabin-class-business,cabin-class-first
<ba-hero
variant="half"
half-image-background="cabin-class-business"
alt="Description of hero image"
src-320vw="16-4.5-image-320x90.webp"
src-800vw="3-0.5-image-960x160.webp"
>
<h1 slot="heading">
<span class="ba-c-hero__eyebrow">Eyebrow</span>
Heading
</h1>
</ba-hero>Guidelines
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?
Keyboard navigation
State: ba-hero is a non-interactive container
Focus moves through interactive elements within ba-hero (back link, message link, heading content), skipping ba-hero itself
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-hero is placed at the top of the page, above the fold
- A high-quality, optimised image is used that is relevant to the page content
- A clear, concise heading is used with supportive eyebrow text
- The half variant is used for secondary pages throughout the user journey where vertical space is limited
- The half variant is not used for destination or confirmation pages where image content needs to tell a story
Accessibility checklist
- The same image content is used across all screen sizes so a single alt attribute remains accurate
- Text is not embedded in the hero image graphic
- Meaningful alternative text is provided that describes the image in context
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-hero is operable using assistive technology
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments