SectionHeading

SectionHeading is intended to be used as a title for each section. SectionHeading are very important for accessibility, as they help to make copy more easily scannable and guides a user through your content. When using screen readers, it finds sections in your copy based on your heading hierarchy.

Import

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

Examples

Basic

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

Margins

By default SectionHeading component has a margin bottom of spacingL (1.5rem). 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 SectionHeadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <SectionHeading marginBottom="none">
        I love Forma 36 design system.
      </SectionHeading>
      <SectionHeading marginBottom="spacingXl">
        I love Forma 36 design system.
      </SectionHeading>
      <SectionHeading marginTop="spacingS">
        I love Forma 36 design system.
      </SectionHeading>
    </Flex>
  );
}
function SectionHeadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <SectionHeading marginBottom="none">
        I love Forma 36 design system.
      </SectionHeading>
      <SectionHeading marginBottom="spacingXl">
        I love Forma 36 design system.
      </SectionHeading>
      <SectionHeading marginTop="spacingS">
        I love Forma 36 design system.
      </SectionHeading>
    </Flex>
  );
}
Hide source

as property

By default SectionHeading has an h2 tag. But you can change it be providing as prop with values from h1 to h6.

Open in Playground
function SectionHeadingTagExample() {
  return <SectionHeading as="h3">I love Forma 36 design system</SectionHeading>;
}
function SectionHeadingTagExample() {
  return <SectionHeading as="h3">I love Forma 36 design system</SectionHeading>;
}
Hide source

Truncated text

Sometimes you might have to truncate the text in the SectionHeading 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 SectionHeadingTruncatedExample() {
  return (
    <Flex style={{ maxWidth: '200px' }}>
      <SectionHeading isTruncated>
        I love Forma 36 design system, I love Forma 36 design system, I love
        Forma 36 design system
      </SectionHeading>
    </Flex>
  );
}
function SectionHeadingTruncatedExample() {
  return (
    <Flex style={{ maxWidth: '200px' }}>
      <SectionHeading isTruncated>
        I love Forma 36 design system, I love Forma 36 design system, I love
        Forma 36 design system
      </SectionHeading>
    </Flex>
  );
}
Hide source

Composition

Open in Playground
function SectionHeadingCompositionExample() {
  return (
    <Flex flexDirection="column">
      <SectionHeading>About Apps</SectionHeading>
      <Paragraph>
        Build apps for your Contentful organization to extend the core
        functionality of the web app and optimize the workflow of editors.
      </Paragraph>
    </Flex>
  );
}
function SectionHeadingCompositionExample() {
  return (
    <Flex flexDirection="column">
      <SectionHeading>About Apps</SectionHeading>
      <Paragraph>
        Build apps for your Contentful organization to extend the core
        functionality of the web app and optimize the workflow of editors.
      </Paragraph>
    </Flex>
  );
}
Hide source

Props (API reference)

• Name

  as

  HTML Tag or React Component (e.g. div, span, etc)
• 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