Usage guidance
Use Heading
to structure page content and to group information.
The Heading
component offers several different size
values to choose from: medium
, large
, xlarge
and xxlarge
, which dictate the default heading level associated with it. In rare cases, such as to preserve proper semantic heading order, the heading level can be overwritten whilst keeping the styling from size
, by using the as
property.
In all cases, Heading
content should be Sentence cased, in order to adhere to DataCamp language and design requirements.
Best practices
Examples
Sizes
Learn the data skills you need online at your own pace
Learn the data skills you need online at your own pace
Learn the data skills you need online at your own pace
Learn the data skills you need online at your own pace
Playground
Props
Heading
In addition to the props listed below, Heading
accepts all props from React.HTMLAttributes<HTMLHeadingElement>
.
Name | Type | Description |
---|---|---|
as | h1 h2 h3 h4 h5 h6 | The level of heading used to render this component. Use to fine-tune heading level to preserve the correct heading hierarchy on the page. In general, specifying only Heading |
children Required | React.ReactNode | The content of the Heading. |
inverted | boolean | Sets the style of the Heading suitable for dark backgrounds. Default:
DEPRECATED Will be removed in |
size | large medium xlarge xxlarge | Defines the font size of the Heading. Each size has a default heading level associated with it, e.g. Default:
|
Imports
You can import the following components, utilities or types from this module:
import { Heading } from '@datacamp/waffles/heading';import type { HeadingProps } from '@datacamp/waffles/heading';