Forms Hierarchy
View in LexiconThe 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.
Table of Contents
Example
Sheet Title
Sheet Subtitle
Sheet Tertiary Title
One Column
Sheet Title
Two Columns
Sheet Title
Sheet Row
The sheet-row
aligns content flush with the sheet borders using negative margins.
Sheet Title
Sheet Title
Use autofit
utilities with component-title
in sheet-title
to vertically align the text with small sized buttons (32px tall). This pattern allows long text to break to new line while keeping the button(s) text centered on the first line of text.
Sheet Subtitle
Nest autofit
utilities with component-title
in sheet-subtitle
to vertically align the text with small sized buttons (32px tall). This pattern, from the Lexicon specs, aligns the text to the bottom of the button(s) when there is only one line of text. Multiple lines of text aligns the text to the top of the button(s).
Sheet Tertiary Title
Variants
Sheet Multiple Form
The modifier class sheet-multiple-form
on sheet
provides alternative sizing and spacing to sheet-header
to be used in specific situations explained below.
This pattern is used in form scenarios, usually to display a form, multiple forms or a combination of single/multiple forms and one or several sheets to display information. See Lexicon.
Sheet Header
Sheet Title
Sheet text should be used for any kind of explanatory text. The Sheet Title and Sheet Text are contained inside a sheet-section.
Sheet Subtitle 01
Sheet Subtitle 02
Commerce Product Screen
This is an example of the sheet-multiple-form
modifier with card-page card-page-equal-height
used to layout the Commerce Product Screen.
SEO
Sheet Dataset Content
The modifier sheet-dataset-content
should be added to sheet
for sheets containing datasets.
A common usage of the sheet
is to present a dataset display inside. This case benefits of the sheet-title
and the content free space to place elements such as the dataset display. See Lexicon.
col1
