'Heading block' component
- Julia Boyarshchikova (Deactivated)
- Sergiy Nalyvayko (Unlicensed)
Component type | Atom |
|---|---|
Component possible inclusions | n/a |
Design source (in Figma) | |
Component status |
Introduction
The heading block allows creation of both simple headings and more complex heading systems that balance overline headings, standard headings and subheadings.
Anatomy
Key Content
Item | Type | Notes |
Heading | Basic Text |
|
Description | Simple RTE |
|
Editorial
Keep headings short, direct and attention-grabbing.
Avoid using an overline heading, heading and subheading within the same element (nb: we might be able to govern this within the CMS).
Visual Style
Heading layouts
A fully realized heading block will deliver support for different heading layouts.
Aligning
Support for ‘edge-aligned’ vs ‘centre-aligned’ can be programmatically pre-set rather than needing to introduce style controls into the CMS.
Behavior
Headings must support the ability to be linked. If linked, they will take the ‘linked heading’ style variant and will behave as a link.
Usage
Do’s
Use Heading block when starting a new content section on the page.
Don’ts
Avoid using an overline heading, heading and subheading within the same element.
Analytics & Data
If any analytics is required, it would simply be tracking of a linked heading or element visibility of the heading. This would only require that the heading be able to be individually isolated.
Related/Similar Components
Page Header
Teaser/Promo
List