Stad Brugge

<div class="app-body">
  <div class="row">
    <div class="col-12">
      <p class="mb-2 kss__description">Status: Alert</p>
      <div class="header__popin header__popin--alert js-header-popin">
        <div class="container container--header">
          <div class="row">
            <div class="col-12">
              <div class="header__popin__content">
                <div class="header__popin__message">
                  <span class="icon">
                    <i class="fa-light fa-circle-info"></i>
                  </span>
                  <div class="message">
                    Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
                    eros et nisl sagittis vestibulum. Curabitur a felis in nunc
                    fringilla tristique.
                  </div>
                </div>
                <button
                  class="btn--close js-close-btn"
                  aria-label="Close header popin"
                >
                  <i class="fa-light fa-xmark icon icon--close-popin"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <p class="mb-2 mt-5 kss__description">Status: Info</p>
      <div class="header__popin header__popin--info js-header-popin">
        <div class="container container--header">
          <div class="row">
            <div class="col-12">
              <div class="header__popin__content">
                <div class="header__popin__message">
                  <span class="icon">
                    <i class="fa-light fa-circle-info"></i>
                  </span>
                  <div class="message">
                    Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
                    eros et nisl sagittis vestibulum. Curabitur a felis in nunc
                    fringilla tristique.
                  </div>
                </div>
                <button
                  class="btn--close js-close-btn"
                  aria-label="Close header popin"
                >
                  <i class="fa-light fa-xmark icon icon--close-popin"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <p class="mb-2 mt-5 kss__description">Status: Notification</p>
      <div class="header__popin header__popin--notification js-header-popin">
        <div class="container container--header">
          <div class="row">
            <div class="col-12">
              <div class="header__popin__content">
                <div class="header__popin__message">
                  <span class="icon">
                    <i class="fa-light fa-circle-info"></i>
                  </span>
                  <div class="message">
                    Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
                    eros et nisl sagittis vestibulum. Curabitur a felis in nunc
                    fringilla tristique.
                  </div>
                </div>
                <button
                  class="btn--close js-close-btn"
                  aria-label="Close header popin"
                >
                  <i class="fa-light fa-xmark icon icon--close-popin"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>