Heading component

About

For basic heading formatting and sizes.

Usage

EMBL’s primary corporate typeface is IBM Plex Sans. Subdomains should use the same font except for cases where they have a different brand guideline.

The vf-heading component leverages the design token typography sizes.

Use heading tags, such as <h1> and <h2> to define the structure of a page. Apply tokens, such as vf-text-heading--1 to define the size and other stylistic elements of the heading. 

To establish a consistent content organisation throughout your site, style headings consistently. However, a heading level such as <h1> does not always need to correspond with the same token such as vf-text-heading--1. You can change the token if the page requires so but it is advisable to ensure the pages have a consistent heading structure whenever possible.

This component provides utility-like functionality and you'll rarely need to directly use this component. When coding a component's Sass, it will typically be better to use the mixins (@include set-type(text-heading--1);) than these vf-heading classes.

How to use

• Every page should have at least one heading (typically a h1).
• All text that looks like a heading should be marked up as a heading.
• All text that is marked up as a heading should be a conceptual section heading.
• The heading hierarchy should be meaningful, e.g: <h1>Recruitment: What to expect</h1> <h2>Our recruitment process</h2> <h3>Step 1: Application</h3>

Headings should be written in sentence case.

How not to use

• Do not skip heading levels (e.g. from <h1> to <h3> without a <h4> on a page) as this causes issues to users of screen readers and other assistive technologies.
• Do not use headings to style text that is not meant to be a heading element. Use a different vf-text style instead of a heading level for this type of text.

Related documentation

For more information on headings please consult the following documents:

• Headings | Web Accessibility Initiative (WAI) | W3C9
• Easy Checks – A First Review of Web Accessibility | Web Accessibility Initiative (WAI) | W3C
• Regions, Headings, and Lists | Semantic Structure | WebAIM
• Typography | GOV.UK  Design System

Install

This component is distributed with npm. After installing npm, you can install the vf-heading with this command.

$ yarn add --dev @visual-framework/vf-heading

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-heading/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack