Forms Hierarchy

View in Lexicon

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.

Don’t forget to check WAI-ARIA accessibility pratices for Forms Hierarchy when writting your markup.

Example

Sheet Title

Sheet text should be used for any kind of explanatory text. The Sheet Title and Sheet Text are contained inside a sheet-header.

Sheet Subtitle

Sheet Subtitle with Button

Sheet Tertiary Title

Sheet Subtitle and Sheet Tertiary Title are contained inside a sheet-section.
First Level Collapse 1
This is an example of explanatory text.

Snippet

One Column

Sheet Title

Sheet text should be used for any kind of explanatory text. The Sheet Title and Sheet Text are contained inside a sheet-header.

Snippet

Two Columns

Sheet Title

Sheet text should be used for any kind of explanatory text. The Sheet Title and Sheet Text are contained inside a sheet-header.

Snippet

Sheet Row

The sheet-row aligns content flush with the sheet borders using negative margins.

Sheet Title

Single origin, extra id beans, eu to go, skinny americano ut aftertaste sugar. At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.
Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
Skinny extraction, id trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny milk beans macchiato carajillo espresso. Cultivar single shot brewed, coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic espresso cinnamon crema breve.
At americano, viennese variety iced grounds, grinder froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain affogato organic cappuccino java plunger pot. Single shot variety pumpkin spice seasonal skinny barista carajillo robust cream.

Snippet

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 Title

One Line TitleAdd

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualAdd

Snippet

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 Subtitle

One Line SubtitleAdd

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualAdd

Snippet

Sheet Tertiary Title

Sheet Tertiary Title

One Line Tertiary TitleAdd

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualAdd

Snippet

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 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

Snippet

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.

Units Sold
128 / Sales $459k
27% last 30 days
Units Sold
Units Sold
128 / Sales $459k
27% last 30 days

SEO

This is an example of a very long title
Optimal title length Google typically displays the first 50-60 characters of a title tag. If you keep your titles under 60 characters, our research suggest…

Snippet

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

Image of a satellite in space
No page templates yet
Page Templates allow you to create pages faster with reusable elements.

Snippet

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM