1. Docs
2. Writing

Tabs and callouts

Two shortcodes for writing: the same thing in several variants, and a note or warning beside the text.

Tabs#

Use tabs for the same content in variants: package managers, operating systems, languages.

{{< tabs group="install" >}}
{{< tab "npm" >}}
    ```sh
    npm install my-lib
    ```
{{< /tab >}}
{{< tab "pnpm" >}}
    ```sh
    pnpm add my-lib
    ```
{{< /tab >}}
{{< /tabs >}}

(Without the indentation: it’s only there to show the code fences inside.)

npm install my-lib

pnpm add my-lib

yarn add my-lib

A tab holds any Markdown. Arrow keys move between the tabs.

Tab groups#

With group, every tab set of the same group switches together: pick “pnpm” once, and every install command on every page shows pnpm. The choice is kept in the reader’s browser. This tab set is in the group install, like the one on Installation, whose tabs are named differently and so keep their own choice.

npm update my-lib

pnpm update my-lib

yarn upgrade my-lib

Callouts#

A note or a warning beside the text, in Markdown:

{{< callout >}}
The default. A note with **Markdown** in it.
{{< /callout >}}

{{< callout "warning" >}}
Something that can go wrong.
{{< /callout >}}

Use them sparingly: a page full of callouts has none that stand out.