Skip to main content
View as Markdown

Content Components

Content components render text and prose. They cover rich text and markdown, code blocks with syntax highlighting, collapsible accordions, styled callouts, blockquotes, an auto-generated table of contents, and the page-level search-input UI. All content components support variable substitution in their content ($record.*, $vars.*, key) and accept the shared props bag, plus visibility, responsive, and i18n modules.

components:
  - type: text
    tag: h1
    content: Getting Started
  - type: text
    content: '$record.body'
    props: { format: markdown }
  - type: alert
    props: { variant: info, dismissible: true }
    content: 'Heads up — this is a callout.'

text

The primary content component. Renders inline text, a semantic element (heading, paragraph, blockquote), or full markdown. The same text type covers headings, paragraphs, code blocks, and blockquotes via its tag/props.

Property Description
content Text or markdown source (supports $record.*, $vars.*, key).
tag Semantic element: h1–h6, p, span, blockquote, code, etc.
props.format Set to markdown to render content as sanitized HTML (headings, bold, italic, links, images, nested lists).
props.language When tag: code, the language for syntax highlighting.
props.lineNumbers When tag: code, set true to display line numbers.
props.cite When tag: blockquote, the citation source URL.
props Additional HTML attributes (e.g. className).

Markdown output is sanitized to prevent XSS (no <script> tags or event-handler attributes). Code blocks include a copy-to-clipboard button.

code

A standalone code block (equivalent to text with tag: code, exposed as its own type for clarity).

Property Description
content The code source.
props.language Language for syntax highlighting (e.g. ts, yaml, bash).
props.lineNumbers Display line numbers alongside the code.
props Additional HTML attributes.

toc

Auto-generates a table of contents from the page's heading hierarchy. Clicking a link smooth-scrolls to the heading anchor; the active section is highlighted based on scroll position.

Property Description
props.sticky Set true to keep the TOC fixed to the viewport on scroll.
props Additional HTML attributes (e.g. className).

accordion

Collapsible content sections, each with a summary trigger and a detail panel.

Property Description
children Accordion items (each with a summary label and detail content).
props.mode single collapses other sections when one opens; multiple allows several open at once.
props.defaultOpen Set true to render a section expanded on page load.
props Additional HTML attributes.

blockquote

A styled quotation block (equivalent to text with tag: blockquote). Nested blockquotes render with increasing indentation.

Property Description
content The quoted text.
props.cite Citation source URL.
props Additional HTML attributes.

alert

A styled callout block for highlighting information.

Property Description
content The alert message (supports substitution).
props.variant Visual style: info, warning, error, or success — each auto-selects an appropriate icon and color.
props.dismissible Set true to render a close button that hides the alert.
props Additional HTML attributes.

searchInput

A page-level search-input control that drives client-side filtering of a bound list or table. (The full-text engine configuration — indexing, weights, public search — lives in the Search section; this is the UI building block.)

Property Description
props.placeholder Placeholder text shown in the search field.
props.debounceMs Debounce delay before the search fires (results update live after the delay).
props.minLength Minimum query length before searching (prevents empty/short searches).
dataSource Optional binding when the input filters a search-mode data source.

pageSearch

A page-scoped search experience composed of an input plus a results region, bound to a searchable table. Use for in-page filtering of records.

Property Description
dataSource Table binding in search mode (searchFields, debounce, maxResults).
props.placeholder Placeholder for the search field.
children Optional result-template components.