Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

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.

View in Lexicon

  • Example
  • One Column
  • Two Columns
  • Sheet Title
  • Sheet Subtitle
  • Sheet Tertiary Title
  • Variants
    • Sheet Multiple Form
    • Commerce Product Screen
    • Sheet Dataset Content
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.
Copied!
Code Sample (expand to see it)
<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.
Copied!
Code Sample (expand to see it)
<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.
Copied!
Code Sample (expand to see it)
<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.

Sheet Title

One Line Title Add

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Add

Copied!
Code Sample (expand to see it)
<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).

Sheet Subtitle

One Line Subtitle Add

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Add

Copied!
Code Sample (expand to see it)
<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

Sheet Tertiary Title

One Line Tertiary Title Add

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Add

Copied!
Code Sample (expand to see it)
<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

  • Download
  • Edit
  • Move
  • Checkout
  • Permissions
  • Move to Recycle Bin
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
Copied!
Code Sample (expand to see it)
<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.

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

SEO

https://www.your-domain.com
/p/
Title length should be under 60 characters
56/60
  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
Description should be under 155 characters
114/160
  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
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...
Copied!
Code Sample (expand to see it)
<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

Fragments
  • Fragments
  • Resources
  • Filter and Order
    • Filter Action 1
    • Filter Action 2
    • Filter Action 3
    • List View
    • Table View
    • Card View
Image of a satellite in space
No page templates yet
Page Templates allow you to create pages faster with reusable elements.
Copied!
Code Sample (expand to see it)
<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>

How can this be improved? Create an issue!