Page History

Versions Compared

Link to Figma: tba

Section is a container used to organize and group related UI elements.
It arranges child components using a vertical or horizontal layout.
It supports internal scrolling when content exceeds the section’s dimensions.
It provides loading states via a loader with configurable size and cover background.
It is a fundamental building block for structured page layouts and nested groups.

...

showLoader - Programmatically displays the loading indicator over the section content. This action is useful during asynchronous operations to provide visual feedback to users that content is being processed.
hideLoader - Programmatically hides the loading indicator when operations are complete. This action should be called after asynchronous operations finish to restore normal section content visibility.

Choose arrangement with layout ("vertical" for stacked content, "horizontal" for peers).
Control inter-item spacing with gapClass and interior space with paddingClass.
- Use spacing and white space to create clear relationships and group information into content sections
.
Group related tasks under section titles to provide context and make interfaces easier to scan.
Apply the spacing scale consistently across breakpoints (utilities apply from the indicated breakpoint upward).
When you need to center fixed-width block content, use the provided center class.

...

- .
Align along both axes using alignItemsClass and justifyContentClass.
Establish size stability with defaultHeight and permit change with canGrow/canShrink.
When overflow is likely, keep the footprint stable by enabling internal scrolling via scrollingEnabled.

Show and hide a busy state explicitly with showLoader and hideLoader, and size the indicator with loaderSize.

Keep layouts stable under changing data using defaultHeight with canGrow or scrollingEnabled.
Maintain consistent rhythm as content updates using alignItemsClass, justifyContentClass, and gapClass.

Document intent for authors with displayName.
Order elements to match reading order and use gapClass to reinforce grouping.
Avoid overly long blocks; if needed, split content across multiple Sections while keeping order clear with elements.

Do	Don’t	Article setting(s)
Set `layout: "vertical"` for forms and reading flows.	Force dense forms into a cramped horizontal row.	`layout`
Add consistent spacing via `gapClass`.	Manually add inconsistent margins to children.	`gapClass`
Provide `defaultHeight` and allow growth with `canGrow`.	Hard-lock the Section height so content clips.	`defaultHeight`, `canGrow`
Enable `scrollingEnabled` when content can overflow.	Let content push surrounding UI or be cut off.	`scrollingEnabled`
Show a loader during async work and size it appropriately.	Leave users with a frozen area and no feedback.	`showLoader`, `hideLoader`, `loaderSize`
Use a subtle `loaderCoverBackground` that preserves legibility.	Pick a cover color that hides the spinner or content.	`loaderCoverBackground`, `loaderSize`
Align content intentionally with `alignItemsClass`/`justifyContentClass`.	Rely on default alignment that produces uneven layouts.	`alignItemsClass`, `justifyContentClass`
Name the component clearly for maintainability.	Keep the default generic name in the structure panel.	`displayName`
Initialize data on mount; clean up on unmount.	Start work late and leak timers/listeners.	`events.ON_INIT`, `events.ON_DESTROY`

Provide a perceivable busy state using showLoader/hideLoader with an appropriate loaderSize.
Maintain predictable reading order via elements and layout.
Reduce layout shift with defaultHeight plus canGrow/canShrink.
Preserve loader legibility using loaderCoverBackground.
Keep alignment predictable with alignItemsClass and justifyContentClass.
Avoid color-only messaging; use the loader state rather than relying solely on loaderCoverBackground.
Prevent scroll jank and keep focus context stable by enabling scrollingEnabled when content can overflow.
Improve readability by applying adequate interior spacing with paddingClass.