title: Content components
shell: standard
components:
- type: breadcrumb
items:
- label: Home
href: ../index.html
- label: Components
href: index.html
- label: Content
- type: header
title: Content components
eyebrow: Reference
subtitle: header, meta, markdown, code, image, callout, blockquote, kbd
# ── header ─────────────────────────────────
- type: section
eyebrow: header
heading: Page title block
components:
- type: markdown
body: "Title with optional subtitle and eyebrow. Usually the first component on a page."
- type: header
title: Q2 Business Review
subtitle: Three deployments, 140 active users
eyebrow: Executive Summary
- type: code
language: yaml
code: |
- type: header
title: Q2 Business Review
subtitle: Three deployments, 140 active users
eyebrow: Executive Summary
# ── meta ───────────────────────────────────
- type: section
eyebrow: meta
heading: Key-value strip
components:
- type: markdown
body: "Horizontal grid of labeled values. Great for page metadata — author, date, status, version."
- type: meta
fields:
- key: Author
value: Tyler M.
- key: Last Updated
value: 2026-04-16
- key: Status
value: Active
- key: Version
value: "1.2"
- type: code
language: yaml
code: |
- type: meta
fields:
- key: Author
value: Tyler M.
- key: Last Updated
value: 2026-04-16
- key: Status
value: Active
# ── markdown ───────────────────────────────
- type: section
eyebrow: markdown
heading: Rich prose
components:
- type: markdown
body: "Parses standard CommonMark plus tables. All the usual: headings, lists, bold, italic, code spans, blockquotes, links, tables."
- type: markdown
body: |
## Heading
Regular paragraph with **bold** and *italic* and `inline code`.
- Unordered list
- With a second item
| Metric | Value |
|--------|-------|
| Users | 47 |
| Coverage | 94% |
> Blockquote for emphasis.
- type: code
language: yaml
code: |
- type: markdown
body: |
## Heading
Regular paragraph with **bold** and *italic*.
- Unordered list
- With a second item
| Metric | Value |
|--------|-------|
| Users | 47 |
# ── code ───────────────────────────────────
- type: section
eyebrow: code
heading: Syntax-styled code block
components:
- type: markdown
body: "A fenced code block as a standalone component. `language` is optional metadata; used as a data attribute for future syntax highlighting."
- type: code
language: rust
code: |
fn main() {
let site = Site::build("./my-site")?;
println!("wrote {} pages", site.pages.len());
}
- type: code
language: yaml
code: |
- type: code
language: rust
code: |
fn main() {
let site = Site::build("./my-site")?;
println!("wrote {} pages", site.pages.len());
}
# ── callout ────────────────────────────────
- type: section
eyebrow: callout
heading: Contextual message box
components:
- type: markdown
body: "Four variants — `info` (default), `success`, `warn`, `danger`. Title is optional. Body is markdown."
- type: callout
variant: info
title: Heads up
body: Neutral information with a teal accent bar.
- type: callout
variant: success
title: Deployed
body: Version **1.2** is live in production.
- type: callout
variant: warn
title: Attention
body: Renewal window opens in 30 days.
- type: callout
variant: danger
title: Action required
body: Credentials leaked — rotate immediately.
- type: code
language: yaml
code: |
- type: callout
variant: warn
title: Attention
body: Renewal window opens in 30 days.
# ── image ──────────────────────────────────
- type: section
eyebrow: image
heading: Images with caption
components:
- type: markdown
body: |
Figure with optional caption and `max_width` constraint. `alt` is required for
accessibility. Any non-`.yaml` file in the source directory — `.svg`, `.png`,
`.jpg`, etc. — is copied verbatim into the output directory, so just reference
it by relative path. Use `align: center | right` to place the image inside
its flow (defaults to left).
- type: image
src: ../assets/demo-dashboard.svg
alt: Sample kazam dashboard showing three customer cards
caption: A live SVG rendered through the image component.
max_width: 600
- type: code
language: yaml
code: |
- type: image
src: /screenshots/dashboard.png
alt: Dashboard screenshot
caption: The customer portfolio dashboard.
max_width: 600
align: center
# ── blockquote ─────────────────────────────
- type: section
eyebrow: blockquote
heading: Testimonial / pulled quote
components:
- type: markdown
body: "Standalone styled quote with optional attribution. Different from a quote inside a markdown block — this one is decorative, for testimonials or pulled quotes."
- type: blockquote
body: The best product we've shipped in years. Our team went from monitoring 12 accounts to 47 in under a month.
attribution: Sarah M., VP Engineering at Acme
- type: code
language: yaml
code: |
- type: blockquote
body: The best product we've shipped in years.
attribution: Sarah M., VP Engineering at Acme
- type: callout
variant: info
title: Next up
body: Grid components arrange your content — card grids, stat grids, before/after cards, definition lists.
links:
- label: Grids
href: grids.html
variant: primary
- label: All components
href: index.html
variant: secondary