Components

All components are registered globally by enhanceApp() and are available in any Markdown page or Vue template without explicit imports. Composables must be imported explicitly from their source paths.

TypeScript-typed props give inline documentation in VS Code (Volar extension) and JetBrains IDEs — hover a prop in a template to see its description.

`<ScavoldBreadcrumb>`

Renders a <nav class="breadcrumb"> element with a flat list of links from root to the current page. Uses the same <ul>/<li>/<a> structure as <ScavoldMenu> so both can share CSS rules.

A folder on the way that has no index.md is named as text, a <span> in place of the <a>: it is part of where the page sits, but there is no page to go to.

Props

Prop	Type	Default	Description
`include-current`	`boolean`	`true`	Include the current page as the final crumb.
`include-root`	`boolean`	`false`	Include the root node as the first crumb.

Rendered markup

html

<nav class="breadcrumb">
  <ul>
    <li class="active"><a href="/de/">Deutsch</a></li>
    <li class="active current"><a href="/de/leistungen/">Leistungen</a></li>
  </ul>
</nav>

Examples

html

<!-- typical usage -->
<ScavoldBreadcrumb />

<!-- without current page, when the page heading serves as the final crumb -->
<ScavoldBreadcrumb :include-current="false" />

<!-- full trail including home link -->
<ScavoldBreadcrumb include-root />

`<ScavoldCard>`

A unit of its own — an image, a heading and a few lines, say — set apart from the text around it. Cards side by side go into a grid:

markdown

:::: grid columns=3
::: card link=about/team.md
![Our team at the pond](/team.jpg)

### Who we are

Twelve people, one pond.
:::
::::

Arguments

Argument	Type	Description
`link`	`page-ref`	Page the card links to. Makes the whole card clickable; a reference to a page that does not exist leaves the card unlinked.

Rendered markup

html

<div class="scavold-card scavold-card--linked">
  …
  <a class="scavold-card__link" href="/about/team.html" aria-label="Read more: Team">Read more</a>
</div>

The link's text is the same on every card, translated; its accessible name adds the title of the page it leads to, so a list of links read out by a screen reader tells the cards apart. Its click area is stretched over the whole card, while links written into the card stay clickable on top.

Scavold styles only what keeps a card working: images stay within it, and the link covers it. Its frame, padding and where its image sits are the theme's, through scavold-card and scavold-card--linked.

`<ScavoldContainer>`

Fallback used for any container name that has no registered component. Renders as the matching HTML sectioning element if the name is one of the seven sectioning wrappers, otherwise as a <div>. Adds the container name to the element's class list.

:::group is a built-in mapped to it: content held together only to arrange it, with no meaning of its own, rendered as <div class="group">. It offers the same layout as a section. Use it where no sectioning element fits — HTML keeps <div> for exactly that.

`<ScavoldCover>`

Image or video across the full width of the window and at least as high as the window, cropped to fit. Written as a container block; its content is laid on top of the picture.

markdown

::: cover src=/wind-farm.jpg focus="center top" label="Wind turbines at dusk"
# With new energy into the future
:::

::: cover src=/turbines.mp4 poster=/turbines.jpg
:::

Arguments

Argument	Type	Description
`src`	`media-file`	Image or video, told apart by file type (`.mp4`, `.m4v`, `.webm`, `.ogv`, `.mov` play as video). Required.
`poster`	`media-file`	Video only: still image shown until it plays, and instead of it under reduced motion.
`focus`	`string`	Part of the picture kept visible when cropped, as a CSS `object-position`. Defaults to the centre.
`label`	`string`	Alternative text of an image, accessible label of a video. Left out, the picture is decoration.
`tone`	`light` \| `dark`	Whether the content on top is meant to be light (over a dark picture) or dark (over a bright one). Marks the cover with `scavold-cover--light` or `scavold-cover--dark`; the theme decides what that looks like.

An image is rendered with all its variants and a sizes value derived from its aspect ratio, so a phone held upright fetches a variant as wide as the image is drawn there. It loads at once rather than lazily.

A video plays muted in a loop, started by script unless the visitor asks for reduced motion, and always carries a button to pause it (WCAG 2.2.2). It plays only while at least half of it is on screen (half of the window, for one higher than the window), and a video the visitor paused stays paused.

Theme integration

The cover breaks out of its column with margin-inline: calc(50% - 50vw), which assumes a column centred in the window. The theme clips the scrollbar overflow of 100vw and sets the height when a fixed header takes part of the window:

css

html { overflow-x: clip; }
.scavold-cover { --scavold-cover-height: calc(100svh - var(--header-height)); }

Classes to style: .scavold-cover, .scavold-cover--video, .scavold-cover--light, .scavold-cover--dark, .scavold-cover__media, .scavold-cover__overlay, .scavold-cover__toggle.

Scavold sets no colour for either tone. The theme gives each the colours of its design, including headings and links its prose styles colour on their own:

css

.scavold-cover--light .scavold-cover__overlay { color: #fff; }
.scavold-cover--dark .scavold-cover__overlay { color: #000; }

A cover opening the page

A container whose fence is the first thing in a page carries an empty data-leading attribute, and the page data name it as leadingContainer ("cover", or null). Both are information only. A theme uses them to arrange its own parts around a cover at the top of a page, for instance to show its breadcrumb below the cover rather than above: the layout skips the breadcrumb when page.leadingContainer === "cover", and a site component mapped to cover (and registered in enhanceApp) renders <ScavoldCover> followed by the breadcrumb when it carries data-leading.

`<ScavoldDetails>`

Content collapsed under a title until the reader expands it. Written as a container block and rendered as a native <details> element, so keyboard operation, the expanded state for screen readers and revealing the content on find in page come with it.

markdown

::: details summary="Opening hours" group=faq
Monday to Friday, 9 am to 5 pm.
:::

Arguments

Argument	Type	Description
`summary`	`string`	Title, always visible; clicking it expands or collapses the content. Left out, a translated "Details" stands in.
`open`	flag	Starts expanded.
`group`	`string`	Blocks with the same group close each other, so only one is expanded at a time. Rendered as the `name` attribute of `<details>`.

Rendered markup

html

<details class="scavold-details" name="faq">
  <summary class="scavold-details__summary">Opening hours</summary>
  <div class="scavold-details__content">…</div>
</details>

Scavold adds no styles of its own; the browser's disclosure marker stays until a theme replaces it.

`<ScavoldGrid>`

Puts the blocks written inside it side by side, at most columns of them in a row; a full row continues in the next. Each block is one cell — a paragraph, an image, or an embedded container, which is how several blocks share a cell:

markdown

:::: grid columns=3
![Pond in spring](/pond.jpg)

![Meadow](/meadow.jpg)

::: section
### Opening hours
Monday to Friday.
:::
::::

The grid needs the longer fence when it contains a container; the cratly editor writes it that way by itself.

Arguments

Argument	Type	Description
`columns`	`2` \| `3` \| `4`	Most cells side by side. Defaults to `2`.

Rendered markup

html

<div class="scavold-grid scavold-grid--3" style="--scavold-grid-columns: 3">…</div>

A cell never gets narrower than --scavold-grid-min (default 14rem), so on a narrow screen the grid drops columns by itself, down to one, without breakpoints. Themes set that variable and --scavold-grid-gap (default 1.5rem), or replace the layout through the scavold-grid--<columns> class. Margins of the cells themselves — including the indent browsers give a <figure> — are removed; the gap spaces them.

Images in a grid take the sizes the theme declares for its column count, since only the theme knows how wide a cell is at which screen width. A column count it leaves out keeps the site's image_sizes for its images: sharp in every column, but on a wide screen a larger variant than a cell needs. An image with a sizes= override of its own keeps it, and images nested deeper — in a card in a cell — take the grid's value as well.

// .vitepress/theme/index.js — cells 22rem wide in a 72rem column, two columns from 48rem
await scavoldEnhanceApp( context, {
    gridImageSizes: {
        3: "(min-width: 72rem) 22rem, (min-width: 48rem) 50vw, 100vw",
    },
} );

`<ScavoldImage>`

Renders a <picture> element with full srcset and sizes support. Scavold inserts this component automatically in place of every local <img> processed during the build — you typically do not use it directly in templates.

Site-specific layout components that need to control the sizes value for a particular context should pass it explicitly:

vue

<ScavoldImage src="/photo.jpg" alt="A photo" sizes="(min-width: 60rem) 50vw, 100vw" />

Props

Prop	Type	Default	Description
`src`	`string`	—	URL of the largest fallback variant.
`srcset`	`string`	`""`	`srcset` of the variants in the original format (JPEG/PNG).
`webp-srcset`	`string`	`""`	`srcset` of the WebP variants.
`sizes`	`string`	`"100vw"`	CSS `sizes` descriptor of all sources. The Markdown renderer passes the site-level `image_sizes` or a per-image override.
`sizes-fallback`	`boolean`	`false`	Marks `sizes` as the site's default only, which a layout around the image may replace (see `provideImageSizes()`). Set by the Markdown renderer.
`alt`	`string`	`""`	Alt text. Empty string marks the image as decorative (`role="presentation"`).
`loading`	`string`	`"lazy"`	`loading` attribute of the `<img>`; `"eager"` for an image at the top of a page.
`fetchpriority`	`string`	—	`fetchpriority` attribute of the `<img>`, e.g. `"high"` for the largest image above the fold.

Captions

The title of a Markdown image is its caption. An image standing alone in its paragraph is rendered as a figure with the caption below it; amid text, where no figure fits, the caption is the image's tooltip. A sizes= override in the title is taken out first and never reaches the page:

markdown

![Pond with water lilies](/pond.jpg "The pond in spring")
![Pond with water lilies](/pond.jpg "sizes=100vw The pond in spring")

html

<figure class="scavold-figure">
  <picture>…</picture>
  <figcaption class="scavold-figure__caption">The pond in spring</figcaption>
</figure>

The alt text says what the image shows, for those who cannot see it; the caption adds to it for everyone. Scavold adds no styles to a figure, so the indent browsers give <figure> stays until a theme sets its own margins. A grid of captioned images is a gallery.

`<ScavoldLayout>`

Base layout wrapper that intercepts pages with locale-conditional redirect frontmatter and renders <ScavoldLocaleRedirect> in their place. All other pages render the default slot.

Wrap your site shell in this component to inherit redirect handling automatically:

vue

<template>
  <ScavoldLayout>
    <div class="site-shell">
      <!-- header, nav, main, footer … -->
    </div>
  </ScavoldLayout>
</template>

Themes that need finer control can compose the building blocks directly using useRedirect() and <ScavoldLocaleRedirect>:

vue

<script setup>
import { useRedirect } from "scavold/composables/useRedirect.js";
import ScavoldLocaleRedirect from "scavold/components/ScavoldLocaleRedirect.vue";

const { isLocaleRedirect } = useRedirect();
</script>

<template>
  <ScavoldLocaleRedirect v-if="isLocaleRedirect" />
  <div v-else class="site-shell">…</div>
</template>

`<ScavoldLocaleMenu>`

Renders a <nav class="locale-nav"> element listing links to the available translations of the current page. Nothing is rendered when the resolved link set is empty or (by default) when only a single locale is available.

Props

Prop	Type	Default	Description
`detection`	`"auto" \| "explicit" \| "inherited" \| "global"`	`"auto"`	How to discover available locales. See Detection modes.
`include-current`	`boolean`	`false`	Include the current locale as a non-navigating item.
`hide-if-single`	`boolean`	`true`	Render nothing when only one (or zero) locale links are available.
`label`	`string`	`"Language"`	`aria-label` for the `<nav>` landmark.

Detection modes

Mode	Description
`"auto"`	Tries `explicit`, then `inherited`, then `global`; uses the first mode that yields at least one link.
`"explicit"`	Only locales declared in the current page's own `translations` frontmatter.
`"inherited"`	For each locale, links to the translation declared by the nearest ancestor with a `translations` entry. Section-level declarations cover all child pages that have no direct counterpart.
`"global"`	Every locale present anywhere in the hierarchy. Links to the topmost page in that locale.

Rendered markup

html

<nav class="locale-nav" aria-label="Language">
  <ul>
    <li class="current" lang="de">
      <span aria-current="true">de</span>
    </li>
    <li lang="en">
      <a href="/en/" hreflang="en" aria-label="en">en</a>
    </li>
  </ul>
</nav>

Examples

html

<!-- show locales from current page or nearest ancestor with translations -->
<ScavoldLocaleMenu />

<!-- always show all known locales; link to their topmost page -->
<ScavoldLocaleMenu detection="global" />

<!-- show all locales including current, even when only one is listed -->
<ScavoldLocaleMenu detection="global" include-current :hide-if-single="false" />

`<ScavoldMenu>`

Renders a <nav> element containing a nested list of page links derived from the site's page hierarchy. Nothing is rendered when the resolved item set is empty.

The component has three independent addressing modes — path-based, absolute (from root), and relative (from current page) — that cover all common navigation patterns without requiring knowledge of the current page's depth.

With menu, it renders a named menu instead: the pages choosing that menu in their menus front matter, wherever they sit among the folders. The names are declared in .cratly.config.yaml; where a menu goes is up to the theme.

Props

Prop	Type	Default	Description
`menu`	`string`	—	Render the named menu declared under this name in `.cratly.config.yaml`: the pages choosing it in their `menus` front matter, in page-tree order. `from-path` and `from-root` then narrow the part of the site searched — `from-path="{lang}"` keeps a multilingual site's menu to one language — and `from` is ignored. `depth`, `active-only` and `expand` descend below each listed page. A page choosing the menu along with one of its ancestors is listed below that ancestor when `depth` allows sub-pages, and beside it when the menu is flat.
`from-path`	`string`	—	Select the parent node by path. Supports `{locale}` (full BCP 47 tag, e.g. `de-CH`) and `{lang}` (primary language subtag only, e.g. `de`) placeholders, replaced with the current page's locale at runtime. Takes priority over `from-root` and `from`. Examples: `"de/footer"`, `"{lang}/footer"`.
`from-root`	`number`	—	List items at this absolute depth from root. `1` = top-level pages, `2` = second level, etc. Ignored when `from-path` is set.
`from`	`number`	`0`	List items relative to the current page. `0` = siblings, `1` = children, `-1` = aunt/uncle level. Ignored when `from-root` or `from-path` is set.
`depth`	`number`	`0`	Additional levels to descend below the starting level. `0` = flat list, `1` = one level of children, `-1` = unlimited.
`active-only`	`boolean`	`false`	Only expand children along the branch leading to the current page.
`expand`	`boolean`	`false`	Expand children of all nodes regardless of active branch. `active-only` takes precedence.
`label`	`string`	—	`aria-label` for the `<nav>` landmark. Required when more than one `<ScavoldMenu>` appears on the same page.

Rendered markup

html

<nav aria-label="…">
  <ul>
    <li class="active">          <!-- .active: current page or an ancestor -->
      <a href="/section/">Section</a>
      <ul>
        <li class="active current">   <!-- .current: exactly the current page -->
          <a href="/section/page/" aria-current="page">Page</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

A folder without an index.md has no page to link to. Where the menu shows the pages below it, the folder is named as text — a <span> in place of the <a> — and groups them; where it does not, the folder is left out, as it would lead nowhere.

Label resolution

Menu item labels are resolved in this order:

label frontmatter — explicit navigation text
title frontmatter — page title
First # heading extracted at build time
Last path segment (e.g. about from de/about.md)

Hiding pages

Set hide: menu (or hide: true) in a page's frontmatter to exclude it from menus. The page is still served and still appears in the hierarchy tree. Hiding from menus rules over any choice in menus.

Choosing named menus

Without menu, the component lists only pages that leave menus out or choose auto among others. A page choosing named menus only appears in those.

Examples

html

<!-- top-level pages — typical site header nav -->
<ScavoldMenu :from-root="1" label="Main navigation" />

<!-- second level of active section only -->
<ScavoldMenu :from-root="2" active-only />

<!-- children of the current page -->
<ScavoldMenu :from="1" />

<!-- siblings of the current page -->
<ScavoldMenu />

<!-- full site hierarchy (sitemap) -->
<ScavoldMenu :from-root="1" :depth="-1" />

<!-- locale-aware footer nav — works with path structures de/, en/, etc. -->
<ScavoldMenu from-path="{lang}/footer" label="Footer navigation" />

<!-- named menu: the pages choosing "footer", wherever they sit, within the current language -->
<ScavoldMenu menu="footer" from-path="{lang}" label="Footer navigation" />

`<ScavoldPageList>`

Links a configurable number of the site's own pages — the latest posts of a blog, a teaser row of a section's sub-pages, a list of downloads. Rendered for the :::pagelist container block; anything written inside the block is rendered above the list.

Titles, dates, introductory texts and teaser images all come from the target pages, so authors maintain them where the content lives.

markdown

::: pagelist from=1 limit=5 sort=date teaser images dates heading-level=3 label="Recent posts"
## Recent posts
:::

Arguments

Argument	Type	Default	Description
`from`	`number`	`1`	Level relative to the current page: `1` = its sub-pages, `0` = its siblings.
`from-root`	`number`	—	Absolute level from the site root. Takes precedence over `from`.
`from-path`	`string`	—	Path of the page whose sub-pages are listed, with `{locale}` / `{lang}` support. Takes precedence over both other selectors.
`deep`	flag	—	Include every level below, flattened into one list.
`limit`	`number`	`5`, or `0` with `per-page`	Maximum number of entries; `0` lists all of them. A paginated list reaches every page it found unless a limit says otherwise.
`offset`	`number`	`0`	Entries to skip at the start.
`sort`	`"order" \| "date" \| "date-asc" \| "title"`	`"order"`	`order` follows the site structure, `date` is newest first.
`reverse`	flag	—	Reverse the selected order.
`teaser`	flag	—	Show each page's introductory text.
`images`	flag	—	Show each page's teaser image.
`dates`	flag	—	Show each page's date.
`date-style`	`"short" \| "medium" \| "long" \| "full" \| "iso"`	`"long"`	Style of the dates. The `Intl.DateTimeFormat` styles follow the page's language; `iso` writes `2020-10-20` in every language.
`time-style`	`"short" \| "medium" \| "long" \| "full" \| "iso"`	—	Style of the time of day. Left out, entries show their date only. `iso` writes `12:16`.
`timezone`	`string`	`"UTC"`	IANA name of the zone the dates are read in, e.g. `Europe/Berlin`.
`heading-level`	`number`	`0`	Heading level of the titles; `0` renders a plain list of links.
`image-sizes`	`string`	`"(min-width: 60rem) 30rem, 90vw"`	CSS `sizes` descriptor for the teaser images.
`label`	`string`	—	Accessible label (`aria-label`) for the list.
`per-page`	`number`	`0`	Entries per page; `0` shows all. Paging happens in the browser and adds a pager.
`param`	`string`	`"page"`	Query parameter the current page is remembered in, for pages carrying several paginated lists.

The data per entry is read from title, date, excerpt and image of the target page, with the page body as the fallback for the last two. A page opts out with hide: list.

Rendered markup

html

<div class="scavold-pagelist">
  <!-- slot content -->
  <ul class="scavold-pagelist__items" aria-label="Recent posts">
    <li class="scavold-pagelist__item">
      <a class="scavold-pagelist__link" href="/blog/newest">
        <picture class="scavold-pagelist__image">…</picture>
        <h3 class="scavold-pagelist__title">Newest post</h3>
        <time class="scavold-pagelist__date" datetime="2026-06-21T00:00:00.000Z">21 June 2026</time>
        <p class="scavold-pagelist__excerpt">Opening prose of the post…</p>
      </a>
    </li>
  </ul>
</div>

One link per entry, with the teaser image decorative inside it, so a screen reader announces each entry once. The component ships no CSS; the classes above are the theme's hooks.

per-page pages the list in the browser: only the current page's entries are rendered, the page shown is remembered as ?page=2 through history.replaceState, and the pager is a labelled <nav> with a status line and buttons. The pre-rendered HTML always holds page one, so a shared ?page=3 link shows it for an instant, and entries beyond page one are not in the HTML for a crawler to find — the sitemap and the feed are.

`<ScavoldVideo>`

Video player in the text column, with controls, sound and captions through <track> elements in the block. For a video across the whole window with content on top, use <ScavoldCover>.

Props

See videoProps from scavold/composables/useVideo.js for the full list. Common props:

Prop	Type	Description
`src`	`string`	Video source URL or path.
`poster`	`string`	Poster image path.
`autoplay`	`boolean`	Play the video muted while at least half of it is on screen — by script, and not for visitors who ask for reduced motion.
`loop`	`boolean`	Loop the video.

Every video has its playback controls, so it can always be paused.

Sectioning wrappers

Seven thin wrapper components map to their corresponding HTML sectioning elements. They exist primarily to serve as Markdown container targets so that :::section, :::aside, etc. produce the correct element with the container arguments wired as props.

Component	Element
`<ScavoldArticle>`	`<article>`
`<ScavoldAside>`	`<aside>`
`<ScavoldFooter>`	`<footer>`
`<ScavoldHeader>`	`<header>`
`<ScavoldMain>`	`<main>`
`<ScavoldNav>`	`<nav>`
`<ScavoldSection>`	`<section>`

Each accepts containerProps (see useContainer) and any additional props or slots specific to its element type.

Layout

section, article and aside, and the generic group, take a layout arranging their first block — an image, usually — and the content after it. Left out, the block stands above the content.

markdown

::: section layout=float-left
![The pond in spring](/pond.jpg)

Text flowing around the image, and on below it.
:::

`layout`	Arrangement
`float-left`, `float-right`	The content flows around the block and on below it.
`split-left`, `split-right`	Block and content side by side; the content does not run below the block.

The element carries the choice as data-layout, and scavold/styles/layouts.css, which enhanceApp brings along, implements it. A section narrower than 30rem stacks its block above the content again, whatever its layout. Themes set the block's width through --scavold-layout-width (default 40%) and the space beside and below it through --scavold-layout-gap (default 1.5rem), or replace the rules.

The cratly editor offers the choices as buttons with Scavold's own icons, drawn after Font Awesome's solid style. A site replaces one by keeping an icon of the same name — stacked, float-left, float-right, split-left, split-right — in its .cratly/icons/.

Composables

`useAutoplay()`

Autoplay as <ScavoldVideo> and <ScavoldCover> do it, for a site's own video component: muted, only while at least half of the video is on screen, never against the visitor and not under reduced motion.

import { useAutoplay } from "scavold/composables/useAutoplay.js";

const video = ref( null );
useAutoplay( video, () => autoplay.value );

`useCard()` / `cardProps`

Used inside a site's own card component.

import { useCard, cardProps } from "scavold/composables/useCard.js";

const props = defineProps( cardProps );
const { href, title } = useCard( props );

`useContainer()` / `containerProps`

Used inside custom container components to consume the arguments parsed from the opening ::: line. Container names and their argument declarations are configured in .cratly.config.yaml → containers.

import { useContainer, containerProps } from "scavold/composables/useContainer.js";

const props = defineProps( {
    ...containerProps,
    background: String,   // custom KV arg: background=/media/hero.jpg
} );

const { containerName, classes, dataAttrs } = useContainer( props );

useContainer return values:

Value	Type	Description
`containerName`	`string`	The container name (e.g. `"hero"`).
`classes`	`string[]`	Flag arguments as class names.
`dataAttrs`	`object`	Key–value arguments as `data-*` attributes.

containerProps:

Prop	Type	Description
`containerArgs`	`string`	Raw argument string from the `:::` opening line.

`useCover()` / `coverProps`

Used inside a site's own cover component.

import { useCover, coverProps } from "scavold/composables/useCover.js";

const props = defineProps( coverProps );
const { src, isVideo, srcset, webpSrcset, sizes, poster, focus, label, tone } = useCover( props );

`useDetails()` / `detailsProps`

Used inside a site's own details component.

import { useDetails, detailsProps } from "scavold/composables/useDetails.js";

const props = defineProps( detailsProps );
const { summary, open, group } = useDetails( props );

`useGrid()` / `gridProps`

Used inside a site's own grid component.

import { useGrid, gridProps } from "scavold/composables/useGrid.js";

const props = defineProps( gridProps );
const { columns } = useGrid( props );

`useHierarchy()`

import { useHierarchy } from "scavold/composables/hierarchy";

const { hierarchy, current } = useHierarchy();

Return value	Type	Description
`hierarchy`	`Ref<HierarchyNode>`	The full page tree root.
`current`	`Ref<HierarchyNode>`	The node for the page currently being viewed.

HierarchyNode properties:

Property	Type	Description
`path`	`string`	Path of the Markdown source file.
`isPage`	`boolean`	Whether this node represents an actual page.
`title`	`string?`	Display title (frontmatter or first heading).
`label`	`string?`	Navigation label (frontmatter `label`, falls back to `title`).
`url`	`string?`	Alias output path when `url` is declared in frontmatter.
`locale`	`string?`	Inherited locale (BCP 47) — see `locale`.
`excerpt`	`string?`	Introductory text — `excerpt` or the page's opening prose.
`image`	`string?`	Lead image reference — `image` or the first image in the page.
`imageData`	`object?`	Responsive variant data (`src`, `srcset`, `webpSrcset`) for `image`, resolved at build time.
`date`	`string?`	Publication date as an ISO 8601 timestamp — see `date`.
`frontmatter`	`object?`	Full frontmatter data for this page.
`parent`	`HierarchyNode?`	Parent node (non-enumerable, not serialised).
`subs`	`object?`	Child nodes keyed by path segment, sorted by `order`.

`useImageSizes()` / `provideImageSizes()`

Used inside a site's own layout component that knows how wide it draws its content.

import { provideImageSizes } from "scavold/composables/useImageSizes.js";

provideImageSizes( "(min-width: 64rem) 18rem, 100vw" );

Images inside that carry only the site's default take this value instead; one with a sizes= override keeps its own. <ScavoldGrid> provides one from gridImageSizes.

`usePageList()` / `pageListProps`

Used inside custom page-list components to turn the arguments of a :::pagelist block into ready-to-render entries — the same selection, ordering and formatting <ScavoldPageList> uses.

import { usePageList, pageListProps } from "scavold/composables/usePageList.js";

const props = defineProps( pageListProps );

const { items, headingTag, teaser, images, dates, imageSizes, ariaLabel, formatDate } =
    usePageList( props );

Return value	Type	Description
`items`	`Ref<PageListItem[]>`	Entries with `node`, `href`, `title`, `date`, `excerpt` and `image` resolved.
`headingTag`	`Ref<string \| null>`	Heading element for the titles, `null` for a plain list of links.
`teaser` / `images` / `dates`	`Ref<boolean>`	Whether the respective flag is set.
`imageSizes`	`Ref<string>`	CSS `sizes` descriptor for the teaser images.
`ariaLabel`	`Ref<string \| undefined>`	Accessible label for the list.
`formatDate`	`(iso: string) => string`	Formats a timestamp in the page's locale, in UTC.

`useRedirect()`

import { useRedirect } from "scavold/composables/useRedirect.js";

const { isLocaleRedirect, redirect } = useRedirect();

Return value	Type	Description
`isLocaleRedirect`	`Ref<boolean>`	`true` when the current page has a locale-conditional `redirect` in frontmatter.
`redirect`	`Ref<object \| string>`	The raw `redirect` frontmatter value.

`useVideo()` / `videoProps`

Used inside custom video container components.

import { useVideo, videoProps } from "scavold/composables/useVideo.js";

const props = defineProps( videoProps );
const { src, poster, autoplay, loop, muted, preload, ariaLabel } = useVideo( props );

Components ​

<ScavoldBreadcrumb> ​

Props ​

Rendered markup ​

Examples ​

<ScavoldCard> ​

Arguments ​

Rendered markup ​

<ScavoldContainer> ​

<ScavoldCover> ​

Arguments ​

Theme integration ​

A cover opening the page ​

<ScavoldDetails> ​

Arguments ​

Rendered markup ​

<ScavoldGrid> ​

Arguments ​

Rendered markup ​

<ScavoldImage> ​

Props ​

Captions ​

<ScavoldLayout> ​

<ScavoldLocaleMenu> ​

Props ​

Detection modes ​

Rendered markup ​

Examples ​

<ScavoldMenu> ​

Props ​

Rendered markup ​

Label resolution ​

Hiding pages ​

Choosing named menus ​

Examples ​

<ScavoldPageList> ​

Arguments ​

Rendered markup ​

<ScavoldVideo> ​

Props ​

Sectioning wrappers ​

Layout ​

Composables ​

useAutoplay() ​

useCard() / cardProps ​

useContainer() / containerProps ​

useCover() / coverProps ​

useDetails() / detailsProps ​

useGrid() / gridProps ​

useHierarchy() ​

useImageSizes() / provideImageSizes() ​

usePageList() / pageListProps ​

useRedirect() ​

useVideo() / videoProps ​

Components

`<ScavoldBreadcrumb>`

Props

Rendered markup

Examples

`<ScavoldCard>`

Arguments

Rendered markup

`<ScavoldContainer>`

`<ScavoldCover>`

Arguments

Theme integration

A cover opening the page

`<ScavoldDetails>`

Arguments

Rendered markup

`<ScavoldGrid>`

Arguments

Rendered markup

`<ScavoldImage>`

Props

Captions

`<ScavoldLayout>`

`<ScavoldLocaleMenu>`

Props

Detection modes

Rendered markup

Examples

`<ScavoldMenu>`

Props

Rendered markup

Label resolution

Hiding pages

Choosing named menus

Examples

`<ScavoldPageList>`

Arguments

Rendered markup

`<ScavoldVideo>`

Props

Sectioning wrappers

Layout

Composables

`useAutoplay()`

`useCard()` / `cardProps`

`useContainer()` / `containerProps`

`useCover()` / `coverProps`

`useDetails()` / `detailsProps`

`useGrid()` / `gridProps`

`useHierarchy()`

`useImageSizes()` / `provideImageSizes()`

`usePageList()` / `pageListProps`

`useRedirect()`

`useVideo()` / `videoProps`