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
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 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.
<div className="sheet sheet-lg">
<div className="sheet-header">
<h2 className="sheet-title">Sheet Title</h2>
<div className="sheet-text">
Sheet text should be used for any kind of explanatory text. The
Sheet Title and Sheet Text are contained inside a sheet-header.
</div>
</div>
<div className="sheet-section">
<h3 className="sheet-subtitle">Sheet Subtitle</h3>
<h3 className="autofit-row sheet-subtitle">
<span className="autofit-col autofit-col-expand">
<span className="heading-text">Sheet Subtitle with Button</span>
</span>
<span className="autofit-col">
<span className="heading-end">
<button className="btn btn-secondary btn-sm" type="button">
Add
</button>
</span>
</span>
</h3>
<h4 className="sheet-tertiary-title">Sheet Tertiary Title</h4>
<div className="sheet-text">
Sheet Subtitle and Sheet Tertiary Title are contained inside a
sheet-section.
</div>
</div>
<div
aria-orientation="vertical"
className="panel-group panel-group-flush"
role="tablist"
>
<div className="panel">
<a
aria-controls="accordion03CollapseTwo"
aria-expanded="true"
className="collapse-icon sheet-subtitle"
data-toggle="collapse"
href="#accordion03CollapseTwo"
id="accordion03HeadingTwo"
role="tab"
>
<span>First Level Collapse 1</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#angle-down"></use>
</svg>
</span>
</a>
<div
aria-labelledby="accordion03HeadingTwo"
className="panel-collapse collapse show"
id="accordion03CollapseTwo"
role="tabpanel"
>
<div className="panel-body">
<div className="sheet-text">
This is an example of explanatory text.
</div>
</div>
</div>
</div>
</div>
<div className="sheet-footer">
<div className="btn-group-item">
<div className="btn-group-item">
<button className="btn btn-primary" type="button">
Primary
</button>
</div>
<div className="btn-group-item">
<button className="btn btn-secondary" type="button">
Secondary
</button>
</div>
</div>
</div>
</div>
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.
<div className="sheet sheet-lg">
<div className="sheet-header">
<h2 className="sheet-title">Sheet Title</h2>
<div className="sheet-text">
Sheet text should be used for any kind of explanatory text. The
Sheet Title and Sheet Text are contained inside a sheet-header.
</div>
</div>
<div className="sheet-section">
<div className="form-group">
<label htmlFor="_0rmtn466h">
Screen Name
<span className="reference-mark">
<svg
className="lexicon-icon lexicon-icon-asterisk"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#asterisk"></use>
</svg>
</span>
</label>
<input
className="form-control"
id="_0rmtn466h"
placeholder="Placeholder"
type="text"
/>
</div>
<div className="form-group">
<label htmlFor="_9hslbpuas">Email</label>
<input className="form-control" id="_9hslbpuas" type="email" />
</div>
<div className="form-group">
<label htmlFor="_javf9wj9l">Name</label>
<input
className="form-control"
id="_javf9wj9l"
placeholder="Name"
type="text"
/>
</div>
</div>
<div className="sheet-footer sheet-footer-btn-block-sm-down">
<div className="btn-group">
<div className="btn-group-item">
<button className="btn btn-primary" type="button">
Primary
</button>
</div>
<div className="btn-group-item">
<button className="btn btn-secondary" type="button">
Secondary
</button>
</div>
</div>
</div>
</div>
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.
<div className="sheet sheet-lg">
<div className="sheet-header">
<h2 className="sheet-title">Sheet Title</h2>
<div className="sheet-text">
Sheet text should be used for any kind of explanatory text. The
Sheet Title and Sheet Text are contained inside a sheet-header.
</div>
</div>
<div className="sheet-section">
<div className="form-group-autofit">
<div className="form-group-item">
<label htmlFor="_cab0u4dgi">
Screen Name
<span className="reference-mark">
<svg
className="lexicon-icon lexicon-icon-asterisk"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#asterisk"></use>
</svg>
</span>
</label>
<input
className="form-control"
id="_cab0u4dgi"
placeholder="Placeholder"
type="text"
/>
</div>
<div className="form-group-item">
<label htmlFor="_y1mdflpv9">Birthday</label>
<input
className="form-control"
id="_y1mdflpv9"
placeholder="Placeholder"
type="text"
value="01/01/1970"
/>
</div>
</div>
<div className="form-group-autofit">
<div className="form-group-item">
<label htmlFor="_jcrc07o9v">Email</label>
<input className="form-control" id="_jcrc07o9v" type="email" />
</div>
<div className="form-group-item">
<label htmlFor="_17obpdwz0">Gender</label>
<input
className="form-control"
id="_17obpdwz0"
placeholder="Gender"
type="text"
/>
</div>
</div>
<div className="form-group-autofit">
<div className="form-group-item">
<label htmlFor="_kcnx64qkv">Name</label>
<input
className="form-control"
id="_kcnx64qkv"
placeholder="Name"
type="text"
/>
</div>
<div className="form-group-item">
<label htmlFor="_8awy2608y">Job Title</label>
<input
className="form-control"
id="_8awy2608y"
placeholder="Job Title"
type="text"
/>
</div>
</div>
</div>
<div className="sheet-footer sheet-footer-btn-block-sm-down">
<div className="btn-group">
<div className="btn-group-item">
<button className="btn btn-primary" type="button">
Primary
</button>
</div>
<div className="btn-group-item">
<button className="btn btn-secondary" type="button">
Secondary
</button>
</div>
</div>
</div>
</div>
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.
<div className="sheet sheet-lg">
<div className="sheet-header">
<h4 className="sheet-title">Sheet Title</h4>
</div>
<div className="sheet-row">
<ul className="nav nav-tabs nav-tabs-light" role="tablist">
<li className="nav-item">
<a
aria-controls="fields"
aria-selected="true"
className="active nav-link"
data-toggle="tab"
href="#fields"
id="fieldsTab"
role="tab"
>Fields</a
>
</li>
<li className="nav-item">
<a
aria-controls="settings"
aria-selected="false"
className="nav-link"
data-toggle="tab"
href="#settings"
id="settingsTab"
role="tab"
>Settings</a
>
</li>
<li className="nav-item">
<a
aria-controls="documents"
aria-selected="false"
className="disabled nav-link"
data-toggle="tab"
href="#documents"
id="documentsTab"
role="tab"
tabindex="-1"
>Documents</a
>
</li>
<li className="dropdown nav-item">
<a
aria-expanded="false"
aria-haspopup="true"
className="dropdown-toggle nav-link"
data-toggle="dropdown"
href="#1"
role="button"
>
Configuration
<svg
className="lexicon-icon lexicon-icon-caret-bottom"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#caret-bottom" />
</svg>
</a>
<div className="dropdown-menu dropdown-menu-indicator-end">
<a
aria-controls="setup"
aria-selected="false"
className="dropdown-item"
data-toggle="tab"
href="#setup"
id="setupTab"
role="tab"
>
Setup
<span
aria-hidden="true"
className="dropdown-item-indicator"
>
<svg
className="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
<a
aria-controls="supportedClients"
aria-selected="false"
className="dropdown-item"
data-toggle="tab"
href="#supportedClients"
id="supportedClientsTab"
role="tab"
>
Supported Clients
<span
aria-hidden="true"
className="dropdown-item-indicator"
>
<svg
className="lexicon-icon lexicon-icon-check"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check" />
</svg>
</span>
</a>
</div>
</li>
</ul>
<div className="tab-content">
<div
aria-labelledby="fieldsTab"
className="active fade show tab-pane"
id="fields"
role="tabpanel"
>
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.
</div>
<div
aria-labelledby="settingsTab"
className="fade tab-pane"
id="settings"
role="tabpanel"
>
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.
</div>
<div
aria-labelledby="documentsTab"
className="fade tab-pane"
id="documents"
role="tabpanel"
>
Cultivar single shot brewed, coffee steamed to go wings to go
cortado. Grinder, siphon coffee acerbic espresso cinnamon crema
breve.
</div>
<div
aria-labelledby="setupTab"
className="fade tab-pane"
id="setup"
role="tabpanel"
>
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.
</div>
<div
aria-labelledby="supportedClientsTab"
className="fade tab-pane"
id="supportedClients"
role="tabpanel"
>
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.
</div>
</div>
</div>
</div>
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.
<h4 className="sheet-title">Sheet Title</h4>
<h4 className="sheet-title">
<span
className="autofit-float-sm-down autofit-padded-no-gutters autofit-row"
>
<span className="autofit-col autofit-col-expand">
<span className="component-title">One Line Title</span>
</span>
<span className="autofit-col">
<a className="btn btn-secondary btn-sm" href="#1" role="button"
>Add</a
>
</span>
<span className="autofit-col">
<button className="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
<h4 className="sheet-title">
<span className="autofit-padded-no-gutters autofit-row">
<span className="autofit-col autofit-col-expand">
<span className="component-title"
>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
>
</span>
<span className="autofit-col">
<a className="btn btn-secondary btn-sm" href="#1" role="button"
>Add</a
>
</span>
<span className="autofit-col">
<button className="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
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).
<h4 clss="sheet-subtitle">Sheet Subtitle</h4>
<h4 className="sheet-subtitle">
<span
className="autofit-float-sm-down autofit-padded-no-gutters autofit-row"
>
<span className="autofit-col autofit-col-expand">
<span className="component-title">One Line Subtitle</span>
</span>
<span className="autofit-col">
<a className="btn btn-secondary btn-sm" href="#1" role="button"
>Add</a
>
</span>
<span className="autofit-col">
<button className="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
<h4 className="sheet-subtitle">
<span
className="autofit-float-sm-down autofit-padded-no-gutters autofit-row"
>
<span className="autofit-col autofit-col-expand">
<span className="component-title"
>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
>
</span>
<span className="autofit-col">
<a className="btn btn-secondary btn-sm" href="#1" role="button"
>Add</a
>
</span>
<span className="autofit-col">
<button className="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
Sheet Tertiary Title
<h4 className="sheet-tertiary-title">Sheet Tertiary Title</h4>
<h4 className="sheet-tertiary-title">
<span
className="autofit-float-sm-down autofit-padded-no-gutters autofit-row"
>
<span className="autofit-col autofit-col-expand">
<span className="component-title">One Line Tertiary Title</span>
</span>
<span className="autofit-col">
<a className="btn btn-secondary btn-sm" href="#1" role="button"
>Add</a
>
</span>
<span className="autofit-col">
<button className="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
<h4 className="sheet-tertiary-title">
<span
className="autofit-float-sm-down autofit-padded-no-gutters autofit-row"
>
<span className="autofit-col autofit-col-expand">
<span className="component-title"
>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
>
</span>
<span className="autofit-col">
<a className="btn btn-secondary btn-sm" href="#1" role="button"
>Add</a
>
</span>
<span className="autofit-col">
<button className="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
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
<div className="sheet sheet-multiple-form">
<div className="sheet-header">
<div className="autofit-row autofit-padded-no-gutters">
<div className="autofit-col autofit-col-shrink">
<h4 className="sheet-title">
<span className="component-title">Sheet Header</span>
</h4>
</div>
<div className="autofit-col">
<div className="dropdown dropdown-action">
<button
aria-expanded="false"
aria-haspopup="true"
className="component-action dropdown-toggle"
data-toggle="dropdown"
id="dropdownSites5"
type="button"
>
<svg
className="lexicon-icon lexicon-icon-ellipsis-v"
focusable="false"
role="presentation"
>
<use
xlinkHref="/images/icons/icons.svg#ellipsis-v"
/>
</svg>
</button>
<ul
aria-labelledby="dropdownSites5"
className="dropdown-menu"
>
<li>
<a className="dropdown-item" href="#1">Download</a>
</li>
<li><a className="dropdown-item" href="#1">Edit</a></li>
<li><a className="dropdown-item" href="#1">Move</a></li>
<li>
<a className="dropdown-item" href="#1">Checkout</a>
</li>
<li>
<a className="dropdown-item" href="#1"
>Permissions</a
>
</li>
<li>
<a className="dropdown-item" href="#1"
>Move to Recycle Bin</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="sheet-section">
<h5 className="sheet-title">Sheet Title</h5>
<p className="sheet-text">
Sheet text should be used for any kind of explanatory text. The
Sheet Title and Sheet Text are contained inside a sheet-section.
</p>
</div>
<div className="sheet-section">
<h6 className="sheet-subtitle">Sheet Subtitle 01</h6>
<div className="form-group">
<label htmlFor="basicInputTypeTextarea">Textarea</label>
<textarea
className="form-control"
id="basicInputTypeTextarea"
name="basicInputTypeTextarea"
placeholder="Placeholder"
></textarea>
</div>
</div>
<div className="sheet-section">
<h6 className="sheet-subtitle">Sheet Subtitle 02</h6>
</div>
<div className="sheet-footer sheet-footer-btn-block-sm-down">
<div className="btn-group">
<div className="btn-group-item">
<button className="btn btn-primary" type="button">
Primary
</button>
</div>
<div className="btn-group-item">
<button className="btn btn-secondary" type="button">
Secondary
</button>
</div>
</div>
</div>
</div>
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
56/60
114/160
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…
<div className="container-fluid container-fluid-max-xl">
<div className="card-page card-page-equal-height">
<div className="card-page-item col-lg-4 col-sm-6">
<div className="sheet">
<div
className="autofit-padded-no-gutters autofit-row autofit-row-center"
>
<div className="autofit-col"></div>
<div className="autofit-col autofit-col-expand"></div>
</div>
</div>
</div>
<div className="card-page-item col-lg-4 col-sm-6">
<div className="sheet">
<div
className="autofit-padded-no-gutters autofit-row autofit-row-center"
>
<div className="autofit-col"></div>
<div className="autofit-col autofit-col-expand"></div>
</div>
</div>
</div>
<div className="card-page-item col-lg-4 col-sm-6">
<div className="sheet">
<div
className="autofit-padded-no-gutters autofit-row autofit-row-center"
>
<div className="autofit-col"></div>
<div className="autofit-col autofit-col-expand"></div>
</div>
</div>
</div>
</div>
<div className="card-page card-page-equal-height">
<div className="card-page-item col-12">
<div className="sheet sheet-multiple-form">
<div className="sheet-header">
<h4 className="sheet-title">SEO</h4>
</div>
<div className="row">
<div className="col-md-6"></div>
<div className="col-md-6"></div>
</div>
<div className="row">
<div className="col-md-6"></div>
<div className="col-md-6"></div>
</div>
<div className="row">
<div className="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
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
No page templates yet
Page Templates allow you to create pages faster with
reusable elements.
<div className="container-fluid container-fluid-max-xl">
<div className="sheet sheet-dataset-content">
<div className="sheet-header">
<h4 className="sheet-title">
<span className="autofit-row autofit-padded-no-gutters">
<span className="autofit-col autofit-col-shrink">
<span className="component-title">col1</span>
</span>
<span className="autofit-col">
<button className="component-action" type="button">
<svg
className="lexicon-icon lexicon-icon-ellipsis-v"
focusable="false"
role="presentation"
>
<use
xlinkHref="/images/icons/icons.svg#ellipsis-v"
/>
</svg>
</button>
</span>
</span>
</h4>
</div>
<nav
className="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light"
></nav>
<nav
className="management-bar management-bar-light navbar navbar-expand-md"
></nav>
<div className="container-view">
<div className="sheet">
<div className="c-empty-state c-empty-state-animation">
<div className="c-empty-state-image">
<div className="c-empty-state-aspect-ratio">
<img
alt="Image of a satellite in space"
className="aspect-ratio-item aspect-ratio-item-fluid"
src="/images/empty_state.gif"
/>
</div>
</div>
<div className="c-empty-state-title">
<span className="text-truncate-inline">
<span className="text-truncate"
>No page templates yet</span
>
</span>
</div>
<div className="c-empty-state-text">
Page Templates allow you to create pages faster with
reusable elements.
</div>
<div className="c-empty-state-footer">
<button
className="btn btn-secondary btn-sm"
type="button"
>
New Document
</button>
</div>
</div>
</div>
</div>
</div>
</div>