Divider

The Divider is a simple line that helps separate parts of the interface, making the content easier to read and understand.

Figma component

Aero Global Foundation / Global Components

How to use

The Divider is a thin line used to separate content. It helps make a layout easier to read by creating clear visual breaks between sections.

Use it when you want to show that two blocks of content are related but still different. The Divider helps users understand how the page is structured.

Margin

The Margin property of a Divider controls the spacing above and below the line

None

Use this when the layout already has enough space around the Divider.

Small

Use this to create a light visual separation without too much space.

Medium

Use this when you need more breathing room around the Divider, especially in larger layouts or between major sections.

Intensity

The intensity sets how visible the Divider looks, depending on the visual importance you want to give it

Subtle

Use this for soft separation between related content.

Default

Use this for regular use in most layouts.

Strong

Use this when you need a clear visual break, like between unrelated sections.

Do’s and Don’ts

Use Dividers to separate sections or groups of related content

Don't

Don’t add Dividers where simple spacing is enough

Accessibility

Dividers are visual only. They don’t need to be read or focused.

Avoid giving Dividers a semantic role (like role="separator") unless absolutely needed.

Content

Dividers should never include any content inside.

No text, no icons, no buttons.

Use Dividers only to separate, not to explain.

Always make sure that the content before and after the Divider makes sense on its own.

Availability

Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.

Blueweb

iOS

Android

Kiosk

Design status

Ready