Style Guide

Reference page for every visual element caravan supports — headings, text formatting, tables, code blocks, the color_scheme presets, and the sidebar/search components you won't run into on a normal content page.

Headings

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

Text formatting

A paragraph with bold, italic, ~~strikethrough~~, and inline code. Links look like this one, and here's a footnote-style reference¹ alongside a chemical formula H₂O.

A blockquote — set off with a left border and muted text color.

Lists

Unordered item one
Unordered item two
- Nested item
Unordered item three

Ordered item one
Ordered item two
Ordered item three

Code

Inline: const x = 1;

function greet(name) {
  return `Hello, ${name}!`;
}

Table

Name	Type	Default
color_scheme	select	blue
show_search	toggle	true
footer_text	text	""

Color schemes

Each color_scheme option pairs a light and dark accent + sidebar tint. These are the actual values from utils/color-schemes.ts, not a mockup.

Cobalt

Slate

Emerald

Indigo

Amber

Crimson

Terracotta

Teal

Sidebar navigation states

The three link states rendered by the sidebar (see .book-menu-list in the stylesheet):

Section expansion — `nav_expand`

Sections with children render one of two ways, set by the nav_expand config option. Both auto-expand around whichever page is currently active — the difference is whether a chevron lets visitors toggle a section manually too.

auto (default) — no chevron, no manual toggle

click — adds a chevron, visitor can also toggle it

Section listing

What a section page's child listing looks like (see templates/section.tsx):

Child page one
Optional description shown from the child page's frontmatter.
Child page two

Search

The sidebar's live search dropdown (see .book-search-results):