30-tabs-content.twig

{% set image_content %}
  {% include "@bolt-components-image/image.twig" with {
    src: "/images/placeholders/tout-4x3-climber.jpg",
    alt: "A Rock Climber",
  } only %}
{% endset %}

{% set table_content %}
  {% include "@bolt-components-table/table.twig" with {
    headers: {
      top: {
        cells: [
          "Column 1",
          "Column 2",
          "Column 3",
        ]
      },
      side: {
        cells: [
          "Row 1",
          "Row 2",
          "Row 3",
          "Footer",
        ]
      }
    },
    rows: [
      {
        cells: [
          "R1C1",
          "R1C2",
          "R1C3",
        ]
      },
      {
        cells: [
          "R2C1",
          "R2C2",
          "R2C3",
        ]
      },
      {
        cells: [
          "R3C1",
          "R3C2",
          "R3C3",
        ]
      }
    ],
    footer: {
      cells: [
        "FC1",
        "FC2",
        "FC3",
      ]
    }
  } only %}
{% endset %}

{% set teaser_content %}
  {% include "@bolt-components-teaser/teaser.twig" with {
    content: "Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    headlines: [
      {
        text: "This is a headline."
      }
    ],
    eyebrow: {
      text: "Eyebrow"
    },
    buttons: [
      {
        pattern: "button",
        style: "primary",
        text: "CTA 1"
      },
      {
        pattern: "button",
        style: "secondary",
        text: "CTA 2"
      }
    ]
  } only %}
{% endset %}

{% set accordion_content %}
  {% include "@bolt-components-accordion/accordion.twig" with {
    items: [
      {
        trigger: "Accordion item 1",
        content: "This is the accordion content.",
      },
      {
        trigger: "Accordion item 2",
        content: "This is the accordion content.",
      },
      {
        trigger: "Accordion item 3",
        content: "This is the accordion content.",
      }
    ]
  } only %}
{% endset %}

{% set placeholder_content %}
  {% include "@bolt-components-placeholder/placeholder.twig" with {
      text: "Tab panel",
      size: "large",
    } only %}
{% endset %}

{% set slide_1 %}
  {% include "@bolt-components-placeholder/placeholder.twig" with {
    text: "Slide 1",
    size: "xlarge",
  } only %}
{% endset %}
{% set slide_2 %}
  {% include "@bolt-components-placeholder/placeholder.twig" with {
    text: "Slide 2",
    size: "xlarge",
  } only %}
{% endset %}
{% set slide_3 %}
  {% include "@bolt-components-placeholder/placeholder.twig" with {
    text: "Slide 3",
    size: "xlarge",
  } only %}
{% endset %}
{% set slide_4 %}
  {% include "@bolt-components-placeholder/placeholder.twig" with {
    text: "Slide 4",
    size: "xlarge",
  } only %}
{% endset %}
{% set slide_5 %}
  {% include "@bolt-components-placeholder/placeholder.twig" with {
    text: "Slide 5",
    size: "xlarge",
  } only %}
{% endset %}

{% set carousel_content %}
  {% include "@bolt-components-carousel/carousel.twig" with {
    slides_per_view: 2,
    slides: [
      slide_1,
      slide_2,
      slide_3,
      slide_4,
      slide_5,
    ]
  } only %}
{% endset %}

{% set video_content %}
  {% include "@bolt/video.twig" with {
    "videoId": "3861325118001",
    "accountId": "1900410236",
    "playerId": "r1CAdLzTW",
    "showMeta": true,
    "showMetaTitle": true
  } only %}
{% endset %}

<div class="u-bolt-margin-bottom-small">
  {% grid "o-bolt-grid--flex o-bolt-grid--middle o-bolt-grid--center" %}
    {% cell "u-bolt-width-12/12 u-bolt-width-9/12@small" %}
      {% include "@bolt-components-tabs/tabs.twig" with {
        panels: [
          {
            label: "An image",
            content: image_content
          },
          {
            label: "A table",
            content: table_content
          },
          {
            label: "A teaser",
            content: teaser_content
          },
          {
            label: "A video",
            content: video_content,
          },
          {
            label: "An accordion",
            content: accordion_content,
          },
          {
            label: "A carousel",
            content: carousel_content,
          },
        ]
      } only %}
    {% endcell %}
  {% endgrid %}
</div>

<div class="u-bolt-margin-bottom-small">
  {% grid "o-bolt-grid--flex o-bolt-grid--middle o-bolt-grid--center" %}
    {% cell "u-bolt-width-12/12 u-bolt-width-9/12@small" %}
      {% include "@bolt-components-tabs/tabs.twig" with {
        panels: [
          {
            label: "Tab label 1",
            content: placeholder_content
          },
          {
            label: "Tab label 2",
            content: placeholder_content
          },
          {
            label: "A very long tab label",
            content: placeholder_content
          },
          {
            label: "Tab label 4",
            content: placeholder_content
          },
          {
            label: "Tab label 5",
            content: placeholder_content
          },
          {
            label: "Tab label 6",
            content: placeholder_content
          },
        ]
      } only %}
    {% endcell %}
  {% endgrid %}
</div>