SitePagination

Pagination

Sequential prev/next links for ordered reading flows — tutorials, ordered docs, recipes. Where breadcrumb shows hierarchy and nav shows the broader index, pagination covers the "next page" affordance for a reader moving through pages in order.

Basic usage

Place {% pagination auto=true /%} in a _layout.md and every page in the cascade gets prev / next links derived from the active sidebar nav order. No per-page authoring needed.

{% region name="pagination" %}
{% pagination auto=true /%}
{% /region %}

The first page in the sequence gets no prev link; the last gets no next link. The wrapping nav still renders so theme spacing stays consistent.

Explicit prev / next

When a page belongs to a sequence different from its directory siblings (a curated tutorial path, for instance), set prev and next explicitly:

{% pagination prev="install" next="configuration" /%}

Each value accepts either a slug (resolved through the registry) or an absolute URL. The link label defaults to the target page's title frontmatter — override per-side with prev-label and next-label if needed.

Ordering

In auto mode, sibling order is determined by, in priority:

  1. Explicit nav order. If a nav rune anywhere in the active layout cascade lists the current page among its items, that's the canonical reading order. Sidebar order automatically is the reading order — authors don't restate it.
  2. Frontmatter order field. Numeric, ascending. Pages without order sort to the end.
  3. Directory order. Alphabetical by URL slug. Numeric prefixes work (01-intro before 02-install).

The first source that produces a definite position wins.

scope

By default, auto-mode picks from the page's direct siblings — pages sharing the same parent URL. For tutorials that span nested subdirectories that should still be read in sequence, widen the candidate set with scope="section":

{% pagination auto=true scope="section" /%}

scope="section" includes every page under the current top-level section (any page whose URL starts with the section root).

Boundaries

There's no wrap-around. The first page in a sequence has no prev link; the last has no next link. The wrapping <nav> still renders in both cases so vertical spacing stays consistent.

When the current page is a section index (it has child pages), auto mode renders nothing — child cards or a sidebar do that job better than prev/next at the section root.

Attributes

AttributeTypeRequiredDescription
autobooleanDerive prev/next from sibling page order
prevstringExplicit previous page (slug or URL)
nextstringExplicit next page (slug or URL)
scope"siblings" | "section"Auto-mode scope: direct siblings, or all pages in the current top-level section
prev-labelstringOverride label for the previous link
next-labelstringOverride label for the next link

Universal attributes

bg

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

AttributeTypeRequiredDescription
bgstringBackground preset applied to this block
bg-fromstringGradient start colour — a semantic token name (→ var(--rf-color-*))
bg-gradient"to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl"Gradient direction (bounded named set)
bg-gradient-type"linear" | "radial" | "conic"Gradient type
bg-tostringGradient end colour — a semantic token name
bg-viastringOptional middle gradient stop — a semantic token name
scrim"top" | "bottom" | "left" | "right" | "none"Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
scrim-blur"none" | "sm" | "md" | "lg"Frost scrim blur amount
scrim-strength"sm" | "md" | "lg"Gradient scrim strength
scrim-tone"dark" | "light"Whether the scrim darkens (for light text) or lightens (for dark text)
scrim-type"gradient" | "frost"Scrim treatment: gradient (default) or frost (backdrop blur)
elevation

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
elevation"sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg"Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"Inner padding of this block
motion

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerbooleanCascade this block's items in as it reveals (no-op on single-child runes)
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"Vertical spacing above and below this block
substrate

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

AttributeTypeRequiredDescription
substrate"dots" | "grid" | "lines" | "cross" | "checker" | "none"Generated surface pattern
substrate-fill"inherit" | "inset"Surface fill the pattern sits on (full colour stays with tint)
substrate-opacity"sm" | "md" | "lg"Pattern ink strength
substrate-size"sm" | "md" | "lg"Pattern cell size
substrate-target"self" | "media"Which surface the pattern fills (overrides the rune/theme default)
tint

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

AttributeTypeRequiredDescription
tintstringColor tint preset applied to this block
tint-mode"auto" | "dark" | "light"Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"Maximum width constraint for this block
Not availableWhy
dropcap, readingthis rune declares no prose body
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header