Document
A compact document layout for finding one item among hundreds.
Components
45 components and layouts.
Layouts4 components
Report
A spacious report layout that puts the conclusion, evidence, and limits in view.
Publication
Reusable covers, navigation, section headings, and frames for live examples.
Composition
Keep a figure, its caption, and the notes that explain it in one reading order.
Lists & data5 components
Table
Align values in columns so a reader can compare items without remembering them.
Listing
Keep short and long entries in the same rhythm so the right item is easy to find.
Chip
A compact label that names a kind or state. Meaning and appearance are specified separately.
Card
Show where a route leads and what a reader can learn there.
Facts
A definition list for short answers about one thing: a version, scope, or source.
Figures & graphs9 components
Meter
Show proportions faithfully, including the part that remains unresolved.
Graph
Styles for generated SVG diagrams that show which things depend on which.
Bar chart
Rank categories by magnitude, with aligned names, exact values, and a shared zero baseline.
Comparison plot
Show a before-and-after difference on one axis, with both endpoints and denominators visible.
Line plot
Trace a measure across time or position while keeping gaps and observation boundaries explicit.
Histogram
Show how observations fall into numeric bins, including empty intervals and sample size.
Drawing
The marks a diagram is made of, and the size it is placed at, so a figure matches the page it is on.
Annotate
Number a part of a drawing and explain it underneath, so the sentence stays text and the picture stays a picture.
Flow graph
Make a decision, its branches, and their outcomes readable without relying on color.
Reading6 components
Research paper
Typeset an abstract, an argument, equations and references with the report reading scale.
Prose
Readable typography for paragraphs, headings, lists, and quotations.
Callout
A note in the reading flow for a prerequisite, caveat, or important qualification.
Quote
Keep a quotation and its source together, distinct from the surrounding argument.
Definitions
Define the terms used throughout a catalog so its labels have a shared meaning.
Sources
Point at a source from the text with a number, and list the sources where the reader can find them.
Code & changes5 components
Code
Present SQL, signatures, and source excerpts clearly, including gaps in what is known.
Symbol
Present declarations, parameters, return types, and members of an API.
Diff
Show additions, removals, and modifications through both color and explicit marks.
Terminal
Keep a command and its output together, with a prompt that stays out of copied text.
File tree
Show where files and directories live as a hierarchy, rather than a collection of paths.
Navigation10 components
Tree
Navigate namespaces and categories in an expandable hierarchy.
Control
Quiet, consistent controls for the few actions a document needs.
Facets
Combine kinds and states to filter a large listing without leaving the page.
Search
Jump to the right item without losing your place in the current document.
Sidebar
Keep the current location and the rest of the document within reach.
Topbar
Bring breadcrumbs, theme controls, and the mobile navigation toggle into one document header.
Tabs
Switch between different views of one subject. Without JavaScript, all content stays visible.
Disclosure
Keep secondary details available, with a clear indication of what is inside.
Pagination
Name the next destination before the reader needs to click it.
Keys
Match the available keys to what they do on this page.
Status & feedback6 components
Notice
Explain a limitation or condition that affects how the entire page should be read.
Banner
A page-wide notice for an archived version, comparison view, or other document state.
Empty
Distinguish no results, unmatched filters, and information that could not be determined.
Stat
A figure that answers a question, with a label and any qualification it needs.
Timeline
Show the order of events, their outcomes, and how far a run actually got.
Tooltip
A CSS hint for the longer explanation behind an abbreviation or short label.