Stad Brugge

Design system 1.0

Example
Markup: lib/components/styleguide/organisms/quotes.html
<div class="app-body">
  <div class="container">
    <section class="paragraph--quotes pb-medium pt-medium">
      <div class="row">
        <div class="col-12">
          <div class="quotes js-quotes js-slideshow glide--ltr glide--carousel glide--swipeable">
            <div data-glide-el="track" class="glide__track">
              <ul class="glide__slides">
                <li class="quote glide__slide">
                  <div class="row">
                    <div class="col-12">
                      <div class="row">
                        <div class="quote__wrapper quote__wrapper--single quote__wrapper--center">
                          <div class="">
                            <div class="quote__text quote__text--single">
                              <h2 class="quote__text__quote h2-display quote__text__quote--long">Lorem ipsum dolor sit
                                amet consectetur adipiscing elit vitae litora mattis duis, sed id elementum cras natoque
                                gravida facilisis habitant urna nostra,</h2>
                              <div class="quote__text__info text-xsmall ">
                                <div class="quote__text__info__author">
                                  This is a person, This is my extra
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="quote glide__slide">
                  <div class="row">
                    <div class="col-12">
                      <div class="quote__wrapper row gx-5 ">
                        <div class="col-12 col-md-6">
                          <div class="quote__image">
                            <picture>
                              <img
                                src="https://picsum.photos/id/10/750/500"
                                alt="alt text"
                                loading="lazy"
                              />
                            </picture>
                          </div>
                        </div>
                        <div class="col-12 col-md-6">
                          <div class="quote__text">
                            <h2 class="quote__text__quote h2-display ">Lorem ipsum dolor sit amet consectetur adipiscing
                              elit ante, hac sagittis penatibus erat pretium integer aliquam odio</h2>
                            <div class="quote__text__info text-xsmall ">
                              <div class="quote__text__info__author">
                                Another person
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="quote glide__slide">
                  <div class="row">
                    <div class="col-12">
                      <div class="quote__wrapper row gx-5 ">
                        <div class="col-12 col-md-6">
                          <div class="quote__image">
                            <picture>
                              <img
                                src="https://picsum.photos/id/21/500/750"
                                alt="alt text"
                                loading="lazy"
                              />
                            </picture>
                          </div>
                        </div>
                        <div class="col-12 col-md-6">
                          <div class="quote__text">
                            <h2 class="quote__text__quote h2-display">
                              Lorem ipsum dolor sit amet consectetur adipiscing elit a integer semper habitant cras, id
                              egestas varius elementum justo quisque viverra.
                            </h2>
                            <div class="quote__text__info text-xsmall">
                              <div class="quote__text__info__author">
                                Another person
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="quote glide__slide">
                  <div class="row">
                    <div class="col-12">
                      <div class="row">
                        <div class="quote__wrapper quote__wrapper--single ">
                          <div class="col-12 offset-md-1 col-md-10">
                            <div class="quote__text quote__text--single">
                              <h2 class="quote__text__quote h2-display">
                                Imperdiet sollicitudin quisque litora cum malesuada nam feugiat, cursus habitant
                                curabitur posuere ut egestas aptent sodales</h2>
                              <div class="quote__text__info text-xsmall">
                                <div class="quote__text__info__author">
                                  Yet another person, extra
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="glide__arrows quotes__nav" data-glide-el="controls">
              <button class="glide__arrow glide__arrow--left btn--glide" aria-label="Go to previous slide"
                      data-glide-dir="<">
                <svg class="svg-inline--fa fa-arrow-left-long" aria-hidden="true" focusable="false" data-prefix="fal"
                     data-icon="arrow-left-long" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                     data-fa-i2svg="">
                  <path fill="currentColor"
                        d="M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l144 144c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 496 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 171.3 123.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-144 144z"></path>
                </svg><!-- <i class="fa-light fa-arrow-left-long"></i> -->
              </button>
              <button class="glide__arrow glide__arrow--right btn--glide" aria-label="Go to next slide"
                      data-glide-dir=">">
                <svg class="svg-inline--fa fa-arrow-right-long" aria-hidden="true" focusable="false" data-prefix="fal"
                     data-icon="arrow-right-long" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                     data-fa-i2svg="">
                  <path fill="currentColor"
                        d="M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z"></path>
                </svg><!-- <i class="fa-light fa-arrow-right-long"></i> -->
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
Source: ../client/lib/components/quotes/_quotes.scss, line 1