Heading

Heading is intended to be used to define the title of the page. They are displayed as h1 by default. Accessibility requires having just one h1 tag on the page. Keep that in mind during the implementation.

Import

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

Examples

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

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

Open in Playground
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>
  );
}
Hide source

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

Open in Playground
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>;
}
Hide source

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:

Open in Playground
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>
  );
}
Hide source

Composition

Open in Playground
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>
  );
}
Hide source

Props (API reference)

• Name

  as

  HTML Tag or React Component (e.g. div, span, etc)
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isTruncated

  false

  true
• Name

  margin

  Description

  sets margin to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginBottom

  Description

  sets margin-bottom to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginLeft

  Description

  sets margin-left to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginRight

  Description

  sets margin-right to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  marginTop

  Description

  sets margin-top to one of the corresponding spacing tokens

  "none"

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string