+++
categories = ['howto', 'reference']
description = 'Show content in a single tab'
title = 'Tab'
+++

You can use a `tab` shortcode to display a single tab with a title.

{{% multishortcode name="tab" print="false" format="%s\n\n%s\n" %}}
- title: "c"
  content: |
    ```python
    printf("Hello World!");
    ```
- title: "Ramblings"
  color: "blue"
  content: "Just some **text**."
{{% /multishortcode %}}

## Usage

{{% multishortcode name="tab" execute="false" format="%s\n\n%s\n" %}}
- title: "c"
  content: |
    ```c
    printf("Hello World!");
    ```
- title: "Ramblings"
  color: "blue"
  content: "Just some **text**."
{{% /multishortcode %}}

If you want multiple tabs grouped together you can wrap your tabs into the [`tabs` shortcode](shortcodes/tabs).

If you want further options when using a single code tab, you can also use the [`highlight` shortcode](shortcodes/highlight).

### Parameters

| Name                  | Default         | Notes       |
|-----------------------|-----------------|-------------|
| **style**             | see notes       | The style scheme used for the tab. If you don't set a style and you display a single code block inside of the tab, its default styling will adapt to that of a `code` block. Otherwise `default` is used.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`, `link`, `action`, `inline`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
| **color**             | see notes       | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
| **title**             | see notes       | Arbitrary title for the tab. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| **icon**              | see notes       | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _&lt;empty&gt;_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary text to be displayed in the tab. |

## Examples

### Single Code Block with Collapsed Margins

{{% multishortcode name="tab" %}}
- title: "Code"
  content: |
    ```python
    printf("Hello World!");
    ```
{{% /multishortcode %}}

### Mixed Markdown Content

{{% multishortcode name="tab" %}}
- title: "_**Mixed**_"
  content: |
    A tab cannot only contain code but arbitrary text. In this case text **and** code will get a margin.
    ```python
    printf("Hello World!");
    ```
{{% /multishortcode %}}

### Understanding `style` and `color` Behavior

The `style` parameter affects how the `color` parameter is applied.

{{% multishortcode name="tabs" %}}
content:
  - title: "just colored style"
    style: "blue"
    content: |
      The `style` parameter is set to a color style.

      This will set the background to a lighter version of the chosen style color as configured in your theme variant.
  - title: "just color"
    color: "blue"
    content: |
      Only the `color` parameter is set.

      This will set the background to a lighter version of the chosen CSS color value.
  - title: "default style and color"
    style: "default"
    color: "blue"
    content: |
      The `style` parameter affects how the `color` parameter is applied.

      The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
  - title: "just severity style"
    style: "info"
    content: |
      The `style` parameter is set to a severity style.

      This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
  - title: "severity style and color"
    style: "info"
    color: "blue"
    content: |
      The `style` parameter affects how the `color` parameter is applied.

      This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
{{% /multishortcode %}}