Subheading

Subheading is intended to be used as a heading for copy nested within a section. For example: a subheading under Contact may be Address or Phone number.

Import

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

Examples

Basic

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

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

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

as property

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

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

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:

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

Composition

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