Stad Brugge

Design system 1.0

Example

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Markup: lib/components/styleguide/organisms/accordion.html
<div class="app-body">
  <section class="container accordion pt-medium pb-medium">
    <div class="row">
      <div class="col-12">
        <h2 class="pb-medium">Accordion title</h2>
        <div class="accordion__wrapper js-accordion">
          <div class="accordion__item js-accordion-item">
            <div class="row">
              <div class="col-12">
                <button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
                  <div class="accordion__item__heading__wrapper">
                    <i class="fa-light fa-circle-info"></i>
                    <h3 class="accordion__item__heading__text">accordion demo title</h3>
                  </div>
                  <i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
                </button>
              </div>
            </div>
            <div class="accordion__item__content">
              <section class="section paragraph--text">
                <div class="container">
                  <div class="row">
                    <div class="col-12">
                      <div class="wysiwyg paragraph--text__content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div class="accordion__item js-accordion-item">
            <div class="row">
              <div class="col-12">
                <button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
                  <div class="accordion__item__heading__wrapper">
                    <i class="fa-light fa-circle-info"></i>
                    <h3 class="accordion__item__heading__text">accordion demo title</h3>
                  </div>
                  <i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
                </button>
              </div>
            </div>
            <div class="accordion__item__content">
              <section class="section paragraph--text">
                <div class="container">
                  <div class="row">
                    <div class="col-12">
                      <div class="wysiwyg paragraph--text__content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div class="accordion__item js-accordion-item">
            <div class="row">
              <div class="col-12">
                <button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
                  <div class="accordion__item__heading__wrapper">
                    <i class="fa-light fa-circle-info"></i>
                    <h3 class="accordion__item__heading__text">accordion demo title</h3>
                  </div>
                  <i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
                </button>
              </div>
            </div>
            <div class="accordion__item__content">
              <section class="section paragraph--text">
                <div class="container">
                  <div class="row">
                    <div class="col-12">
                      <div class="wysiwyg paragraph--text__content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div class="accordion__item js-accordion-item">
            <div class="row">
              <div class="col-12">
                <button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
                  <div class="accordion__item__heading__wrapper">
                    <h3 class="accordion__item__heading__text">accordion demo title</h3>
                  </div>
                  <i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
                </button>
              </div>
            </div>
            <div class="accordion__item__content">
              <section class="section paragraph--text">
                <div class="container">
                  <div class="row">
                    <div class="col-12">
                      <div class="wysiwyg paragraph--text__content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div class="accordion__item js-accordion-item">
            <div class="row">
              <div class="col-12">
                <button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
                  <div class="accordion__item__heading__wrapper">
                    <i class="fa-light fa-circle-info"></i>
                    <h3 class="accordion__item__heading__text">accordion demo title</h3>
                  </div>
                  <i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
                </button>
              </div>
            </div>
            <div class="accordion__item__content">
              <section class="section paragraph--text">
                <div class="container">
                  <div class="row">
                    <div class="col-12">
                      <div class="wysiwyg paragraph--text__content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
Source: ../client/lib/components/accordion/_accordion.scss, line 1