level
Type | 1 | 2 | 3 | 4 | 5 | 6 (optional) |
---|---|
Default | 1 |
Sets the heading element used, e.g. <h1>
.
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.
pages/_app.js
.import 'device-agnostic-ui/public/components/Heading.css';
import 'device-agnostic-ui/public/components/LinkText.css';
level
Type | 1 | 2 | 3 | 4 | 5 | 6 (optional) |
---|---|
Default | 1 |
Sets the heading element used, e.g. <h1>
.
size
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
.
id
Type | String (optional) |
---|
Sets an id
attribute on the heading element and nests children in a <LinkText>
component that links to it.
children
Type | JSX children (required) |
---|
Content contained in the heading element, nested in a <LinkText>
if the id
prop is specified.
...props
Type | …* (optional) |
---|
Additional props for the container; a heading element.
import
.import Heading from 'device-agnostic-ui/public/components/Heading.js';
require
.const Heading = require('device-agnostic-ui/public/components/Heading');
import
. Convenient, but technically inferior to a deep import
.import { Heading } from 'device-agnostic-ui';
require
. Convenient, but technically inferior to a deep require
.const { Heading } = require('device-agnostic-ui');
import { Heading } from 'device-agnostic-ui';
const result = <Heading size={1}>Heading</Heading>;
import { Heading } from 'device-agnostic-ui';
const result = (
<Heading level={2} size={2} id="heading">
Heading
</Heading>
);