Skip to content
Home

SubHeading

Info
Demos
Properties

Demos

Text only

This is a sub heading

Code Editor
<Form.SubHeading>This is a sub heading</Form.SubHeading>

Below MainHeading

This is a main heading

This is a sub heading

Code Editor
<Form.MainHeading>This is a main heading</Form.MainHeading>
<Form.SubHeading>This is a sub heading</Form.SubHeading>

Above a flex container

This is a sub heading

Stack contents

Code Editor
<Form.SubHeading>This is a sub heading</Form.SubHeading>
<Flex.Stack>
  <P>Stack contents</P>
</Flex.Stack>

Inside Card

This is a sub heading

Card contents

Code Editor
<Form.Card>
  <Flex.Stack>
    <Form.SubHeading>This is a sub heading</Form.SubHeading>
    <P>Card contents</P>
  </Flex.Stack>
</Form.Card>

Above Card

When placed above a Form.Card component, the heading will be indented to align with the card content.

On small screens, the indention will be removed.

This is a sub heading

Card contents

Code Editor
<Form.SubHeading>This is a sub heading</Form.SubHeading>
<Form.Card>
  <P>Card contents</P>
</Form.Card>

Two sub headings

This is sub heading 1

This is sub heading 2

Other contents
Code Editor
<Form.SubHeading>This is sub heading 1</Form.SubHeading>
<Form.SubHeading>This is sub heading 2</Form.SubHeading>
Other contents

With HelpButton

This is a sub heading

Card contents

Code Editor
<Flex.Stack>
  <Form.SubHeading
    help={{
      title: 'Title',
      content: 'Content',
    }}
  >
    This is a sub heading
  </Form.SubHeading>
  <Form.Card>
    <P>Card contents</P>
  </Form.Card>
</Flex.Stack>