Stad Brugge

<div class="app-body">
  <p class="mb-2 mt-5 kss__description">Display mode: Button</p>
  <section class="paragraph--cta paragraph--cta--no-banner pt-medium pb-medium">
    <div class="row">
      <div class="col-12">
        <a href="https://www.google.be" class="button--cta" target="_blank">
          <span class="button--cta__bg"></span>
          <span class="button--cta--left">
            <span class="button--cta--left--text">Cta link text</span>
          </span>
          <span class="button--cta--right icon--btn-wrapper ms-3">
            <i class="fa-regular fa-arrow-up-right"></i>
          </span>
        </a>
      </div>
    </div>
  </section>

  <p class="mb-2 mt-5 kss__description">Display mode: Link</p>
  <section id="anchor-96" class="section paragraph--cta paragraph--cta--no-banner pt-medium pb-medium">
    <div class="row">
      <div class="col-12">
        <a href="https://www.google.be" class="button button--small" target="_blank">
          <span class="button__title">Cta link text</span>
          <div class="icon--btn-wrapper ms-3">
            <i class="fa-regular fa-arrow-up-right"></i>
          </div>
        </a>
      </div>
    </div>
  </section>

  <p class="mt-5 kss__description">Display mode: Banner</p>
  <p class="mb-2 kss__description">Text align: left</p>

  <section class="paragraph--cta pt-medium pb-medium">
    <div class="row">
      <div class="col-12 cta-banner">
        <div class="cta-banner--wrapper">
          <div class="cta-banner__bg">
            <picture>
              <img src="https://picsum.photos/1300/650" alt="cta banner image" width="" height="">
            </picture>
          </div>
          <span class="cta-banner--overlay"></span>
          <div class="cta-banner__content col-md-6 offset-md-2">
            <h2>
              Cta Banner
            </h2>
            <div class="wysiwyg">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus.
              </p>
            </div>
            <a href="https://www.google.be" class="button button--large js-button" data-flip="Cta link text" target="_blank">
              <span class="button__content__wrapper">
                <span class="button__content button__content--noflip">
                  <span class="button__content__label">
                    Cta link text
                  </span>
                  <span class="icon--btn-wrapper ms-3">
                    <i class="fa-regular fa-arrow-up-right"></i>
                  </span>
                </span>
                <span class="button__content button__content--flip">
                  <span class="button__content__label js-button-flip-label">
                    Cta link text
                  </span>
                  <span class="icon--btn-wrapper ms-3">
                    <i class="fa-regular fa-arrow-up-right"></i>
                  </span>
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <p class="mt-5 kss__description">Display mode: Banner</p>
  <p class="mb-2 kss__description">Text align: center</p>

  <section class="paragraph--cta pt-medium pb-medium">
    <div class="row">
      <div class="col-12 cta-banner cta-banner--centered">
        <div class="cta-banner--wrapper">
          <div class="cta-banner__bg">
            <picture>
              <img src="https://picsum.photos/1300/650" alt="cta banner image" width="" height="">
            </picture>
          </div>
          <span class="cta-banner--overlay"></span>
          <div class="cta-banner__content col-md-6 offset-md-2">
            <h2>
              Cta Banner
            </h2>
            <div class="wysiwyg">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus.
              </p>
            </div>
            <a href="https://www.google.be" class="button button--large js-button" data-flip="Cta link text" target="_blank">
              <span class="button__content__wrapper">
                <span class="button__content button__content--noflip">
                  <span class="button__content__label">
                    Cta link text
                  </span>
                  <span class="icon--btn-wrapper ms-3">
                    <i class="fa-regular fa-arrow-up-right"></i>
                  </span>
                </span>
                <span class="button__content button__content--flip">
                  <span class="button__content__label js-button-flip-label">
                    Cta link text
                  </span>
                  <span class="icon--btn-wrapper ms-3">
                    <i class="fa-regular fa-arrow-up-right"></i>
                  </span>
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>