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/public/components/Heading.css';
Also import the styles for the components this component implements.
import 'device-agnostic-ui/public/components/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

Deep import.
import Heading from 'device-agnostic-ui/public/components/Heading.js';
Deep require.
const Heading = require('device-agnostic-ui/public/components/Heading.js');
Index import. Convenient, but technically inferior to a deep import.
import { Heading } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Heading } = require('device-agnostic-ui');
Suitable for a primary page heading.
import { Heading } from 'device-agnostic-ui';

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

Heading

Suitable for a secondary page heading, with an ID.
import { Heading } from 'device-agnostic-ui';

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

Tags