# 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.*`, `$t:key`) and accept the shared `props` bag, plus `visibility`, `responsive`, and `i18n` modules.

```yaml
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.*`, `$t: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](/en/docs/search-overview) 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.                                       |

:::callout
**Markdown content vs. markdown pages.** A `text` component with `props.format: markdown` renders a _fragment_ of markdown inline. To render an _entire page_ from a markdown file (with frontmatter, layout, and TOC), use the page-level `markdown` property — see [Pages Overview → Markdown Pages](/en/docs/pages-overview#markdown-pages).
:::

## Related Pages

- [Pages Overview](/en/docs/pages-overview) — page structure and variable substitution.
- [Layout Components](/en/docs/layout-components) — containers, grids, cards.
- [Media Components](/en/docs/media-components) — images, video, icons, embeds.
- [Search](/en/docs/search-overview) — full-text search engine and public search.
- [Search Components](/en/docs/search-components) — search UI building blocks (in the Search section).
- [SEO & Metadata](/en/docs/seo-meta) — document head and structured data.