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";

Props

size

Type1 | 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.

Examples

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>;

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>
);

Tags