Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncPowered by Gatsby and Netlify

Section

Sign In
View in FigmaDocumentation

A component that groups content to be processed more effectively.

Types

Section

When used in its simplest form, not being collapsible, it provides a way to display information in a hierarchical structure.

section component in its simplest form without icon

Section Collapsible

Sections can be expanded or collapsed to reveal or hide content contained within. To show that users perform this action, it displays an icon that changes based on whether the component is open or closed.

section collapsible component

Sizes

Regular

section regular component

As mentioned in the Form Sheet section. Sections can be used to establish a content hierarchy on a form. Regular section items stack vertically with 24px margin in between.


section small component 24px spacing

Small

section small component

Small section items stack vertically with 16px margin in between.


section small component 16px spacing

It can be used to establish a content hierarchy on a Sidebar.


section items example used in a sidebar

Something to improve? Report an issue!
Menu