UI element hierarchy
This is the terminology we follow when naming different interface elements.
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.
For simplicity, we often call blocks “components” as well. So, some items in the list of components are technically blocks, since they're made up of several other components.
Examples: Search bar (Input + Button + Icon), Card Header (Avatar + Name + Timestamp), Sidebar, Navigation bar.
Section
Combination of blocks. It forms a distinct part of the page.
Examples: 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