Heading

Import

import { Heading } from '@contentful/f36-components';
// or
import { Heading } from '@contentful/f36-typography';

Examples

Hide code
function HeadingExample() {
  return <Heading>I love Forma 36 design system</Heading>;
}
function HeadingExample() {
  return <Heading>I love Forma 36 design system</Heading>;
}
Open in Playground

Margins

Forma 36 typography components provide a way to set their own margins. By default Heading component has a margin bottom of 1rem (16px). You can override the default margin bottom by specifying it explicitly on the component level by marginBottom="none" or any other value from our spacing options

Hide code
function HeadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Heading marginBottom="none">I love Forma 36 design system.</Heading>
      <Heading marginTop="spacingS">I love Forma 36 design system.</Heading>
    </Flex>
  );
}
function HeadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Heading marginBottom="none">I love Forma 36 design system.</Heading>
      <Heading marginTop="spacingS">I love Forma 36 design system.</Heading>
    </Flex>
  );
}
Open in Playground

as property

For some cases, you might have to use Heading in a different context than the page title. For that we provide you with as property, to allow you to set the tag of the component to another tag than h1

Hide code
function HeadingTagExample() {
  return <Heading as="h2">I love Forma 36 design system as h2</Heading>;
}
function HeadingTagExample() {
  return <Heading as="h2">I love Forma 36 design system as h2</Heading>;
}
Open in Playground

Truncated text

Sometimes you might have to truncate the text in the Heading component, so we provide the prop especially for that. Under the hood, what it does is add overflow: hidden and set text-overflow to ellipsis. Have a look at the example below:

Hide code
function HeadingTruncatedExample() {
  return (
    <Flex style={{ maxWidth: '200px' }}>
      <Heading isTruncated>
        I love Forma 36 design system, I love Forma 36 design system, I love
        Forma 36 design system
      </Heading>
    </Flex>
  );
}
function HeadingTruncatedExample() {
  return (
    <Flex style={{ maxWidth: '200px' }}>
      <Heading isTruncated>
        I love Forma 36 design system, I love Forma 36 design system, I love
        Forma 36 design system
      </Heading>
    </Flex>
  );
}
Open in Playground

Composition

Hide code
function HeadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Heading>Your media will hang here</Heading>
      <Paragraph>
        Media assets you upload will show up here. Start by uploading your first
        one.
      </Paragraph>
    </Flex>
  );
}
function HeadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Heading>Your media will hang here</Heading>
      <Paragraph>
        Media assets you upload will show up here. Start by uploading your first
        one.
      </Paragraph>
    </Flex>
  );
}
Open in Playground

Density support

This component supports multiple densities thanks to the useDensity hook and automatically adjusts its styling for each density when wrapped with the Density Container.