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

Playground

import { Heading } from '@datacamp/waffles/heading';

function Playground() {
  return (
    <Heading size="xlarge">Hands-on learning experience</Heading>
  );
}

import { Heading } from '@datacamp/waffles/heading';

function Playground() {
  return (
    <Heading size="xlarge">Hands-on learning experience</Heading>
  );
}

Live

Props

Heading

In addition to the props listed below, Heading accepts all props from React.HTMLAttributes<HTMLHeadingElement>.

Name	Type	Description
`as`	`h1h2h3h4h5h6`	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 `size` should be enough.
`children`Required	`React.ReactNode`	The content of the Heading.
`inverted`	`boolean`	Sets the style of the Heading suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`size`	`largemediumxlargexxlarge`	Defines the font size of the Heading. Each size has a default heading level associated with it, e.g. `xxlarge` is rendered as `h1`. Default: `xlarge`

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