Forms Hierarchy

The definition of the content hierarchy inside a form structure and the components used to identify the different content blocks.

This page contemplates the visual definition of the hierarchy and the measurements and the definition of the components that establish that hierarchy.

Layout

There are three main elements used to define the form hierarchy:

1. Form title
2. First level section header. This can be one of two options:
   1. The header of a fixed section
   2. The header of a collapsible section
3. Second level section header

The examples below demonstrate all these form elements working together within the same form structure:

Including explanatory text:

Attributes

Metrics are key to understanding how our forms are built and how vertical spacing works in our forms.

Desktop

As mentioned in the grid section, the main vertical spacing reference is 24px.

Section blocks metrics

Inside sections metrics

Metrics using explanatory texts associated to different section levels

Mobile

In small viewports, as mentioned in the grid section, the main vertical spacing reference changes from 24px to 16px.