Accordion

The Accordion component provides a reusable pattern for accordion in the interface.

Accordion

The accordion can be used to display larger lists of content on one page.

Heading

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Heading

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<div class="c-accordion c-accordion c-accordion--bordered" style="--c-accordion--heading-count: 1;" id="id_6a44f17a8a160" data-uid="6a44f17a8a16d" data-component="accordion">
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a8a1fb" data-uid="6a44f17a8a20c" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a8a4ea" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8a2e6" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a8a535" data-component="element">
      Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac
      cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a8a580" data-uid="6a44f17a8a58e" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a8a67f" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8a5dd" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a8a6c1" data-component="element">
      Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit
      sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare
      vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
      nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
</div>

@accordion([
    'list' => [
        [
            'heading' => ["Heading"],
            'content' => "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ],
        [
            'heading' => ["Heading"],
            'content' => "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
            Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ]
    ]
])
@endaccordion

Using column headings

First column with content Second column with content

Heading 1 Heading 2

<div class="c-accordion c-accordion c-accordion c-accordion--bordered" style="--c-accordion--heading-count: 2;" id="id_6a44f17a8aa95" data-uid="6a44f17a8aaa0" data-component="accordion">
  <div class="c-element c-accordion__heading" data-uid="6a44f17a8b3e1" data-component="element">
    <span class="c-element c-accordion__heading-item" data-uid="6a44f17a8b347" data-component="element">First column with content</span> <span class="c-element c-accordion__heading-item" data-uid=
    "6a44f17a8b39d" data-component="element">Second column with content</span>
  </div>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 2;" id="id_6a44f17a8b432" data-uid="6a44f17a8b440" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a8b59d" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8b4b2" data-component="typography">Heading 1</span> 
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8b4fd" data-component="typography">Heading 2</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a8b5e2" data-component="element">
      Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac
      cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 2;" id="id_6a44f17a8b624" data-uid="6a44f17a8b62f" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a8b762" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8b67a" data-component="typography">Heading 1</span> 
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8b6c1" data-component="typography">Heading 2</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a8b7b9" data-component="element">
      Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit
      sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare
      vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
      nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
</div>

@accordion([
    'classList' => ['c-accordion'],
    'heading' => ['First column with content', 'Second column with content'],
    'list' => [
        [
            'heading' => ["Heading 1", "Heading 2"],
            'content' => "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ],
        [
            'heading' => ["Heading 1", "Heading 2"],
            'content' => "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
            Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ]
    ]
])
@endaccordion

Using dividers between items

Heading

<div class="c-accordion c-accordion c-accordion c-accordion--divided" style="--c-accordion--heading-count: 1;" id="id_6a44f17a8bb6b" data-uid="6a44f17a8bb76" data-component="accordion">
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a8bbca" data-uid="6a44f17a8bbd6" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a8bd33" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8bc71" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a8bd78" data-component="element">
      Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac
      cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a8bdbd" data-uid="6a44f17a8bdc9" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a8beb2" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a8be15" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a8bef3" data-component="element">
      Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit
      sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare
      vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
      nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
</div>

@accordion([
    'classList' => ['c-accordion'],
    'divider' => true,
    'list' => [
        [
            'heading' => ["Heading"],
            'content' => "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ],
        [
            'heading' => ["Heading"],
            'content' => "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
            Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ]
    ]
])
@endaccordion

Using spacing between items

Heading

<div class="c-accordion c-accordion c-accordion c-accordion--spaced c-accordion--bordered" style="--c-accordion--heading-count: 1;" id="id_6a44f17a9bbe4" data-uid="6a44f17a9bbf5" data-component=
"accordion">
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9bc6e" data-uid="6a44f17a9bc7c" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9bda9" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9bcdb" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9be04" data-component="element">
      Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac
      cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9be4f" data-uid="6a44f17a9be5b" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9bf55" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9beac" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9bf9a" data-component="element">
      Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit
      sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare
      vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
      nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
</div>


@accordion([
    'classList' => ['c-accordion'],
    'spacing' => true,
    'list' => [
        [
            'heading' => ["Heading"],
            'content' => "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ],
        [
            'heading' => ["Heading"],
            'content' => "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
            Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ]
    ]
])
@endaccordion

Using no border between items

Heading

<div class="c-accordion c-accordion c-accordion" style="--c-accordion--heading-count: 1;" id="id_6a44f17a9e368" data-uid="6a44f17a9e373" data-component="accordion">
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9e3ca" data-uid="6a44f17a9e3d6" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9e4db" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9e428" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9e522" data-component="element">
      Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac
      cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9e565" data-uid="6a44f17a9e570" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9e657" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9e5bb" data-component="typography">Heading</span> 
      <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9e699" data-component="element">
      Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit
      sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.
      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare
      vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
      nibh, ut fermentum massa justo sit amet risus.
    </div>
  </details>
</div>


@accordion([
    'classList' => ['c-accordion'],
    'border' => false,
    'list' => [
        [
            'heading' => ["Heading"],
            'content' => "Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ],
        [
            'heading' => ["Heading"],
            'content' => "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui.
            Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
        ]
    ]
])
@endaccordion

Larger content in the accordion item

Lorem ipsum dolor sit amet

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quid est documentum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Exempla:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor
Incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam

Quid est documentum publicum?

Lorem ipsum dolor sit amet si:

Consectetur adipiscing elit, et
Sed do eiusmod tempor incididunt

Documenta publica sine mora registranda sunt.

Quid significant vocabula conservatum, receptum et constitutum?

Conservatum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Receptum: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Constitutum: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Quid est documentum secretum?

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Documenta quae informationes secretas continent semper registranda sunt.

Lorem ipsum dolor sit amet

Lorem Ipsum

Quid est documentum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Exempla:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor
Incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam

Quid est documentum publicum?

Lorem ipsum dolor sit amet si:

Consectetur adipiscing elit, et
Sed do eiusmod tempor incididunt

Documenta publica sine mora registranda sunt.

Quid significant vocabula conservatum, receptum et constitutum?

Conservatum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Receptum: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Constitutum: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Quid est documentum secretum?

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Documenta quae informationes secretas continent semper registranda sunt.

Lorem ipsum dolor sit amet

Lorem Ipsum

Quid est documentum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Exempla:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor
Incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam

Quid est documentum publicum?

Lorem ipsum dolor sit amet si:

Consectetur adipiscing elit, et
Sed do eiusmod tempor incididunt

Documenta publica sine mora registranda sunt.

Quid significant vocabula conservatum, receptum et constitutum?

Conservatum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Receptum: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Constitutum: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Quid est documentum secretum?

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Documenta quae informationes secretas continent semper registranda sunt.

<div class="c-accordion c-accordion c-accordion--bordered" style="--c-accordion--heading-count: 1;" id="id_6a44f17a9eec9" data-uid="6a44f17a9eed1" data-component="accordion">
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9ea27" data-uid="6a44f17a9ea37" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9eb41" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9ea92" data-component="typography">Lorem ipsum dolor sit
      amet</span> <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9eb86" data-component="element">
      <h2>
        Lorem Ipsum
      </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <h3>
        Quid est documentum?
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
      </p>
      <p>
        Exempla:
      </p>
      <ul>
        <li>Lorem ipsum dolor sit amet
        </li>
        <li>Consectetur adipiscing elit
        </li>
        <li>Sed do eiusmod tempor
        </li>
        <li>Incididunt ut labore et dolore magna aliqua
        </li>
        <li>Ut enim ad minim veniam
        </li>
      </ul>
      <h3>
        Quid est documentum publicum?
      </h3>
      <p>
        Lorem ipsum dolor sit amet si:
      </p>
      <ul>
        <li>Consectetur adipiscing elit, et
        </li>
        <li>Sed do eiusmod tempor incididunt
        </li>
      </ul>
      <p>
        Documenta publica sine mora registranda sunt.
      </p>
      <h3>
        Quid significant vocabula conservatum, receptum et constitutum?
      </h3>
      <ul>
        <li>
          <strong>Conservatum:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li>
          <strong>Receptum:</strong> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>
        <li>
          <strong>Constitutum:</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </li>
      </ul>
      <h3>
        Quid est documentum secretum?
      </h3>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Documenta quae informationes secretas continent semper registranda sunt.
      </p>
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9ebc9" data-uid="6a44f17a9ebd4" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9ecca" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9ec20" data-component="typography">Lorem ipsum dolor sit
      amet</span> <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9ed0e" data-component="element">
      <h2>
        Lorem Ipsum
      </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <h3>
        Quid est documentum?
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
      </p>
      <p>
        Exempla:
      </p>
      <ul>
        <li>Lorem ipsum dolor sit amet
        </li>
        <li>Consectetur adipiscing elit
        </li>
        <li>Sed do eiusmod tempor
        </li>
        <li>Incididunt ut labore et dolore magna aliqua
        </li>
        <li>Ut enim ad minim veniam
        </li>
      </ul>
      <h3>
        Quid est documentum publicum?
      </h3>
      <p>
        Lorem ipsum dolor sit amet si:
      </p>
      <ul>
        <li>Consectetur adipiscing elit, et
        </li>
        <li>Sed do eiusmod tempor incididunt
        </li>
      </ul>
      <p>
        Documenta publica sine mora registranda sunt.
      </p>
      <h3>
        Quid significant vocabula conservatum, receptum et constitutum?
      </h3>
      <ul>
        <li>
          <strong>Conservatum:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li>
          <strong>Receptum:</strong> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>
        <li>
          <strong>Constitutum:</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </li>
      </ul>
      <h3>
        Quid est documentum secretum?
      </h3>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Documenta quae informationes secretas continent semper registranda sunt.
      </p>
    </div>
  </details>
  <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9ed4e" data-uid="6a44f17a9ed5a" data-component="accordion__item">
    <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9ee41" data-component="element">
      <!-- typography.blade.php   original: span -->
       <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9eda4" data-component="typography">Lorem ipsum dolor sit
      amet</span> <!-- icon.blade.php -->
    </summary>
    <div class="c-element c-accordion__item__content" data-uid="6a44f17a9ee80" data-component="element">
      <h2>
        Lorem Ipsum
      </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <h3>
        Quid est documentum?
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
      </p>
      <p>
        Exempla:
      </p>
      <ul>
        <li>Lorem ipsum dolor sit amet
        </li>
        <li>Consectetur adipiscing elit
        </li>
        <li>Sed do eiusmod tempor
        </li>
        <li>Incididunt ut labore et dolore magna aliqua
        </li>
        <li>Ut enim ad minim veniam
        </li>
      </ul>
      <h3>
        Quid est documentum publicum?
      </h3>
      <p>
        Lorem ipsum dolor sit amet si:
      </p>
      <ul>
        <li>Consectetur adipiscing elit, et
        </li>
        <li>Sed do eiusmod tempor incididunt
        </li>
      </ul>
      <p>
        Documenta publica sine mora registranda sunt.
      </p>
      <h3>
        Quid significant vocabula conservatum, receptum et constitutum?
      </h3>
      <ul>
        <li>
          <strong>Conservatum:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li>
          <strong>Receptum:</strong> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </li>
        <li>
          <strong>Constitutum:</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </li>
      </ul>
      <h3>
        Quid est documentum secretum?
      </h3>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </p>
      <p>
        Documenta quae informationes secretas continent semper registranda sunt.
      </p>
    </div>
  </details>
</div>

@accordion([])
    @for ($i = 0; $i < 3; $i++)
        @accordion__item([
            'heading' => 'Lorem ipsum dolor sit amet',
        ])
            <h2>Lorem Ipsum</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>

            <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <h3>Quid est documentum?</h3>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
            </p>

            <p>Exempla:</p>

            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipiscing elit</li>
                <li>Sed do eiusmod tempor</li>
                <li>Incididunt ut labore et dolore magna aliqua</li>
                <li>Ut enim ad minim veniam</li>
            </ul>

            <h3>Quid est documentum publicum?</h3>

            <p>Lorem ipsum dolor sit amet si:</p>

            <ul>
                <li>Consectetur adipiscing elit, et</li>
                <li>Sed do eiusmod tempor incididunt</li>
            </ul>

            <p>
                Documenta publica sine mora registranda sunt.
            </p>

            <h3>Quid significant vocabula conservatum, receptum et constitutum?</h3>

            <ul>
                <li>
                    <strong>Conservatum:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </li>
                <li>
                    <strong>Receptum:</strong> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </li>
                <li>
                    <strong>Constitutum:</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
                </li>
            </ul>

            <h3>Quid est documentum secretum?</h3>

            <p>
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>

            <p>
                Documenta quae informationes secretas continent semper registranda sunt.
            </p>
        @endaccordion__item
    @endfor
@endaccordion

Accordion wrapped with a card component

Lorem ipsum dolor sit amet

Lorem Ipsum

Lorem ipsum dolor sit amet

Lorem Ipsum

Lorem ipsum dolor sit amet

Lorem Ipsum

<div class="c-card c-card--ratio-16-9" data-uid="6a44f17a9fb8d" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-uid="6a44f17a9f374" data-component="card__header">
      <!-- typography.blade.php   original: h4 -->
      <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17a9f2d5" data-component="typography">
        Accordion in a card
      </h2>
    </div>
    <div class="c-accordion c-accordion c-accordion--bordered" style="--c-accordion--heading-count: 1;" id="id_6a44f17a9f9d3" data-uid="6a44f17a9f9db" data-component="accordion">
      <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9f44b" data-uid="6a44f17a9f458" data-component="accordion__item">
        <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9f559" data-component="element">
          <!-- typography.blade.php   original: span -->
           <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9f4b4" data-component="typography">Lorem ipsum dolor
          sit amet</span> <!-- icon.blade.php -->
        </summary>
        <div class="c-element c-accordion__item__content" data-uid="6a44f17a9f59b" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17a9f3c3" data-component="typography">
            Lorem Ipsum
          </h2><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f17a9f40c" data-component="typography">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </details>
      <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9f661" data-uid="6a44f17a9f66d" data-component="accordion__item">
        <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9f752" data-component="element">
          <!-- typography.blade.php   original: span -->
           <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9f6b5" data-component="typography">Lorem ipsum dolor
          sit amet</span> <!-- icon.blade.php -->
        </summary>
        <div class="c-element c-accordion__item__content" data-uid="6a44f17a9f795" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17a9f5e4" data-component="typography">
            Lorem Ipsum
          </h2><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f17a9f626" data-component="typography">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </details>
      <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17a9f85d" data-uid="6a44f17a9f868" data-component="accordion__item">
        <summary class="c-element c-accordion__item__heading" data-uid="6a44f17a9f950" data-component="element">
          <!-- typography.blade.php   original: span -->
           <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17a9f8b4" data-component="typography">Lorem ipsum dolor
          sit amet</span> <!-- icon.blade.php -->
        </summary>
        <div class="c-element c-accordion__item__content" data-uid="6a44f17a9f98f" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17a9f7d9" data-component="typography">
            Lorem Ipsum
          </h2><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f17a9f81a" data-component="typography">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </details>
    </div>
    <div class="c-card__footer" data-uid="6a44f17a9faf2" data-component="card__footer">
      <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__full-width" type="button" data-uid="6a44f17a9fa72" data-component="button"><span class=
      "c-button__label">Read more</span></button>
    </div>
  </div>
</div>

@card([])
    @card__header()
        @typography([
            'element' => "h4"
        ])
            Accordion in a card
        @endtypography
    @endcard__header

    @accordion([])
        @for ($i = 0; $i < 3; $i++)
            @accordion__item([
                'heading' => 'Lorem ipsum dolor sit amet',
            ])
                @typography(['element' => 'h2'])
                    Lorem Ipsum
                @endtypography

                @typography(['element' => 'p'])
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                @endtypography
            @endaccordion__item
        @endfor
    @endaccordion

    @card__footer()
        @button([
            'variant' => 'primary',
            'fullWidth' => true
        ])
            Read more
        @endbutton
    @endcard__footer
@endcard

Accordion wrapped with a paper component

Lorem ipsum dolor sit amet

Lorem Ipsum

Lorem ipsum dolor sit amet

Lorem Ipsum

Lorem ipsum dolor sit amet

Lorem Ipsum

<div class="c-paper c-paper--padding-0" data-uid="6a44f17aa061b" data-component="paper">
  <div class="c-paper__content">
    <div class="c-accordion c-accordion c-accordion--bordered" style="--c-accordion--heading-count: 1;" id="id_6a44f17aa0597" data-uid="6a44f17aa059e" data-component="accordion">
      <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17aa0046" data-uid="6a44f17aa0054" data-component="accordion__item">
        <summary class="c-element c-accordion__item__heading" data-uid="6a44f17aa0149" data-component="element">
          <!-- typography.blade.php   original: span -->
           <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17aa00a4" data-component="typography">Lorem ipsum dolor
          sit amet</span> <!-- icon.blade.php -->
        </summary>
        <div class="c-element c-accordion__item__content" data-uid="6a44f17aa018c" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17a9ff96" data-component="typography">
            Lorem Ipsum
          </h2><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f17a9ffea" data-component="typography">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </details>
      <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17aa0250" data-uid="6a44f17aa025c" data-component="accordion__item">
        <summary class="c-element c-accordion__item__heading" data-uid="6a44f17aa0341" data-component="element">
          <!-- typography.blade.php   original: span -->
           <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17aa02af" data-component="typography">Lorem ipsum dolor
          sit amet</span> <!-- icon.blade.php -->
        </summary>
        <div class="c-element c-accordion__item__content" data-uid="6a44f17aa037e" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17aa01d3" data-component="typography">
            Lorem Ipsum
          </h2><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f17aa0215" data-component="typography">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </details>
      <details class="c-accordion__item c-accordion__item" style="--c-accordion__item--heading-count: 1;" id="id_6a44f17aa043c" data-uid="6a44f17aa0447" data-component="accordion__item">
        <summary class="c-element c-accordion__item__heading" data-uid="6a44f17aa051c" data-component="element">
          <!-- typography.blade.php   original: span -->
           <span class="c-typography c-accordion__item__heading-item c-typography__variant--h4" role="heading" aria-level="3" data-uid="6a44f17aa048b" data-component="typography">Lorem ipsum dolor
          sit amet</span> <!-- icon.blade.php -->
        </summary>
        <div class="c-element c-accordion__item__content" data-uid="6a44f17aa0557" data-component="element">
          <!-- typography.blade.php   original: h2 -->
          <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f17aa03be" data-component="typography">
            Lorem Ipsum
          </h2><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f17aa03fb" data-component="typography">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </details>
    </div>
  </div>
</div>

@paper(['padding' => 0])
    @accordion([])
        @for ($i = 0; $i < 3; $i++)
            @accordion__item([
                'heading' => 'Lorem ipsum dolor sit amet',
            ])
                @typography(['element' => 'h2'])
                    Lorem Ipsum
                @endtypography

                @typography(['element' => 'p'])
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                @endtypography

            @endaccordion__item
        @endfor
    @endaccordion
@endpaper

API

Parameter	Default	Description
id		ID for the accordion
heading		The heading for the accordion
list	[]	List of accordion section
spacing	false	Sections are spaced instead of glued together
border	true	Whether the accordion should have a border or not
divider	false	Whether the accordion should have a divider between sections or not, can not be used together with border

Subcomponents

Child components for accordion, including purpose and supported Blade parameters.

Accordion Item

Blade directive: @accordion__item()

ID for the accordion

Parameter	Default	Type	Purpose
id		string	ID for the accordion
heading		string\|array	The heading
content		string	The content of the accordion item
classList	[]	array	Additional CSS classes added to the wrapping element.
attributeList	[]	array	Additional HTML attributes added to the wrapping element.

CSS API

Variable	Default	Type	Values	Description
--c-accordion--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-accordion--border-width	var(--border-width)	range	-	Size
--c-accordion--border-radius	var(--border-radius)	range	-	Border Radius
--c-accordion--color--surface	var(--color--surface)	color	-	Surface
--c-accordion--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-accordion--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-accordion--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-accordion--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-accordion--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-accordion--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-accordion--font-size-90	var(--font-size-90)	range	-	One step below base in the type scale.
--c-accordion--font-size-200	var(--font-size-200)	range	-	One step above base in the type scale. Equivalent to h6/subtitle.
--c-accordion--base	var(--base)	range	-	Main unit that drives radius and spacing scales.

Similar components

Option Anchormenu Collection