Paige
Powerful, pliable pixel perfection

Tabs

Demonstration of the tabs shortcodes.

The paige/tabs shortcode displays content in tabs.

Basic

Code:

{{< paige/tabs >}}
{{< paige/tabs/buttons >}}
{{< paige/tabs/button >}}JSON{{< /paige/tabs/button >}}
{{< paige/tabs/button >}}TOML{{< /paige/tabs/button >}}
{{< paige/tabs/button >}}YAML{{< /paige/tabs/button >}}
{{< /paige/tabs/buttons >}}
{{< paige/tabs/panes >}}
{{< paige/tabs/pane >}}
{{< paige/code lang="json" >}}
{"foo": 123}
{{< /paige/code >}}
{{< /paige/tabs/pane >}}
{{< paige/tabs/pane >}}
{{< paige/code lang="toml" >}}
foo = 123
{{< /paige/code >}}
{{< /paige/tabs/pane >}}
{{< paige/tabs/pane >}}
{{< paige/code lang="yaml" >}}
foo: 123
{{< /paige/code >}}
{{< /paige/tabs/pane >}}
{{< /paige/tabs/panes >}}
{{< /paige/tabs >}}

Result:

{"foo": 123}
foo = 123
foo: 123

Figure

Code:

{{< paige/figure caption="Tabs" >}}
{{< paige/tabs >}}
{{< paige/tabs/buttons >}}
{{< paige/tabs/button >}}JSON{{< /paige/tabs/button >}}
{{< paige/tabs/button >}}TOML{{< /paige/tabs/button >}}
{{< paige/tabs/button >}}YAML{{< /paige/tabs/button >}}
{{< /paige/tabs/buttons >}}
{{< paige/tabs/panes >}}
{{< paige/tabs/pane >}}
{{< paige/code lang="json" >}}
{"foo": 123}
{{< /paige/code >}}
{{< /paige/tabs/pane >}}
{{< paige/tabs/pane >}}
{{< paige/code lang="toml" >}}
foo = 123
{{< /paige/code >}}
{{< /paige/tabs/pane >}}
{{< paige/tabs/pane >}}
{{< paige/code lang="yaml" >}}
foo: 123
{{< /paige/code >}}
{{< /paige/tabs/pane >}}
{{< /paige/tabs/panes >}}
{{< /paige/tabs >}}
{{< /paige/figure >}}

Result:

{"foo": 123}
foo = 123
foo: 123
Tabs