UI components · Layout containers
Section
Also called: Content section, Page section, Content block, Page block
Splits a long page into chunks. Each chunk has its own heading and a group of content, and chunks are separated by white space, dividers, or a change in background color.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstSplit this long page into content sections. Wrap each one in a section tag. At the top, put an h2 heading (20px, 600) and one line of 14px gray description, with an optional "View all" text link on the right. Put 16px between the heading and the content, and 48px (marketing site) or 32px (admin) between sections. On the marketing site, alternate white and light gray (#F7F7F5) backgrounds, with content centered at a max width of 1200px. In the admin app, separate sections with a 1px divider, and don't give every block a border and shadow.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Section is what you need.
Use Section when
- Long pages like marketing sites and landing pages that need to explain features, use cases, and pricing one block at a time
- Settings and detail pages with lots of info that needs grouping by topic
- A page with several different kinds of content (stats, lists, charts) that each need their own heading
Pick something else when
A group of similar small items side by side (products, articles)
Use insteadCard GridContent that's only a line or two to begin with, which doesn't need splitting into sections
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Wrapping every section in a border and shadow, then wrapping the cards inside again, so the page turns into a pile of boxes with no clear hierarchy
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Sections with no headings, separated only by white space, so users scanning the page can't tell what each block is about
- 03
The same spacing between sections as inside them, so you can't tell which content belongs together
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section heading (optionally with a description and a link on the right) plus a block of content. Several sections stack vertically, separated by spacing, dividers, or background color.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
Sections are the building blocks of a long page. "Features," "Use cases," and "Pricing" on a marketing site, "Basic info," "Notifications," and "Security" on a settings page, "Product info" and "Shipping info" on a detail page. Each is a section: a heading on top (maybe with a line of description and a "View all" on the right), then that section's content. In HTML it's usually a section tag, named by its heading.
How it differs from a Card: a card is a small, self-contained object, often shown several in a row. A section is a big stretch of the page that usually spans the full content width and can hold cards, tables, or forms. How it differs from Collapse and Tabs: sections are all laid out open, and you see them by scrolling. The other two fold content away or stack it in one spot.
Separate sections mainly with spacing and headings. On marketing sites you can alternate background colors. Don't wrap every section in a border and shadow, or the page will feel chopped up. If a long page has many sections, add anchor navigation.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-section- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
section[aria-labelledby]section[aria-label]section:has(> h2)section:has(> header h2)section:has(> div > h2:first-child)
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
sectioncontent-sectionpage-sectionsection-wrappersection-container
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
SectionPageSectionContentSection
- Semantic tags and roles
A weak signal. It only counts together with other cues.
<section>role=region
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with heading
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026