# Panels

Use the panels content block to display multiple toggable panels.

## Overview

The `panels` content block displays multiple panels that are toggled by a tab control.

### Tabs

Set `tab-type` to `tabs` to adjust the panel controls.

```yml
- _bookshop_name: panels
  heading:
    preheading: Preheading
    title: Heading
    content: Panels content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  width: 12
  tab_type: tabs
  ratio: 1x1
  elements:
    - title: First Panel
      image: /img/placeholder.png
      content: Content of the first panel.
    - title: Second Panel
      image: /img/placeholder.png
      content: Content of the second panel.
    - title: Third Panel
      image: /img/placeholder.png
      content: Content of the third panel.
```

### Pills

Set `tab-type` to `pills` to adjust the panel controls.

```yml
- _bookshop_name: panels
  heading:
    preheading: Preheading
    title: Heading
    content: Panels content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  width: 12
  tab_type: pills
  ratio: 1x1
  elements:
    - title: First Panel
      image: /img/placeholder.png
      content: Content of the first panel.
    - title: Second Panel
      image: /img/placeholder.png
      content: Content of the second panel.
    - title: Third Panel
      image: /img/placeholder.png
      content: Content of the third panel.
```

### Underline

Set `tab-type` to `underline` to adjust the panel controls.

```yml
- _bookshop_name: panels
  heading:
    preheading: Preheading
    title: Heading
    content: Panels content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  width: 12
  tab_type: underline
  ratio: 1x1
  elements:
    - title: First Panel
      image: /img/placeholder.png
      content: Content of the first panel.
    - title: Second Panel
      image: /img/placeholder.png
      content: Content of the second panel.
    - title: Third Panel
      image: /img/placeholder.png
      content: Content of the third panel.
```

### Buttons

Added in v2.7.0

Set `tab-type` to `buttons` to render a compact button group instead of a standard nav. The element titles are used as button labels.

```yml
- _bookshop_name: panels
  heading:
    preheading: Preheading
    title: Heading
    content: Panels content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  width: 12
  tab_type: buttons
  ratio: 1x1
  elements:
    - title: First Panel
      image: /img/placeholder.png
      content: Content of the first panel.
    - title: Second Panel
      image: /img/placeholder.png
      content: Content of the second panel.
    - title: Third Panel
      image: /img/placeholder.png
      content: Content of the third panel.
```

### Callout

Set `tab-type` to `callout` to adjust the panel controls.

```yml
- _bookshop_name: panels
  heading:
    preheading: Preheading
    title: Heading
    content: Panels content. It supports multiple lines.
    align: start
  background:
    color: body-tertiary
    subtle: false
  width: 12
  tab_type: callout
  ratio: 1x1
  elements:
    - title: First Panel
      image: /img/placeholder.png
      content: Content of the first panel.
    - title: Second Panel
      image: /img/placeholder.png
      content: Content of the second panel.
    - title: Third Panel
      image: /img/placeholder.png
      content: Content of the third panel.
```

## Arguments

The content block supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `background` | background |  |  | Background style of the section. |
| `bg-class` | string |  |  | Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element. |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `content-style` | string |  |  | Style of the section content. Defaults to the global site setting style.title.contentStyle in params.toml (typically "lead text-muted"). |
| `cover` | bool |  |  | Flag indicating if the element should be rendered fullscreen. |
| `elements` | elements | yes |  | Elements to include in the card group. Each element is rendered as a card. |
| `fluid` | bool |  | `true` | Flag to set the section container to fluid design, else the section is limited to `xxl`. |
| `heading` | heading |  |  | Heading of the content block, including a preheading and content element. |
| `justify` | select |  | `start` | Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`]. |
| `overlay-mode` | select |  |  | Overlay mode of the element, overrides the site's general configuration. Supported values: [`light`, `dark`, `none`]. |
| `padding` | int |  | `3` | Padding of the content. |
| `ratio` | select |  |  | Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [`1x1`, `3x1`, `3x2`, `4x3`, `16x9`, `21x9`, `auto`]. |
| `responsive` | bool |  | `true` | Flag indicating if the element should be responsive. |
| `section-class` | string |  |  | Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element. |
| `tab-type` | select |  |  | Type of the tab group. Supported values: [`tabs`, `pills`, `underline`, `callout`, `buttons`]. |
| `theme` | select |  |  | Color theme to apply to the element. Supported values: [`light`, `dark`]. |
| `width` | int |  | `8` | Column width of the element. For embedded elements, the width is relative to the parent's container. |
| `wrapper` | string |  |  | Class attribute of the element's wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the `fa-wrapper` and `fa-fluid` attributes by default. |