Heading

A text heading.

It implements the <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> element.

It should be nested under a sectioning element such as <section> or <article> for a semantic HTML document outline.

Styles

Import the styles within a Next.js custom app in pages/_app.js.

import "device-agnostic-ui/Heading.css";

Also import the styles for the components this component implements.

import "device-agnostic-ui/LinkText.css";

Type	`1` \| `2` \| `3` \| `4` \| `5` \| `6` (optional)
Default	`1`

Sets the heading element used, e.g. <h1>.

Type	`1` \| `2` \| `3` \| `4` \| `5` \| `6` (optional)

Sets the CSS font-size via a global theme CSS variable, e.g. --daui-h1-font-size. Omit if setting a custom font-size.

Type	String (optional)

Sets an id attribute on the heading element and nests children in a <LinkText> component that links to it.

Type	JSX children (required)

Content contained in the heading element, nested in a <LinkText> if the id prop is specified.

Type	…* (optional)

Additional props for the container; a heading element.

How to import.

import Heading from "device-agnostic-ui/Heading.mjs";

Suitable for a primary page heading.

import Heading from "device-agnostic-ui/Heading.mjs";

const result = <Heading size={1}>Heading</Heading>;

Suitable for a secondary page heading, with an ID.

import Heading from "device-agnostic-ui/Heading.mjs";

const result = (
  <Heading level={2} size={2} id="heading">
    Heading
  </Heading>
);