Accordion Use Case Vertical Separator There's a possibility to have two labels in the accordion item. We can achieve that by using the list element with a separator prop.
Important Notes: Visit the List Element page to see how to use the separator prop. It's not recommended to use more than two accordion labels in a single accordion item.
Demo
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Lorem ipsum dolor sit amet..
Twig
Twig
{% set list_items %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: 'Heading very long accordion first label',
    } only %}
    {% include '@bolt-elements-list/list-item.twig' with {
      content: 'Heading second label',
    } only %}
  {% endset %}
  {% set double_label %}
    {% include '@bolt-elements-list/list.twig' with {
      separator: 'solid',
      content: list_items,
      display: 'horizontal',
      nowrap: true,
      tag: 'span'
    } only %}
  {% endset %}

  {% set accordion_items %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
    {% include '@bolt-components-accordion/accordion-item.twig' with {
      trigger: double_label,
      content: 'Lorem ipsum dolor sit amet..',
    } only %}
  {% endset %}

  {% include '@bolt-components-accordion/accordion.twig' with {
    content: accordion_items,
  } only %}
HTML
Not available in plain HTML. Please use Twig.