Region

Region

Documentation

An independently sized layout region within a section. Regions intentionally provide no default surface padding. Region gaps separate sibling Regions and do not replace the owning Section's internal surface inset.

Kind

Layout

Required fields

elements

Style Guide

Used by

Properties

class

string

Optional space-separated classes added to the qp-region wrapper for theme-owned semantic roles, such as qp-region--reference-nav or qp-region--example-rail. Use relativeWidth and newRow for the normal Region layout contract.

*

elements

Elements rendered in authored order.

newRow

boolean

Starts this region on a new row.

relativeWidth

number

Width share relative to sibling regions.

minimum: 1

Example

Required

{ "elements": [] }

Full

{ "class": "qp-region--content", "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" } ], "newRow": false, "relativeWidth": 0 }

examples are generated from the schema.