Taxonomic name: M-HEADING-GROUP
Added on: v3.2.0 (16/02/18)
Updated on: v5.6.0 (20/04/21)

Heading group

Heading groups are patterns for when you need to combine more than one title or data item together to frame a section.

Design and usage

Three variations are available, all of which can be used with or without an icon:

Heading H1 + (H2 or H3)
H2 + H3 sub header
Category + H2

Structure

The styling differences do not affect the semantic markup and are just typography variations.
Can optionally include a relevant icon.

H2 + H3 sub header:

H2 should be the product name, with the H3 used to identify information such as the policy address, vehicle registration, etc.

Category + H2:

A category is used as a label or introduction for the H2.
Can optionally include a keyline which spans the full width of the section/page container.
Do not use category + H2 for product names.

Placement

At the beginning of sections or as a page title.
Do not use any of the heading groups within tables or data group components.
Do not place any of the heading groups immediately below a progress bar (H1 headings can be used immediately below a progress bar)
Do not change font weights from those specified here.

Accessibility

Follows standard Framework patterns

Non-JS requirements and considerations

Use case and exception scenarios

Pages using a hero (public sites)

Heading H1 + (H2 or H3) – used for section titles
H2 + H3 Sub Header – used for sub section titles
Category + H2 – sub title variation

Pages without heroes (typically .net secure sites)

Heading H1 + (H2 or H3) – used for page titles
H2 + H3 Sub Header – Used for section titles
Category + H2 – section title variation

Labels and headings

Heading H1 + (H2 or H3)

H1 should not be longer than two lines; H2 and H3 should not be longer that three lines.

H2 + (H2 or H3) sub header

Neither H1, H2 nor H3 should not be longer than two lines.

Category + H2

Category labels must be one line only (they will only wrap on mobile if the screen width is too small).

Design notes

Keyline where used is 1px solid #CCC with a 15px padding from the heading or icon (whichever is deeper).
Icons where used is 98px high for the H1-led options / 59px high for the H2-led options.

Examples

Heading H1 + H2

Interactive example

Code example

<div class="m-heading-group">
	<h2 class="a-heading m-heading-group__item a-heading--1">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--2 a-heading--light">...</h3>
</div>

Heading H1 + H2 with icon

Interactive example

Code example

<div class="m-heading-group m-heading-group--icon">
	<img class="m-heading-group__icon [ modifier ]" src="..." decoding="async" width="..." height="..." alt="" />
	<h2 class="a-heading m-heading-group__item a-heading--1">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--2 a-heading--light">...</h3>
</div>

Heading H1 + H3

Interactive example

Code example

<div class="m-heading-group">
	<h2 class="a-heading m-heading-group__item a-heading--1">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
</div>

Heading H1 + H3 with icon

Interactive example

Code example

<div class="m-heading-group m-heading-group--icon">
	<img class="m-heading-group__icon [ modifier ]" src="..." decoding="async" width="..." height="..." alt="" />
	<h2 class="a-heading m-heading-group__item a-heading--1">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
</div>

H2 + H3 sub header

Interactive example

Code example

<div class="m-heading-group">
	<h2 class="a-heading m-heading-group__item a-heading--2 a-heading--bold">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
</div>

H2 + H3 sub header with icon

Interactive example

Code example

<div class="m-heading-group m-heading-group--icon">
	<img class="m-heading-group__icon [ modifier ]" src="..." decoding="async" width="..." height="..." alt="" />
	<h2 class="a-heading m-heading-group__item a-heading--2 a-heading--bold">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
</div>

H2 + H3 sub header with divider line

Interactive example

Code example

<div class="m-heading-group m-heading-group--underline">
	<h2 class="a-heading m-heading-group__item a-heading--2 a-heading--bold">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
</div>

H2 + H3 sub header with icon and divider line

Interactive example

Code example

<div class="m-heading-group m-heading-group--icon m-heading-group--underline">
	<img class="m-heading-group__icon [ modifier ]" src="..." decoding="async" width="..." height="..." alt="" />
	<h2 class="a-heading m-heading-group__item a-heading--2 a-heading--bold">...</h2>
	<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
</div>

Category + H2

Interactive example

Code example

<div class="m-heading-group">
	<p class="m-heading-group__item">...</p>
	<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--bold">...</h2>
</div>

Category + H2 with icon

Interactive example

Code example

<div class="m-heading-group m-heading-group--icon">
	<img class="m-heading-group__icon [ modifier ]" src="..." decoding="async" width="..." height="..." alt="" />
	<p class="m-heading-group__item">...</p>
	<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--bold">...</h2>
</div>

Category + H2 with divider line

Interactive example

Code example

<div class="m-heading-group m-heading-group--underline">
	<p class="m-heading-group__item">...</p>
	<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--bold">...</h2>
</div>

Category + H2 with icon and divider line

Interactive example

Code example

<div class="m-heading-group m-heading-group--icon m-heading-group--underline">
	<img class="m-heading-group__icon [ modifier ]" src="..." decoding="async" width="..." height="..." alt="" />
	<p class="m-heading-group__item">...</p>
	<h2 class="m-heading-group__item a-heading a-heading--2 a-heading--bold">...</h2>
</div>

Complex example: H1 + H2 + CTAs + notification

Development and test

Notes for developers

Ensure that the correct level heading is used wherever appropriate to maintain the semantics of the document.

Heading lengths have been restricted to match with the usage guidelines but once placed within an l-max or l-columns area they will revert to spanning full width in order to ensure they do not become too narrow.

Notes for testers

Use a screen reader to confirm that the headings are announced in the correct order.

Classes overview

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

Class	Outcome	Required	Applied to
`.m-heading-group`	Container class for heading group	Yes	`div`
`.m-heading-group--underline`	Modifier to add underline to heading group		`.m-heading-group`
`.m-heading-group--icon`	Modifier to add icon to heading group		`.m-heading-group`
`.m-heading-group__icon`	Modifier for icon used with heading group		`.m-heading-group > img`
`.m-heading-group__icon--h1`	Modifier for icon to go with h1-led icon groups (h1 + h2 / h1 + h3)		`.m-heading-group__icon`
`.m-heading-group__icon--h2`	Modifier for icon to go with h2-led icon groups (h2 + h3 / p + h2)		`.m-heading-group__icon`
`.m-heading-group__item`	Resets margins for group items	Yes	`.m-heading-group > h1 / h2 / h3 / p`

Component releases

Added on: v3.2.0 (16/02/18)
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.

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