StandardSection

StandardSection

Documentation

A section with one normal element flow.

Kind

Layout

Required fields

elements, id, title

Properties

appearance

enum

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

string

Optional styling hook.

*

elements

Elements rendered in authored order.

*

id

string

Stable document, section, or region identifier.

subtitle

string

Supporting text associated with the heading.

*

title

string

Semantic section heading.

titleSrOnly

boolean

Renders the section heading visually hidden but available to screen readers.

type

string

Identifies this as a standard content section.

"section"

width

enum

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

{ "elements": [], "id": "example", "title": "Example" }

Full

{ "appearance": "default", "class": "example", "elements": [ { "cardClass": "example", "cards": [ { "title": "Getting Started", "elements": [ { "type": "paragraph", "text": "Learn the basics of birding." } ] }, { "title": "Field Skills", "elements": [ { "type": "paragraph", "text": "Practice identifying birds outdoors." } ] } ], "class": "example", "columns": 2, "type": "card-list" } ], "id": "example", "subtitle": "example", "title": "Example", "titleSrOnly": false, "type": "section", "width": "default" }

examples are generated from the schema.