Component presentation

Cards, disclosures, tabs, and compact procedures across OINK’s four visual presets.

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.

Available in OINK 1.4.0

The optional variants on this page ship in OINK 1.4.0.

Start a site

Install the theme and preview a first page locally.
Configure your site

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:

InstallationStart here

Build a local preview before changing the site configuration.

Reference material

Read the configuration guide or the writing guide. A card without a title link remains ordinary content.

Notes and disclosures

Keep a local preview

Review the page at a narrow width as well as on your desktop.

Check the destination

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

macOS / Homebrew

brew install hugo

Debian / Ubuntu

sudo apt install hugo

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.

hugo server --bind 127.0.0.1 --port 1313

hugo --environment production --baseURL https://example.com/documentation/ --destination public

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

title , Typestring: A concise title that may wrap naturally.
description , Typestring: Supporting information, separate from the main label.

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.