Taxonomic name: L-SECTION-FEATURE-BANNER
Added on: v4.10.0 (21/06/19)
Updated on: v5.6.0 (20/04/21)

Section feature banner

Section feature banners utilise the full browser width. They can be used to signpost key content and act as a visual device to add variation to a page layout.

Design and usage

Structure

Spans full browser width.
Can include a combination of:
- H1: Up to 95 characters max (required)
- H1+H2: H2 up to 220-230 characters max (optional)
- H1+H3: H3 up to 220-230 characters max (optional)
- 1px divider line: positioned between H1 and accompanying H2/H3 – see 'Design Notes' vertical padding rules (optional)
- Buttons: Single (primary) or dual (primary and secondary/transparent) (optional)
- Tertiary link: Can appear on its own or with a button (optional)
- Content can be either left or centre aligned.

Accessibility and screen readers

Headlines: H1 recommended max size – to ensure does not detract from hero and impact visual hierarchy on the page.
Avoid 'Light' font weight usage of H3 when accompanying a H1 headline.
30% black #000000 overlay on all images to ensure sufficient contrast and legibility for copy.

Placement

Spans full page width horizontally.
Not to be used directly below a 'Hero' image
'Promo Sections' not be stacked above/below an 'Image Section'
Stacking: 'Image Sections' can be stacked (up to 3 if really required although not recommended). Recommend to alternate copy alignment between left and centre. Avoid where possible.
Images: Ensure imagery does not bleed into each other if stacked (see stacking recommendations above).

Use case and exception scenarios

Do not use at the top of a page as a replacement for heroes.
Avoid usage on a page directly below a hero image.
Ensure headline copy is of H1 styling as a maximum (San Source Pro 42px in accordance with FW guidance for font weight usage i.e. Light, Regular, Semi bold).
H1: Up to 95 characters maximum.
H2/H3: Up to 220-230 characters maximum.
H3: Recommended 'Regular' font weight for legibility overlaid on image and visual content.

Design notes

Vertical height of container influenced by content appearing within (same as shallow hero). General rule:
- Desktop: 130px above/below content
- Tablet: 65px above/below content
- Mobile: 20px above/below content.
Typography: H1 (required) +H2 / H3 (optional) – reflects H1 'Heading Groups':
- 15px vertical spacing
- Desktop
  - H1 - Source Sans Pro 42px semi bold #FFF.
  - H2 - Source Sans Pro 28px light/regular (recommended) #FFF.
  - H3 - Source Sans Pro 20px regular (recommended for 'image sections') #FFF.
- Tablet
  - H1 - Source Sans Pro 36px semi bold #FFF.
  - H2 - Source Sans Pro 26px light/regular (recommended) #FFF.
  - H3 - Source Sans Pro 20px regular (recommended for 'image sections') #FFF.
- Mobile
  - H1 - Source Sans Pro 32px semi bold #FFF.
  - H2 - Source Sans Pro 24px light/regular (recommended) #FFF.
  - H3 - Source Sans Pro 20px regular (recommended for 'image sections') #FFF.
Typography: Aligns with edge of column grid (applies to left alignment).
Typography: 'Regular' weight H2/H3's (for greater legibility)
Height of component determined by padding rules applied to content contained within. Apply the following above and below the start and end content to ensure all elements appear centred:
- Desktop: 130px
- Tablet: 65px
- Mobile: 20px.
Divider lines: Only for use between H1 and a H2/H3.
Divider lines: Solid white #FFF.
Divider lines vertical padding: Below H1 15px vertical spacing, above H2/H3 30px vertical spacing.
Will fit to the width of the text container.
Buttons: Can be single (primary) or dual buttons (secondary/transparent):
- Desktop: Vertical spacing between H2/H3 45px
- Tablet: Vertical spacing between H2/H3 45px
- Mobile: Vertical spacing between H2/H3 35px
- Dual buttons: 20px horizontal spacing between the two.
Tertiary links: Can be stand-alone or in conjunction with a primary button.
- Padding rules: See buttons vertical spacing logic.
Imagery: Can be aligned either left, right or centred.
Imagery: Recommended to choose an alignment for photography based on visual impact/framing of relevant content and its alignment.
Imagery: Bear in mind visual noise and alignment. As it will be appearing with copy overlaid, bear in mind responsive breakpoints and legibility.
Promo Sections: Full browser width version of existing 'Promo Cards' pattern (ie, existing rules around colour options etc apply).
Iconography: Permitted on 'Promo Sections' only.

Examples

Interactive example

Code example

<div class="l-section l-section-feature-banner [ Modifier ] t-accent-dark [ Modifier ]" data-module="u-objectfit">
	<picture class="l-section-feature-banner__image [ Modifier ]">
		<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
		...
		<source type="image/webp" srcset="..." width="..." height="..." />
		<img src="..." decoding="async" width="..." height="..." alt="" />
	</picture>
	<div class="l-content-container">
		<h2 class="a-heading a-heading--1 [ Modifier ]">...</h2>
		...
	</div>
</div>

Development and test

Notes for developers

Sections must always wrap l-content-container.

Do not nest sections within sections.

Images

If using a srcset attribute for images, minimum 16:9 ratio image sizes are as follows;

Mobile - 560px wide x 315px high
Tablet - 1296px wide x 729px high
Desktop - 3200px wide x 1800px high

The default image should always be 3200px x 1800px (using 16:9 ratio) to ensure full browser compatibility.

Lazy loading can be applied to inline images. For how to do this see the lazy loading page for reference.

Message

The class .t-accent-dark must always be used with section feature banners to ensure all content is applied with the correct accent colour.

Always use class .a-heading--1 for the title heading of the section feature banner message.

Notes for testers

Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
Ensure that when hovering over a link the style changes noticeably.
Ensure that when a link has focus the style changes noticeably.
Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.
Use a screen reader to confirm that the links are understandable.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.l-section`	Base style for sections of content	Yes	`div`	Must always wrap l-content-container. Designed to span full width.
`.l-section-feature-banner`	Base style for section feature banner	Yes	`.l-section`	Must always apply with.l-section and .t-accent-dark
`.l-section-feature-banner--central-content`	Modifier style to centralise all banner content		`.l-section-feature-banner`	Content is left aligned by default
`.l-section-feature-banner__image`	Base style to wrap inline image	Yes	`.l-section-feature-banner > picture`	Image is centrally aligned by default
`.l-section-feature-banner__image--focus-left`	Modifier style to shift inline image horizontal focus to the left		`.l-section-feature-banner__image`	Image has left aligned responsive scaling
`.l-section-feature-banner__image--focus-right`	Modifier style to shift inline image horizontal focus to the right		`.l-section-feature-banner__image`	Image has right aligned responsive scaling

Component releases

Added on: v4.10.0 (21/06/19)
Updated on: v5.6.0 (20/04/21)

Latest update:

updated: To improve page load and layout times the additional attributes decoding="async", width and height must be set on all inline images.
updated: Markup has changed to use the picture element to improve page performance by allowing different sized images to be served for different screen sizes.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team