Block Catalog — Section
No Background
Section with backgroundColor set to none — inherits the page background.
This section uses no explicit background color. It blends seamlessly with the surrounding page, making it ideal for standard content flow.
White Background
Section with a clean white background for visual separation.
A white background provides subtle contrast against off-white or gray page backgrounds. Use it to draw attention to key content areas.
Gray Background
Section with a soft gray background to create visual rhythm.
Gray backgrounds break up long pages into distinct zones. They work especially well for stats, testimonials, or feature grids that benefit from visual grouping.
Dark Background
Section with a dark background for high-contrast emphasis.
Dark sections create dramatic contrast and naturally draw the eye. Best used sparingly — for calls to action, pricing highlights, or key announcements.
Full Header Section
Both heading and subheading are provided, giving readers a clear title and supporting context.
When both heading and subheading are present, the section renders a two-line header above its inner blocks. This is the most common pattern for feature sections and content groupings.
Heading Only Section
Omitting the subheading produces a cleaner, more compact header. This works well when the heading is self-explanatory or the inner blocks provide their own context.
A section with no heading or subheading acts as a pure wrapper — providing background color, padding, and anchor linking without any visible header. Useful for full-width media or hero-like layouts inside a section.
Anchor ID Demo
This section has an anchorId so other elements can link directly to it via #section-with-anchor.
Anchor IDs enable in-page navigation. Use them in header nav links, table of contents, or call-to-action buttons that scroll visitors to a specific section. The anchor is rendered as an id attribute on the section element.
Multiple Inner Blocks
A single section containing more than one inner block to demonstrate stacking.
This is the first content block inside the section. Sections can hold any number of inner blocks, which render sequentially within the same background and padding context.
This is the second content block. Stacking multiple blocks inside one section is useful when you want them to share the same visual container — for example, an intro paragraph followed by a stats grid.
This is the third content block. All three blocks share the section heading, background color, and anchor ID, creating a cohesive group.