Markup: templates/output/06-components/accordion.html
<!-- START ACCORDION-ITEM-->
<ul class="c-accordion o-list-bare" data-role="accordionlist">
<!-- START ACCORDION-ITEM-->
<li class="c-accordion__item">
<h3 class="c-accordion__title">
<button class="c-accordion__trigger" id="accordion-1" aria-controls="section-accordion-1" aria-expanded="false" type="button"><span class="c-accordion__trigger-title">Lorem ipsum dolor sit amet - 1<span class="c-accordion__trigger-introtext">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span></span>
<svg class="c-accordion__icon c-accordion__icon--plus" viewBox="0 0 38 38">
<path fill="none" d="M19 1v18m0 0v18m0-18h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
<svg class="c-accordion__icon c-accordion__icon--minus" viewBox="0 0 20 20">
<path fill="none" d="M19 19h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
</button>
</h3>
<div class="c-accordion__content" id="section-accordion-1" aria-labelledby="accordion-1" aria-label="Content for Lorem ipsum dolor sit amet - 1" role="region">
<div class="c-accordion__innercontent">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</a>
</div>
</div>
</li>
<!-- END ACCORDION-ITEM-->
<!-- START ACCORDION-ITEM-->
<li class="c-accordion__item">
<h3 class="c-accordion__title">
<button class="c-accordion__trigger" id="accordion-2" aria-controls="section-accordion-2" aria-expanded="false" type="button"><span class="c-accordion__trigger-title">Lorem ipsum dolor sit amet - 2<span class="c-accordion__trigger-introtext">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span></span>
<svg class="c-accordion__icon c-accordion__icon--plus" viewBox="0 0 38 38">
<path fill="none" d="M19 1v18m0 0v18m0-18h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
<svg class="c-accordion__icon c-accordion__icon--minus" viewBox="0 0 20 20">
<path fill="none" d="M19 19h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
</button>
</h3>
<div class="c-accordion__content" id="section-accordion-2" aria-labelledby="accordion-2" aria-label="Content for Lorem ipsum dolor sit amet - 2" role="region">
<div class="c-accordion__innercontent">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</a>
</div>
</div>
</li>
<!-- END ACCORDION-ITEM-->
<!-- START ACCORDION-ITEM-->
<li class="c-accordion__item">
<h3 class="c-accordion__title">
<button class="c-accordion__trigger" id="accordion-3" aria-controls="section-accordion-3" aria-expanded="false" type="button"><span class="c-accordion__trigger-title">Lorem ipsum dolor sit amet - 3<span class="c-accordion__trigger-introtext">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span></span>
<svg class="c-accordion__icon c-accordion__icon--plus" viewBox="0 0 38 38">
<path fill="none" d="M19 1v18m0 0v18m0-18h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
<svg class="c-accordion__icon c-accordion__icon--minus" viewBox="0 0 20 20">
<path fill="none" d="M19 19h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
</button>
</h3>
<div class="c-accordion__content" id="section-accordion-3" aria-labelledby="accordion-3" aria-label="Content for Lorem ipsum dolor sit amet - 3" role="region">
<div class="c-accordion__innercontent">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</a>
</div>
</div>
</li>
<!-- END ACCORDION-ITEM-->
<!-- START ACCORDION-ITEM-->
<li class="c-accordion__item">
<h3 class="c-accordion__title">
<button class="c-accordion__trigger" id="accordion-4" aria-controls="section-accordion-4" aria-expanded="false" type="button"><span class="c-accordion__trigger-title">Lorem ipsum dolor sit amet - 4<span class="c-accordion__trigger-introtext">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span></span>
<svg class="c-accordion__icon c-accordion__icon--plus" viewBox="0 0 38 38">
<path fill="none" d="M19 1v18m0 0v18m0-18h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
<svg class="c-accordion__icon c-accordion__icon--minus" viewBox="0 0 20 20">
<path fill="none" d="M19 19h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
</button>
</h3>
<div class="c-accordion__content" id="section-accordion-4" aria-labelledby="accordion-4" aria-label="Content for Lorem ipsum dolor sit amet - 4" role="region">
<div class="c-accordion__innercontent">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</a>
</div>
</div>
</li>
<!-- END ACCORDION-ITEM-->
<!-- START ACCORDION-ITEM-->
<li class="c-accordion__item">
<h3 class="c-accordion__title">
<button class="c-accordion__trigger" id="accordion-5" aria-controls="section-accordion-5" aria-expanded="false" type="button"><span class="c-accordion__trigger-title">Lorem ipsum dolor sit amet - 5<span class="c-accordion__trigger-introtext">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span></span>
<svg class="c-accordion__icon c-accordion__icon--plus" viewBox="0 0 38 38">
<path fill="none" d="M19 1v18m0 0v18m0-18h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
<svg class="c-accordion__icon c-accordion__icon--minus" viewBox="0 0 20 20">
<path fill="none" d="M19 19h18m-18 0H1" stroke="currentColor" stroke-width="2"></path>
</svg>
</button>
</h3>
<div class="c-accordion__content" id="section-accordion-5" aria-labelledby="accordion-5" aria-label="Content for Lorem ipsum dolor sit amet - 5" role="region">
<div class="c-accordion__innercontent">
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
<li>Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</a>
</div>
</div>
</li>
<!-- END ACCORDION-ITEM-->
</ul>
<!-- END ACCORDION-ITEM-->
Source:
assets/sass/06-components/_components.accordion.scss, line 1