UI components

Buttons

Links and buttons styled as buttons. The class names match just-the-docs so migrated content keeps working.

Default Purple Blue Green Red Yellow Outline

[Link](https://example.com){: .btn }
[Link](https://example.com){: .btn .btn-purple }
[Link](https://example.com){: .btn .btn-outline }

Sizes:

[Small](https://example.com){: .btn .btn-sm }
[Extra small](https://example.com){: .btn .btn-xs }

The theme’s own ghost variant remains available as .btn .btn--ghost.

Labels

Inline chips for tagging content. The default label plus color variants, again with just-the-docs names:

default blue green purple yellow red

`New in v14`{: .label .label-green }

Callouts

Four named callouts with just-the-docs class names. Apply the class to a paragraph or a blockquote; the title variant renders an uppercase header line.

A note: context that helps but is not required.

A tip: a shortcut or a recommended approach.

A warning: something that can break.

Important: required reading before you proceed.

{: .note }
A note: context that helps but is not required.

{: .warning }
A warning: something that can break.

Title variants:

{: .note-title }
Note
{: .note }
Body of the callout.

The original .callout class continues to work. Custom callout colors via the callouts: config key are planned; the four built-in classes cover the common cases today.

Code

Fenced code blocks get syntax highlighting when the site opts in (see Configuration, Syntax highlighting), a copy button, and horizontal scrolling. Inline code renders as atomic chips that never split across lines.

kubectl get pods -n kube-system

Line numbers are supported via kramdown:

kramdown:
  syntax_highlighter_opts:
    block:
      line_numbers: true

or per block with the linenos flag. Numbered lines are muted and unselectable.

Tables

Tables are wrapped in a scroll container automatically, so wide tables stay usable on phones. No class needed.

Lists

Task lists render with native checkboxes:

• shipped
• planned

Definition lists render with the term in fg and the definition in fg-dim.