Region | Quail Pages

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

Region

Used by

RegionSection

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

Element[]

Elements rendered in authored order.

mobileOrder

number

Position of this region within its current row when RegionSection layout collapses at the mobile breakpoint. Regions without an explicit value keep their natural, one-based position in that row. Each row is ordered independently, and desktop order is unchanged.

minimum: 1 · integer only (no decimals)

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" } ], "mobileOrder": 3, "newRow": false, "relativeWidth": 0 }

examples are generated from the schema.