Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Properties#
| Type | Description | |
|---|---|---|
family | "basis" "default" "heading" "monospace" "display" | (optional) Sets the font family. Display is experimental. Contact the Eufemia team before use. Use it only for short, expressive headlines. Display has one upright weight. |
size | "auto" "xx-large" "x-large" "large" "medium" "basis" "small" "x-small" | (optional) Define the typography font-size by a size type, e.g. x-large. Use auto to use the size of the heading level. H defaults to xx-large, and H1 to H6 default to auto. |
level | "use" | (optional) Set to use to let the automated Heading levels continue from the level of this element. For example, <H3 level="use" /> makes the next Heading use level 3. |
proseMaxWidth | number boolean | (optional) Sets the maximum width based on character count. This will limit the text width to approximately the specified number of characters. Use true for a default value of 60ch. |
element | string | (optional) Defines the HTML element of H, like h2. H1 to H6 always use their own heading element. Defaults to h1. |
ref | React.RefObject | (optional) Send along a custom React.Ref. |
children | React.ReactNode | (optional) Contents. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
skeletonMethod | "shape" "font" "code" | (optional) Can be shape, font or code. Defaults to font. |
The Heading component has its own properties for automated heading levels.