Document cover
Document cover — title, subtitle, tag, and an optional logo.
title: New document
subtitle: One-line description.
tag: DRAFTEvery block type in @avodado/core, with its starter template rendered right here by the real pipeline — the same parse → validate → render path avo build uses.
Showing 77 of 77
Document cover — title, subtitle, tag, and an optional logo.
title: New document
subtitle: One-line description.
tag: DRAFTA single aside — note, tip, warning, or danger.
Structured prose (headings, paragraphs, lists, quotes) as data.
Term → definition rows.
An image with a caption in a bordered card (optional pixel width cap).
src: https://example.com/architecture.png
alt: The deployment topology
caption: "The production topology: CDN, gateway, and two service tiers."
width: 560Q&A accordions — native details/summary, no JavaScript.
A full-width section break — kicker, display title, optional subtitle on an accent-washed band; a clean interstitial slide in decks.
One hero metric at presentation scale — a display-size value with an optional delta + trend arrow, a one-line claim, and a context line.
The 2-6 things to remember — numbered rows at presentation scale, each a bold one-liner with an optional detail; a deck’s closing slide.
Genuinely tabular data; cells can carry a tone.
KPI cards with a delta and an up / down / flat trend.
One or more syntax-highlighted code snippets; `kind: diff` renders a unified diff, `kind: terminal` a shell session.
also: diff, terminal
Service-level objectives — SLI, target vs current, and an error-budget burn bar.
C4 model — context / container / component.
A class diagram — attributes, methods, UML relationships.
A top-down component tree (root / layout / page / hook / store).
Kubernetes-style namespaces holding services, with replicas.
Generic boxes-and-arrows architecture (grid or layered bands); `preset: infra | event | ddd | network` picks the domain styling.
also: infra, event, ddd, network
Frontend module graph — components, hooks, interfaces, strategies; `variant: be` renders the backend flavour (controller / service / repository).
also: belogic
A target-architecture capability map — tinted domain areas packed with small status-coded capability tiles (current / target / new / gap / deprecated).
Messages between actors over time (lifelines + returns).
A decision flowchart with branches and error exits; `variant: dag` renders a pipeline DAG.
also: dag
A state machine — states + event transitions.
Data-flow — processes, external entities, and datastores.
A cross-functional process, one horizontal lane per role.
A numbered how-to / runbook stepper — title, body, command, note per step.
A closed loop of stages arranged in a circle — build–measure–learn, PDCA, an incident loop; step descriptions become a numbered legend.
Entities, columns, keys, and crow’s-foot relationships.
An indented file / folder hierarchy; `variant: issue` renders a MECE issue tree.
also: mece
A layered pyramid, widening top → bottom.
A user journey across stages, with an emotion curve.
A schedule — task bars across date columns.
A generic node-link graph with colour-cycled groups.
A 2×2 matrix (e.g. effort vs impact) with plotted items.
A data chart — bar / line / area / donut / radar / waterfall / funnel, pure SVG, series coloured by accent.
also: waterfall, funnel
A numeric grid with an intensity ramp — rows × columns of tiles tinted by value.
One agile story — role / want / soThat + acceptance criteria + links.
Phases in order with status dots (done / current / next / future).
Flexible named columns of cards (Now / Next / Later).
Two columns weighed against each other — pros vs cons.
Current → target, before / after panels.
A meeting agenda — time, duration, owner, topic per row.
A fancy bullet list — accent / check / icon / number marker styles.
A collapsible backlog of user stories (accordions) in one section.
A design-pattern card — intent · forces · participants · consequences.
A responsive grid of cards — code snippets or notes (e.g. a bug gallery or comparison).
Release history on a vertical rail — version pills, dates, and typed change chips.
A risk register — severity derived from likelihood × impact, with mitigation, owner, and status.
Task table with an update column, user-defined colored status pills, and optional subtasks per row; `variant: tracker` renders the classic task-tracker list.
also: tracker
A role × resource capability grid; cells tint by permission level.
The labelled parts of a delimited string (app:feature:action).
Effective access as intersected gates (A ∩ B ∩ C = result).
A grid of factor cards — the forces that shaped a design.
Approaches explored — pros / cons / verdict; the chosen one highlighted.
A labelled spec sheet — label → value rows (a value can be a step-flow).
Back-of-envelope capacity math — assumptions, derivation rows, a highlighted bottom line.
A classic SWOT 2×2 — strengths, weaknesses, opportunities, threats as tinted quadrant cards.
Objectives and key results — one card per objective, a status-coloured progress bar per KR.
User persona cards — avatar, role, quote, goals, frustrations, and tools.
Compact people cards — initials avatar, name, role, and focus area.
A weighted decision matrix — criteria rows × option columns, totals footer, winner highlighted.
Low-fi UI mockups inside device frames (desktop / browser / phone).
Color-token swatches on a card grid — hex value, name, and usage per color.
A live type specimen — one row per style, the sample rendered at its real size, weight, and font.
Do / don’t guideline cards — a green DO and a red DON’T column, with optional mono examples.
A component / feature status board — compact rows with a color-coded stable / beta / experimental / deprecated / planned chip.
Array cells for algorithm walkthroughs — tones, pointer labels below cells, and a dashed index-window highlight.
A pointer-chain diagram (singly or doubly) — boxed nodes, next/prev arrows, node markers, and a ∅ terminator.
A binary tree — nodes placed by parent + side, tinted to show search paths, traversals, and heap shapes.
Hash buckets with chained entries — collision chains read left → right as key/value pills; tones highlight probes.
The canonical LLM agent loop — environment → agent (model chip) → tools, with memory and a stop condition.
An agent execution transcript — user / assistant / tool / system turns, with thinking and tool args → result.
Prompt anatomy — stacked role segments (system / user / assistant / tool) with highlighted {{variable}} chips and a legend.
A context-window token budget — one stacked bar sized against the window, with free space and over-budget overflow.