Forms Hierarchy
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 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 class="sheet sheet-lg">
<div class="sheet-header">
<h2 class="sheet-title">Sheet Title</h2>
<div class="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 class="sheet-section">
<h3 class="sheet-subtitle">Sheet Subtitle</h3>
<h3 class="autofit-row sheet-subtitle">
<span class="autofit-col autofit-col-expand">
<span class="heading-text">Sheet Subtitle with Button</span>
</span>
<span class="autofit-col">
<span class="heading-end">
<button class="btn btn-secondary btn-sm" type="button">
Add
</button>
</span>
</span>
</h3>
<h4 class="sheet-tertiary-title">Sheet Tertiary Title</h4>
<div class="sheet-text">
Sheet Subtitle and Sheet Tertiary Title are contained inside a
sheet-section.
</div>
</div>
<div
aria-orientation="vertical"
class="panel-group panel-group-flush"
role="tablist"
>
<div class="panel">
<a
aria-controls="accordion03CollapseTwo"
aria-expanded="true"
class="collapse-icon sheet-subtitle"
data-toggle="collapse"
href="#accordion03CollapseTwo"
id="accordion03HeadingTwo"
role="tab"
>
<span>First Level Collapse 1</span>
<span class="collapse-icon-closed">
<svg
class="lexicon-icon lexicon-icon-angle-right"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span class="collapse-icon-open">
<svg
class="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"
class="panel-collapse collapse show"
id="accordion03CollapseTwo"
role="tabpanel"
style=""
>
<div class="panel-body">
<div class="sheet-text">
This is an example of explanatory text.
</div>
</div>
</div>
</div>
</div>
<div class="sheet-footer">
<div class="btn-group-item">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="btn-group-item">
<button class="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 class="sheet sheet-lg">
<div class="sheet-header">
<h2 class="sheet-title">Sheet Title</h2>
<div class="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 class="sheet-section">
<div class="form-group">
<label for="_0rmtn466h">
Screen Name
<span class="reference-mark">
<svg
class="lexicon-icon lexicon-icon-asterisk"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#asterisk"></use>
</svg>
</span>
</label>
<input
class="form-control"
id="_0rmtn466h"
placeholder="Placeholder"
type="text"
/>
</div>
<div class="form-group">
<label for="_9hslbpuas">Email</label>
<input class="form-control" id="_9hslbpuas" type="email" />
</div>
<div class="form-group">
<label for="_javf9wj9l">Name</label>
<input
class="form-control"
id="_javf9wj9l"
placeholder="Name"
type="text"
/>
</div>
</div>
<div class="sheet-footer sheet-footer-btn-block-sm-down">
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="btn-group-item">
<button class="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 class="sheet sheet-lg">
<div class="sheet-header">
<h2 class="sheet-title">Sheet Title</h2>
<div class="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 class="sheet-section">
<div class="form-group-autofit">
<div class="form-group-item">
<label for="_cab0u4dgi">
Screen Name
<span class="reference-mark">
<svg
class="lexicon-icon lexicon-icon-asterisk"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#asterisk"></use>
</svg>
</span>
</label>
<input
class="form-control"
id="_cab0u4dgi"
placeholder="Placeholder"
type="text"
/>
</div>
<div class="form-group-item">
<label for="_y1mdflpv9">Birthday</label>
<input
class="form-control"
id="_y1mdflpv9"
placeholder="Placeholder"
type="text"
value="01/01/1970"
/>
</div>
</div>
<div class="form-group-autofit">
<div class="form-group-item">
<label for="_jcrc07o9v">Email</label>
<input class="form-control" id="_jcrc07o9v" type="email" />
</div>
<div class="form-group-item">
<label for="_17obpdwz0">Gender</label>
<input
class="form-control"
id="_17obpdwz0"
placeholder="Gender"
type="text"
/>
</div>
</div>
<div class="form-group-autofit">
<div class="form-group-item">
<label for="_kcnx64qkv">Name</label>
<input
class="form-control"
id="_kcnx64qkv"
placeholder="Name"
type="text"
/>
</div>
<div class="form-group-item">
<label for="_8awy2608y">Job Title</label>
<input
class="form-control"
id="_8awy2608y"
placeholder="Job Title"
type="text"
/>
</div>
</div>
</div>
<div class="sheet-footer sheet-footer-btn-block-sm-down">
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary" type="button">
Secondary
</button>
</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 class="sheet-title">Sheet Title</h4>
<h4 class="sheet-title">
<span class="autofit-float-sm-down autofit-padded-no-gutters autofit-row">
<span class="autofit-col autofit-col-expand">
<span class="component-title">One Line Title</span>
</span>
<span class="autofit-col">
<a class="btn btn-secondary btn-sm" href="#1" role="button">Add</a>
</span>
<span class="autofit-col">
<button class="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
<h4 class="sheet-title">
<span class="autofit-padded-no-gutters autofit-row">
<span class="autofit-col autofit-col-expand">
<span class="component-title"
>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
>
</span>
<span class="autofit-col">
<a class="btn btn-secondary btn-sm" href="#1" role="button">Add</a>
</span>
<span class="autofit-col">
<button class="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 class="sheet-subtitle">
<span class="autofit-float-sm-down autofit-padded-no-gutters autofit-row">
<span class="autofit-col autofit-col-expand">
<span class="component-title">One Line Subtitle</span>
</span>
<span class="autofit-col">
<a class="btn btn-secondary btn-sm" href="#1" role="button">Add</a>
</span>
<span class="autofit-col">
<button class="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
<h4 class="sheet-subtitle">
<span class="autofit-float-sm-down autofit-padded-no-gutters autofit-row">
<span class="autofit-col autofit-col-expand">
<span class="component-title"
>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
>
</span>
<span class="autofit-col">
<a class="btn btn-secondary btn-sm" href="#1" role="button">Add</a>
</span>
<span class="autofit-col">
<button class="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>Sheet Tertiary Title
<h4 class="sheet-tertiary-title">Sheet Tertiary Title</h4>
<h4 class="sheet-tertiary-title">
<span class="autofit-float-sm-down autofit-padded-no-gutters autofit-row">
<span class="autofit-col autofit-col-expand">
<span class="component-title">One Line Tertiary Title</span>
</span>
<span class="autofit-col">
<a class="btn btn-secondary btn-sm" href="#1" role="button">Add</a>
</span>
<span class="autofit-col">
<button class="btn btn-secondary btn-sm" type="button">
Remove
</button>
</span>
</span>
</h4>
<h4 class="sheet-tertiary-title">
<span class="autofit-float-sm-down autofit-padded-no-gutters autofit-row">
<span class="autofit-col autofit-col-expand">
<span class="component-title"
>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
>
</span>
<span class="autofit-col">
<a class="btn btn-secondary btn-sm" href="#1" role="button">Add</a>
</span>
<span class="autofit-col">
<button class="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 class="sheet sheet-multiple-form">
<div class="sheet-header">
<div class="autofit-row autofit-padded-no-gutters">
<div class="autofit-col autofit-col-shrink">
<h4 class="sheet-title">
<span class="component-title">Sheet Header</span>
</h4>
</div>
<div class="autofit-col">
<div class="dropdown dropdown-action">
<button
aria-expanded="false"
aria-haspopup="true"
class="component-action dropdown-toggle"
data-toggle="dropdown"
id="dropdownSites5"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-ellipsis-v"
focusable="false"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#ellipsis-v"
/>
</svg>
</button>
<ul aria-labelledby="dropdownSites5" class="dropdown-menu">
<li><a class="dropdown-item" href="#1">Download</a></li>
<li><a class="dropdown-item" href="#1">Edit</a></li>
<li><a class="dropdown-item" href="#1">Move</a></li>
<li><a class="dropdown-item" href="#1">Checkout</a></li>
<li>
<a class="dropdown-item" href="#1">Permissions</a>
</li>
<li>
<a class="dropdown-item" href="#1"
>Move to Recycle Bin</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sheet-section">
<h5 class="sheet-title">Sheet Title</h5>
<p class="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 class="sheet-section">
<h6 class="sheet-subtitle">Sheet Subtitle 01</h6>
<div class="form-group">
<label for="basicInputTypeTextarea">Textarea</label>
<textarea
class="form-control"
id="basicInputTypeTextarea"
name="basicInputTypeTextarea"
placeholder="Placeholder"
></textarea>
</div>
</div>
<div class="sheet-section">
<h6 class="sheet-subtitle">Sheet Subtitle 02</h6>
</div>
<div class="sheet-footer sheet-footer-btn-block-sm-down">
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
<div class="btn-group-item">
<button class="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
https://www.your-domain.com
/p/
56/60
114/160
This is an example of a very long title
https://liferay.com
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 class="container-fluid container-fluid-max-xl">
<div class="card-page card-page-equal-height">
<div class="card-page-item col-lg-4 col-sm-6">
<div class="sheet">
<div
class="autofit-padded-no-gutters autofit-row autofit-row-center"
>
<div class="autofit-col"></div>
<div class="autofit-col autofit-col-expand"></div>
</div>
</div>
</div>
<div class="card-page-item col-lg-4 col-sm-6">
<div class="sheet">
<div
class="autofit-padded-no-gutters autofit-row autofit-row-center"
>
<div class="autofit-col"></div>
<div class="autofit-col autofit-col-expand"></div>
</div>
</div>
</div>
<div class="card-page-item col-lg-4 col-sm-6">
<div class="sheet">
<div
class="autofit-padded-no-gutters autofit-row autofit-row-center"
>
<div class="autofit-col"></div>
<div class="autofit-col autofit-col-expand"></div>
</div>
</div>
</div>
</div>
<div class="card-page card-page-equal-height">
<div class="card-page-item col-12">
<div class="sheet sheet-multiple-form">
<div class="sheet-header">
<h4 class="sheet-title">SEO</h4>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="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 class="container-fluid container-fluid-max-xl">
<div class="sheet sheet-dataset-content">
<div class="sheet-header">
<h4 class="sheet-title">
<span class="autofit-row autofit-padded-no-gutters">
<span class="autofit-col autofit-col-shrink">
<span class="component-title">col1</span>
</span>
<span class="autofit-col">
<button class="component-action" type="button">
<svg
class="lexicon-icon lexicon-icon-ellipsis-v"
focusable="false"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#ellipsis-v"
/>
</svg>
</button>
</span>
</span>
</h4>
</div>
<nav
class="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light"
></nav>
<nav
class="management-bar management-bar-light navbar navbar-expand-md"
></nav>
<div class="container-view">
<div class="sheet">
<div class="c-empty-state c-empty-state-animation">
<div class="c-empty-state-image">
<div class="c-empty-state-aspect-ratio">
<img
alt="Image of a satellite in space"
class="aspect-ratio-item aspect-ratio-item-fluid"
src="/images/empty_state.gif"
/>
</div>
</div>
<div class="c-empty-state-title">
<span class="text-truncate-inline">
<span class="text-truncate"
>No page templates yet</span
>
</span>
</div>
<div class="c-empty-state-text">
Page Templates allow you to create pages faster with
reusable elements.
</div>
<div class="c-empty-state-footer">
<button class="btn btn-secondary btn-sm" type="button">
New Document
</button>
</div>
</div>
</div>
</div>
</div>
</div>