Accordion Use Case Schedule This demo passes many kinds of content into various grids before passing those into the accordion-item props. Demo

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation Watch video

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation Watch video

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.

Get the presentation Watch video
Twig
{% set trigger %}
  {% set headline_1 %}
    {% include '@bolt-elements-type/type.twig' with {
      content: '12:00 PM',
    } only %}
  {% endset %}

  {% set headline_2 %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Lunch & Networking',
      size: 'xlarge',
    } only %}
  {% endset %}

  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '12 3@small',
        content: headline_1,
      },
      {
        column_start: '1 4@small',
        column_span: '12 9@small',
        content: headline_2,
      },
    ]
  } only %}
{% endset %}

{% set content %}
  {% set link_1 %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Get the presentation',
      icon_before: icon_presentation,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}

  {% set link_2 %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Watch video',
      icon_before: icon_video,
      attributes: {
        href: 'https://google.com',
      }
    } only %}
  {% endset %}

  {% set content_item %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at. Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
    } only %}
    {% include '@bolt-elements-type/type.twig' with {
      content: 'Neque minima nisi optio cumque esse ullam rerum reiciendis itaque iste, quod sunt explicabo, est eum quo aliquid hic commodi laboriosam at.',
      weight: 'bold',
    } only %}
    {% include '@bolt-components-list/list.twig' with {
      display: 'inline',
      spacing: 'small',
      items: [
        link_1,
        link_2,
      ]
    } only %}
  {% endset %}
  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1 4@small',
        column_span: '12 9@small',
        content: content_item,
      },
    ]
  } only %}
{% endset %}

{% set items %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: trigger,
    content: content,
  } only %}
  ...
{% endset %}

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