Examples
Different heading styles
<Stack> <Heading as="h1" variant="xxl"> Main heading </Heading> <Heading as="h2" variant="xl-display"> Sub heading with a display font </Heading> <Heading as="h2" variant="xl-sans"> Sub heading with a sans font </Heading> <Heading as="h3" variant="lg"> Large heading </Heading> <Heading as="h4" variant="md"> Medium heading </Heading> <Heading as="h5" variant="sm"> Small heading </Heading> </Stack>
A heading with a custom heading level
<Heading as="h4" variant="xxl"> A large, but semantically unimportant, heading </Heading>
A heading with an auto-generated id, that makes it easy to link to
<Heading as="h2" variant="lg" autoId> Check out the ID of this bad boy </Heading>
Guidelines
On pages with a lot of content, headings help to create an overview for the reader/user. It is therefore both useful and important to use fonts and sizes in a thoughtful manner.
In headings, primarily the xxl and xl variants are used.
Use the xxl variant sparingly, and only when it has a large space to be displayed. For example, it could be the title (h1) on a landing page.
Use the xl-display and xl-sans variants as main headings (h2) in sections of the content on a landing page. The xl sizes can also be used as a title (h1). The sizes chosen depend on the design for the page and a possible flow.
Use lg and md for smaller subheadings. Lg can be used as a title on small surfaces.
If possible, try to avoid smaller sizes than that for headings.
Code
<Heading />
import { Heading } from "@vygruppen/spor-react";
A semantic heading
Props
Name | Type | Required? | Description |
|---|---|---|---|
as | string | ||
variant | "xxl" | "xl-display" | "xl-sans" | "lg" | "md" | "sm" | "xs" | The text style you want | |
autoId | boolean | Generates an ID based on the children. Only works with string children (not JSX). |