Component presentation
Use the Appearance menu to compare Paper, Slate, Ink, and Terminal in light or dark mode. These examples use the same content and preserve the normal Markdown authoring model.
The optional variants on this page ship in OINK 1.4.0.
Related pages
-
Install the theme and preview a first page locally.
-
Set navigation, languages, appearance, and search.
For a compact resource directory, use {.cards .td-cards-list}. A divided list has one enclosing frame and grows naturally with its descriptions.
- Writing content — Organize articles, guides, and release notes; see also the configuration guide.
- Component reference with a longer title — Choose native Markdown or a compound shortcode.
The full form accepts cards variant="list" for icons, badges, or block descriptions:
Build a local preview before changing the site configuration.
Read the configuration guide or the writing guide. A card without a title link remains ordinary content.
Notes and disclosures
Review the page at a narrow width as well as on your desktop.
Confirm the destination before publishing a new version.
How does this work without JavaScript?
The disclosure is a native HTML details element. It remains usable with scripts disabled.
The title, chevron, and focus outline share one stable summary row.
Longer titles can wrap without displacing the chevron or reducing the interactive area
Each disclosure opens independently. Other content stays in its current state.
Tabs and commands
A marked one-line fence uses {class="td-code-command"}. Its copy button occupies its own column so the command can scroll or wrap without being obscured.
wrap, copy, and accessible labels keep their existing meaning. Multiline, numbered, or collapsed input warns and falls back to an ordinary code block. Single-line fences without this modifier keep their usual presentation.
Short procedures
Add {.steps .td-steps-compact} to a short ordered list. The regular .steps layout remains available for longer tutorials.
- Review the configuration.
- Run the local preview.
- Check the generated output.
For a procedure with headings, use steps variant="compact" with percent delimiters:
Preview
Run the development server and open the changed page.
Review
Check the page in the language and appearance your readers use.
Tables and metadata
| View | Purpose | Input |
|---|---|---|
| Cards | Related resources | Link list |
| Steps | Ordered procedure | Ordered list |
| Tabs | Equivalent alternatives | Adjacent blocks |
Preview Validated Review needed
Open search with Ctrl with K and move between results with the arrow keys.
Compatibility
These variants load no additional runtime. Existing links, keyboard behavior, copy text, print content, and Markdown output retain their meaning. Unsupported cards or steps variants warn and use the regular presentation. The visual refinement does not change the default preset or font policy.