Skip to content
Home

MainHeading

Info
Demos
Properties

Import

import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.MainHeading />)

Description

Form.MainHeading is a standardized main heading for sections, ensuring default layout, spacing etc.

The used font-size is set to large.

import { Flex, Card } from '@dnb/eufemia'
import { Form, Field } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler onSubmit={submitHandler}>
    <Flex.Stack>
      <Form.MainHeading>Header</Form.MainHeading>
      <Form.Card>
        <Form.SubHeading>Header</Form.SubHeading>
        <Field.Email path="/dataPath" />
      </Form.Card>
    </Flex.Stack>
  </Form.Handler>,
)

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>