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.
There are three main elements used to define the form hierarchy:
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.