Layout components

A clear layout hierarchy is essential for helping users understand how information is organized and how to navigate complex pages with ease. Proper structuring improves scanability, reduces cognitive load, and creates a more enjoyable experience.

Layout components

Layout components

Use this visual model to guide your page design:

Hierarchy level	Use case	Implementation
Page level	Separating major sections	Section card
Content level	Use line separator for separating different grouped contents or between subsections	Line separator
Content level	Use container with background to grouped related elements (e.g. grouped related dropdown)	Container (gray box)

1. Section card

Section cards act as the main building blocks of your page. They help users distinguish between major content areas and serve as visual anchors for navigation. Think of them as chapters in a book - each section tells its own story.

When to use

To divide the page into major content sections
To give users clear landmarks for navigation
To create visual "chapters" on long pages

2. Line separator

Line separators offer a lightweight way to structure content within sections.

When to use:

To divide related but distinct subsections
To separate grouped contents within a section card
To provide lightweight structure

Line separator used to distinguish between main section and sub section

Line separator used to distinguish between sub sections

3. Container

Containers (often gray boxes) are visual groups that organize related content and interface components.

When to use

To group related elements by organizing related elements into clearly defined sections
To establish hierarchy by highlighting important or actionable information
To improve page structure and scanability

📘
Use containers sparingly. Overusing them can make the UI feel cluttered and overly segmented. In many cases, well-applied spacing provides a cleaner and more natural separation than an additional visible container.

Contents