Element

Element

Documentation

Reusable authored content elements supported in sections and nested content structures.

Can be one of:

CardList

A responsive grid of authored cards.

ComponentRef

A reference that includes persisted reusable component content. A ComponentRef may be authored wherever its containing contract permits a component reference. The referenced component is expanded once: persisted components may not contain another ComponentRef, including direct or indirect self-references.

Cta

A labeled link presented as an action.

Divider

A thematic divider between elements.

A themed collection of images. Lightbox-enabled images share navigation within the gallery; caption titles, subtitles, and credits follow the active image.

Image (standalone)

Shared authored image data.

type: "image" when used as Element

List

An ordered or unordered content list.

Menu

A navigation menu adapted to its page region. Menu owns the final semantic navigation and link markup, including optional supporting icons.

Modal

An addressable dialog rendered outside normal document flow. Any same-document Link whose fragment resolves to this Modal's ID is enhanced by the QP runtime to open it as a dialog.

PageList

Generates cards from existing page documents in the site manifest. PageList is a page-aware convenience primitive. It selects real QP pages, adapts their page content and metadata into cards, and renders the resulting cards through CardList. Pages can be selected in one of two ways: - Path discovery: omit pages and use path to select pages beneath a site path. When path is omitted, the current page path is used. By default only direct children are included; set recursive to include all descendants. - Explicit selection: provide pages to select specific page documents and control their order. When pages is present, path discovery is not used. Each selected PageDocument remains the source of truth. PageList selects and adapts those pages into normal CardList and Card structures, then delegates final rendering to those existing primitives rather than owning parallel card markup. PageCard represents an explicit page selection and any selection-local configuration it owns. Each selected page's pageListItemSettings may provide page-owned presentation settings such as image, subtitle, description, badge, and CTA text without changing the page's normal presentation.

PluginRef

An authored invocation of a registered plugin. Additional invocation fields are owned by the selected plugin.

ProductList

A specialized card list for product content. Shares CardList layout and styling behavior while using ProductCard entries instead of Card entries.

Socials

Built Content that selects reusable site social definitions, adapts them to icon-based MenuItems, and delegates final navigation rendering to Menu.

StickyTray

An authored viewport-persistent content tray. StickyTray may be authored as an Element or directly as a PageSection. Its authored location establishes an anchor in document flow, while Quail Pages owns the tray markup, accessibility, viewport placement, visibility, and runtime state. The handle renders Elements; the panel renders ordinary Sections. Handle content and its disclosure button are separate interactive surfaces. When visibilityTriggers is omitted, the tray is simply available. Within each trigger group, any trigger may satisfy the group (OR). Every group must be satisfied for the tray to be presented (AND). Responsive triggers use the canonical QP mobile, tablet, and desktop presentation-width ranges. Anchor triggers are evaluated against the tray's authored anchor: anchor-passed becomes true after the anchor crosses above the viewport start, anchor-visible is true while any part of the anchor is inside the viewport, and anchor-passed-center becomes true after the anchor crosses above the viewport center line. Authored location alone enables no visibility trigger. Vertical and horizontal placement independently control where the active tray appears and default to top-center. Overlay placement accounts for occupied header/footer boundaries. Inset fills the top or bottom edge, independently of horizontal alignment, and reserves its measured handle in the document viewport. Multiple inset handles stack in authored order. The panel overlays the remaining viewport. Inset shells move to the document viewport; authored anchors stay put. Three independent choices: disclosure controls panel interaction; visibilityTriggers controls when the whole tray appears; positionMode controls whether it reserves viewport space. For a permanent sticky menu, author the menu in handle.elements with no sections and omit visibilityTriggers. To show that menu only after scrolling past its authored position, add visibilityTriggers: [["anchor-passed"]]. No disclosure button is needed.

Toc

A page-aware table of contents generated automatically from eligible sections in the current page. Toc is a specialized composition rather than a standalone rendering primitive. It derives its navigation from the page and uses shared QP primitives to present that navigation consistently. By default, Toc renders as a position-aware StickyTray. It can also render an in-flow Card presentation. When placed inside a compatible container, the renderer may reuse the container supplied by its parent rather than emitting a redundant wrapper.

Video

An embedded video launched from a poster image.

Example

Required

{ "cards": [ { "title": "Getting Started", "elements": [ { "type": "paragraph", "text": "Learn the basics of birding." } ] } ], "type": "card-list" }

Full

{ "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" }

examples are generated from the schema.