Section Anchor

Section Anchor renders nothing visible. The frame below simulates a page with three anchored sections and a jump-link nav at the top. Click a chip to scroll to its anchor.

Pricing

Placeholder content for the #pricing section. In production, this is where the next block on the page — a Card Group, Feature Dense, etc. — would render. The anchor is invisible; only the id on the DOM matters.

Case studies

Placeholder content for the #case-studies section. In production, this is where the next block on the page — a Card Group, Feature Dense, etc. — would render. The anchor is invisible; only the id on the DOM matters.

FAQ

Placeholder content for the #faq section. In production, this is where the next block on the page — a Card Group, Feature Dense, etc. — would render. The anchor is invisible; only the id on the DOM matters.

Content guidance

Usage

Drop above any block that should be jump-linkable from elsewhere on the page or from external URLs (e.g. https://example.com/page#pricing). The anchor renders an empty element with the supplied id; the browser handles scroll-to behavior natively.

Naming

The name field is constrained to lowercase letters, digits, hyphens, and underscores (^[a-z0-9_-]+$). Keep it short, descriptive, and stable — external links will break if you rename. Avoid generic names like section-1 if you can; future-you (or another author) won't remember which section.

When not to use

Don't use Section Anchor as a layout block. It has no visual output and no spacing of its own — placing it between two other blocks won't introduce a gap. Pair with a real content block, don't rely on it for rhythm.

Scroll behavior

Scroll-to is handled by the browser. If the page has a sticky header or a fixed nav, the anchor will scroll under it by default — set scroll-margin-top on the anchor target, or apply it globally to all anchored elements on the page. This is a layout concern, not a block concern.

Variants

Content model

FieldTypeChoices / ReferenceDefaultRequiredMulti
NameText—yes—