This page contemplates the visual definition of the hierarchy and the measurements and the definition of the components that establish that hierarchy.
There are three main elements used to define the form hierarchy:
- Form title
- First level section header. This can be one of two options:
- The header of a fixed section
- The header of a collapsible section
- Second level section header
The examples below demonstrate all these form elements working together within the same form structure:
Including explanatory text:
Metrics are key to understanding how our forms are built and how vertical spacing works in our forms.
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
In small viewports, as mentioned in the grid section, the main vertical spacing reference changes from 24px to 16px.