Skip to content
Home

MainHeading

Info
Demos
Properties

Demos

Text only

This is a main heading

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

Above a flex container

This is a main heading

Stack contents

Code Editor
<Form.MainHeading>This is a main heading</Form.MainHeading>
<Flex.Stack>
  <P>Stack contents</P>
</Flex.Stack>

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 main heading

Card contents

Code Editor
<Form.MainHeading>This is a main heading</Form.MainHeading>
<Form.Card>
  <P>Card contents</P>
</Form.Card>

With HelpButton

This is a main heading

Card contents

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