Form Section Header

Form section headers divide a form into smaller sections.

Best Practices

Divide forms into smaller sections to make it easier for the user to fill out.
Separate form sections into different Content Containers.
Use the form section to introduce and name each form section.
Put the form section header and its related form fields into the same .content-container.
Be sure to consult Typography and Headings to ensure you’re using the appropriate heading level.

Usage

Header

Sentence about this form section goes here. It can help describe this part of the form or explain special instructions.

An asterisk means we need this information.

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="form-section-header">
        <h2 class="legend text-primary mb-1">Header</h2>
        <p class="mb-1">
          Sentence about this form section goes here. It can help describe this part of the form or explain special instructions.
        </p>
        <p class="small">
          <span class="fa fa-asterisk text-danger me-1" aria-hidden="true"></span>
          An asterisk means we need this information.
        </p>
      </div>
    </div>
  </div>
</div>

Form Section Header

On this page:

Best Practices

Usage

Header