Skip to content
Home

SubHeading

Info
Demos
Properties

Import

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

Description

Form.SubHeading is a standardized sub 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 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>