Layout

Section wrapper

Semantic section wrapper that groups blocks without adding spacing or visual treatment.

Install

npx shadcn@latest add @alix/sectionWrapper

Preview

Advisory

Block spacing stays inside the block itself.

Implementation

The wrapper only gives the group one semantic section.

Usage

<SectionWrapper>
  <TextAndMediaBlock {...intro} />
  <TextAndMediaBlock {...detail} />
  <MediaBannerBlock {...banner} />
</SectionWrapper>

Examples

Spacing stays inside each block

The wrapper adds no padding or gap of its own, so stacked blocks keep the gutters their own designs specify — and never double them.

Turnaround and restructuring

This block owns its own p-6; the wrapper contributes none.

Performance improvement

A denser block carries a larger p-10 — its choice, not the wrapper's.

<SectionWrapper>
  <div className="p-6">…</div>
  <div className="bg-[#1b3644] p-10">…</div>
</SectionWrapper>

A labelled landmark

Because it renders a real <section>, it takes native attributes — point aria-labelledby at a heading to name the region for assistive tech.

Capabilities

The heading names the section; the blocks that follow fill it.

<SectionWrapper aria-labelledby="capabilities-heading">
  <h2 id="capabilities-heading">Capabilities</h2>
  <PostRowBlock {...posts} />
</SectionWrapper>

When to use it

Use it for

Grouping consecutive CMS blocks into one semantic <section> a block-renderer can map a section group onto.
Naming that region for assistive tech via aria-labelledby or aria-label — it forwards every native section attribute.
As the single future home for any section-level treatment, should the design ever grow one.

Reach for something else

Adding padding or gap here — spacing belongs to the blocks inside; use their own props or a Stack.
Capping width or painting a surface — that is Container's job.
Wrapping a single block — with nothing to group, it only adds a redundant landmark.

Props

Prop	Type	Default	Description
section props	React.ComponentProps<"section">	—	Native section attributes only; spacing and surfaces remain owned by the blocks inside.