Heading

Documentation

React

Web Components

Live demo

This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.

Code examples

Installation

npm install @carbon/react
Copy to clipboard

Basic implementation

import { Heading, Section } from '@carbon/react';

function MyPage() {
  return (
    <Section>
      <Heading>Main Title</Heading>
      <p>Page content...</p>

      <Section>
Copy to clipboard

Semantic HTML with

as

Copy to clipboard

prop

<Section as="article">
  <Heading>Article Title</Heading>
  <p>Article content...</p>
</Section>

<Section as="nav">
  <Heading>Navigation</Heading>
  <ul>...</ul>
</Section>
Copy to clipboard

Manual level override

// Start at h3 instead of h1
<Section level={3}>
  <Heading>This renders as h3</Heading>
  <Section>
    <Heading>This renders as h4</Heading>
  </Section>
</Section>
Copy to clipboard

Reusable component pattern

function Card({ title, description, children }) {
  return (
    <Section className="card">
      <Heading>{title}</Heading>
      <p>{description}</p>
      {children}
    </Section>
  );
}
Copy to clipboard