Heading

[Robbert]

Naam

Heading

Link naar GitHub Discussion

---

Notities

Technical component, will be represented as <h1>-<h6> in Figma.

Sometimes in a JavaScript framework application it might be useful to have a heading that will change it's level based on the input it receives from somewhere else. For example if a CMS provides data it might then also determine the heading levels.

This component will then render h1-h6 based on the level=x attribute the <Heading> component receives.

Use when

For example your component might look like <Heading level={data.title.level}>{data.title}</Heading>

Don't use when

For example your component might look like <Heading level=3>{data.title}</Heading> use <Heading3>{data.title}</Heading3> instead

Figma

The default HTML heading levels should be documented and available in Figma:

• <h1> / nl-heading-1
• <h2> / nl-heading-2
• <h3> / nl-heading-3
• <h4> / nl-heading-4
• <h5> / nl-heading-5
• <h6> / nl-heading-6

[usethetics]

Figma component containing headings level one to six, including a default measure (line-length): https://www.figma.com/file/gqQhMe3gj4YlC6JrZOWiCv/?node-id=2365%3A2035