Subheading

Import

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

Examples

Basic

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

Margins

By default Subheading component has a margin bottom of spacingM (1rem). 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 SubheadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Subheading marginBottom="none">
        I love Forma 36 design system.
      </Subheading>
      <Subheading marginBottom="spacingXl">
        I love Forma 36 design system.
      </Subheading>
      <Subheading marginTop="spacingS">
        I love Forma 36 design system.
      </Subheading>
    </Flex>
  );
}
Open in Playground

as property

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

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

Truncated text

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

Composition

Hide code
function SubheadingSpacingExample() {
  return (
    <Flex flexDirection="column">
      <Subheading>Content type ID</Subheading>
      <Paragraph>
        Use this ID to retrieve everything related to this content type via the
        API.
      </Paragraph>
      <TextInput />
    </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).