Component
Headline
Headline is used to highlight the main point or category of the following text.
Interactive demo
This demo allows you to preview the headline component, its variations, and configuration options.
Anatomy
The headline component contains one required element and one optional element.
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
1 | Heading | Content rendered as <h1> to <h6> section heading level | Text block | |
2 | Kicker | Optional content, which appears before the heading | Text block |
Options
The headline has options for different use cases.
Heading level
The heading can be rendered as a different section heading level, as well as <span>.
Kicker
Optional content can appear before the heading text and serve as an introduction.
Heading level
The heading can be rendered as a different section heading level, as well as <span>.
Kicker
Optional content can appear before the heading text and serve as an introduction.
<h1> to <h6> heading level.Usage
Here's how and when to use the headline:
Do use headlines to create a page hierarchy
Headlines should be used to create various levels of hierarchies between text on a page.
Accessibility considerations
Correct heading level
Headings help define the main page structure and are necessary for screen reader users. It’s essential to set heading levels appropriately with this in mind.
You should avoid the following practices:
Avoid skipping a heading level, e.g. having
<h1>but missing<h1>on the same page. For example, if there are multiple cards on the same page, ensure you pass headings e.g.As="h1", heading,As="h2", heading,As="h3", etc.Avoid using multiple
<h1>elements on one page or nesting multiple<h1>elements as this is not considered best practice semantically.
SEO
Heading text should be set at the correct semantic level (eg
<h1> to <h6>) to enable crawlers to better index the page.Kicker content text appears before the heading and so doesn’t get announced by screen reader devices with it not being included as part of the heading tag.
API
The headline has a range of props to define the experience in different use cases.
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| children | string | The heading text of the headline component is passed as the child of the component. | ||
| kickerText | string | The optional kicker content, which appears before the heading. | ||
| headingAs | h1 | h2 | h3 | h4 | h5 | h6 | span | This is a string name with one of the following html elements:h1, h2, h3, h4, h5, h6 or span, that the heading can be converted to.Heading defaults as a h1 element, but it can be converted to another heading element or div by as="h2" prop. | ||
| kickerAs | h1 | h2 | h3 | h4 | h5 | h6 | span | This is a string name with one of the following html elements:h1, h2, h3, h4, h5, h6 or span, that the kicker can be converted to.Kicker defaults as a span element, but it can be converted to another heading element or div by as="h2" prop. |