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
    • Focus Trap
    • 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
    • Reduced Motion
    • 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 Row
  • 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 Row

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

Sheet Title

  • Fields
  • Settings
  • Documents
  • Configuration
    Setup Supported Clients
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.
Copied!
Code Sample (expand to see it)
<div class="sheet sheet-lg">
	<div class="sheet-header">
		<h4 class="sheet-title">Sheet Title</h4>
	</div>
	<div class="sheet-row">
		<ul class="nav nav-tabs nav-tabs-light" role="tablist">
			<li class="nav-item">
				<a
					aria-controls="fields"
					aria-selected="true"
					class="active nav-link"
					data-toggle="tab"
					href="#fields"
					id="fieldsTab"
					role="tab"
					>Fields</a
				>
			</li>
			<li class="nav-item">
				<a
					aria-controls="settings"
					aria-selected="false"
					class="nav-link"
					data-toggle="tab"
					href="#settings"
					id="settingsTab"
					role="tab"
					>Settings</a
				>
			</li>
			<li class="nav-item">
				<a
					aria-controls="documents"
					aria-selected="false"
					class="disabled nav-link"
					data-toggle="tab"
					href="#documents"
					id="documentsTab"
					role="tab"
					tabindex="-1"
					>Documents</a
				>
			</li>
			<li class="dropdown nav-item">
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="dropdown-toggle nav-link"
					data-toggle="dropdown"
					href="#1"
					role="button"
				>
					Configuration
					<svg
						class="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom" />
					</svg>
				</a>
				<div class="dropdown-menu dropdown-menu-indicator-end">
					<a
						aria-controls="setup"
						aria-selected="false"
						class="dropdown-item"
						data-toggle="tab"
						href="#setup"
						id="setupTab"
						role="tab"
					>
						Setup
						<span
							aria-hidden="true"
							class="dropdown-item-indicator"
						>
							<svg
								class="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"
						class="dropdown-item"
						data-toggle="tab"
						href="#supportedClients"
						id="supportedClientsTab"
						role="tab"
					>
						Supported Clients
						<span
							aria-hidden="true"
							class="dropdown-item-indicator"
						>
							<svg
								class="lexicon-icon lexicon-icon-check"
								focusable="false"
								role="presentation"
							>
								<use href="/images/icons/icons.svg#check" />
							</svg>
						</span>
					</a>
				</div>
			</li>
		</ul>
		<div class="tab-content">
			<div
				aria-labelledby="fieldsTab"
				class="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"
				class="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"
				class="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"
				class="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"
				class="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.

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!