SectionHeading

Import

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

Examples

Basic

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

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

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

as property

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

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

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:

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

Composition

Hide code
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>
  );
}
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 DensityProvider).