UI element hierarchy

Our system.

We are sticking to the LSBC hierarchy:
Layout
└── Section
└── Block
└── Component

LSBC stands for "Layout, Section, Block, Component".

Component

The smallest reusable piece of UI.
Examples: Button, Input, Label, Icon, Checkbox, Avatar.

Block

Combination of components that function together as a single unit.
Examples: Search bar (Input + Button + Icon), Card Header (Avatar + Name + Timestamp).

Section

Combination of blocks. It forms a distinct part of the page.
Examples: Navigation bar, Hero section, Pricing grid, Testimonial section.

Layout

A layout that arranges sections into a cohesive screen.
Examples: Homepage layout, Product page layout.

On this page