Docs

Panels

Use the panels content block to display multiple toggable panels.
Overview Tabs Pills Underline Buttons Callout Arguments Background Type Elements Type Heading Type

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.

Preheading

Heading
Panels content. It supports multiple lines.
Content of the first panel.
Hero image
Content of the second panel.
Hero image
Content of the third panel.
Hero image
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.

Preheading

Heading
Panels content. It supports multiple lines.
Content of the first panel.
Hero image
Content of the second panel.
Hero image
Content of the third panel.
Hero image
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.

Preheading

Heading
Panels content. It supports multiple lines.
Content of the first panel.
Hero image
Content of the second panel.
Hero image
Content of the third panel.
Hero image
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.

Preheading

Heading
Panels content. It supports multiple lines.
Content of the first panel.
Hero image
Content of the second panel.
Hero image
Content of the third panel.
Hero image
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.

Preheading

Heading
Panels content. It supports multiple lines.
Content of the first panel.
Hero image
Content of the second panel.
Hero image
Content of the third panel.
Hero image
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 Comment
_bookshop_name string Alias for _bookshop_name.
Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string Background style of the section.
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.
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.
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”).
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.
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.
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.
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.
Heading of the content block, including a preheading and content element.
id string Unique identifier of the current element.
Unique identifier of the current element.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
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].
Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
padding int 3 Padding of the content.
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].
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.
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.
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].
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].
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.
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.
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.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Apply subtle theme colors.

Elements Type  

Name Type Required Default Comment
content string, template.HTML Section content displayed below the title.
Section content displayed below the title.
icon string, uint64 Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string Image to include in the content block or section heading.
Image to include in the content block or section heading.
link string, template.URL, url Local page reference or external hyperlink address.
Local page reference or external hyperlink address.
mode bool Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
Section content displayed below the title.
preheading string Preheading of the section heading.
Preheading of the section heading.
size int 4 Display size of the headline.
Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int Column width of the element. For embedded elements, the width is relative to the parent’s container.
Column width of the element. For embedded elements, the width is relative to the parent’s container.
• docs: add v2.7.0 examples for buttons nav, spinner label, timeline start layout (c311446)
On this page
Follow Me

I work on everything coding and tweet developer memes