RegionSection
RegionSection
A section arranging content into rows of regions.
Authoring guidance
Use when
Properties
appearance
Standard section surface treatment. Defaults to default when omitted. default uses the standard Base/theme section surface. alternate uses the standard visually distinct alternate surface while retaining normal section structure. transparent removes the standard section surface so the surrounding page or background shows through while retaining normal section structure. theme emits no standard appearance class and opts out of the complete standard Section surface recipe. The authored class and active theme own its background, foreground, internal padding, border, radius, shadow, and other surface behavior. Use it to replace the standard composition rather than merely recolor it. When the custom appearance creates a visible surface boundary, the theme must provide an appropriate internal inset; it may explicitly reuse the standard Section surface padding variables.
"default" | "alternate" | "transparent" | "theme"
class
Optional styling hook.
id
Stable document, section, or region identifier.
maxPerRow
Maximum regions in each row.
minimum: 1 · integer only (no decimals)
regions
Independently sized content regions.
subtitle
Supporting text associated with the heading.
title
Semantic section heading.
titleSrOnly
Renders the section heading visually hidden but available to screen readers.
type
Identifies this as a standard content section.
"section"
width
Standard section width treatment. Defaults to default when omitted. default uses the standard constrained content width with normal outer breathing room. wide uses a wider constrained content width while retaining normal outer breathing room. full is a full-bleed treatment whose section surface extends edge-to-edge without an outer inline gutter or corner treatment by default; use it for backgrounds, imagery, media, and other continuous surfaces. Child content may remain independently constrained. theme applies no standard width treatment; the authored class and active theme own the width behavior.
"default" | "wide" | "full" | "theme"
Example
Required
Full
examples are generated from the schema.