<div class="container mb-5">
  <div class="row">
    <div class="col-12 mb-3 mt-5">
      <span class="kss__markup-title">Primary color:</span>
    </div>
    <div class="col-12">
      <div class="kss__colors d-flex">
        <div class="kss__colors__item bg-primary">
        </div>
        <div class="kss__colors__item bg-primary opacity-75">
        </div>
        <div class="kss__colors__item bg-primary opacity-50">
        </div>
        <div class="kss__colors__item bg-primary opacity-25">
        </div>
        <div class="kss__colors__item bg-primary opacity-10">
        </div>
        <div class="kss__colors__item bg-primary opacity-5">
        </div>
      </div>
    </div>
    <div class="col-12 mb-3 mt-5">
      <span class="kss__markup-title">Secondary color:</span>
    </div>
    <div class="col-12">
      <div class="kss__colors d-flex">
        <div class="kss__colors__item bg-secondary">
        </div>
        <div class="kss__colors__item bg-secondary opacity-75">
        </div>
        <div class="kss__colors__item bg-secondary opacity-50">
        </div>
        <div class="kss__colors__item bg-secondary opacity-25">
        </div>
        <div class="kss__colors__item bg-secondary opacity-10">
        </div>
        <div class="kss__colors__item bg-secondary opacity-5">
        </div>
      </div>
    </div>
    <div class="col-12 mb-3 mt-5">
      <span class="kss__markup-title">Ink color:</span>
    </div>
    <div class="col-12">
      <div class="kss__colors d-flex">
        <div class="kss__colors__item bg-ink">
        </div>
        <div class="kss__colors__item bg-ink opacity-75">
        </div>
        <div class="kss__colors__item bg-ink opacity-50">
        </div>
        <div class="kss__colors__item bg-ink opacity-25">
        </div>
        <div class="kss__colors__item bg-ink opacity-10">
        </div>
        <div class="kss__colors__item bg-ink opacity-5">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="app-body">
  <div class="container">
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>Display title 1</p>
        <div class="h1-display">Aenean ut dui interdum, viverra dolor id, viverra enim.</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Domine</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>64px</p>
          <strong>line-height</strong><p>72px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>Display title 2</p>
        <div class="h2-display">Aenean ut dui interdum, viverra dolor id, viverra enim.</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Domine</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>40px</p>
          <strong>line-height</strong><p>45px</p>
        </div>
      </div>
    </div>

    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>Display title 3</p>
        <div class="h3-display">Aenean ut dui interdum, viverra dolor id, viverra enim.</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Domine</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>24px</p>
          <strong>line-height</strong><p>27px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h1.</p>
        <h1>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h1>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>40px</p>
          <strong>line-height</strong><p>45px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h2.</p>
        <h2>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h2>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>32px</p>
          <strong>line-height</strong><p>36px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h3.</p>
        <h3>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h3>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>28px</p>
          <strong>line-height</strong><p>31.5px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h4.</p>
        <h4>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h4>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>24px</p>
          <strong>line-height</strong><p>22.5px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h5.</p>
        <h5>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h5>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>16px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>h6.</p>
        <h6>Aenean ut dui interdum, viverra dolor id, viverra enim. Pellentesque congue turpis a cursus congue.</h6>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>700</p>
          <strong>font-size</strong><p>16px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>paragraph normal</p>
        <p>Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.</p>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>16px</p>
          <strong>line-height</strong><p>24px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>paragraph small</p>
        <p class="text-small">Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.</p>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>14px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
    <div class="row mb-5 align-items-center">
      <div class="col-12 col-md-8">
        <p>paragraph extra small</p>
        <p class="text-xsmall">Curabitur pellentesque sollicitudin imperdiet. Aenean fringilla massa ut lorem efficitur, vel dapibus ante hendrerit. Nullam maximus porttitor semper. Maecenas in nibh a mauris posuere commodo egestas ac erat. Nulla orci dolor, rutrum vel egestas ut, vestibulum semper tellus. Nullam elementum dui diam, eget pulvinar metus viverra at. Maecenas a orci eu nunc interdum aliquet a in lorem.</p>
      </div>
      <div class="col-12 col-md-4">
        <div class="kss-font-details">
          <strong>font-family</strong><p>Poppins</p>
          <strong>font-weight</strong><p>400</p>
          <strong>font-size</strong><p>12px</p>
          <strong>line-height</strong><p>18px</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="kss__icon__wrapper mb-5">
  <div class="container">
    <div class="row gy-2 gx-2">
      <div class="col-12 mb-2 mt-5">
        <span class="kss__markup-title">Font Awesome v5 icons</span>
        <span class="kss__markup-subtitle">You can search for more icons here: <a href="https://fontawesome.com/v5/search" target="_blank">https://fontawesome.com/v5/search</a></span></span>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-light fa-arrow-left-long icon--cl"></i>
          <span class="kss__icon__name">fa-light fa-arrow-left-long</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-light fa-arrow-right-long icon--cl"></i>
          <span class="kss__icon__name">fa-light fa-arrow-right-long</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-solid fa-chevron-down icon--cl"></i>
          <span class="kss__icon__name">fa-solid fa-chevron-down</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-arrow-up-right icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-arrow-up-right</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-envelope icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-envelope</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-file-pdf icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-file-pdf</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-light fa-xmark icon--cl"></i>
          <span class="kss__icon__name">fa-light fa-xmark</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-clock icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-clock</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-light fa-circle-info icon--cl"></i>
          <span class="kss__icon__name">fa-light fa-circle-info</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-light fa-magnifying-glass icon--cl"></i>
          <span class="kss__icon__name">fa-light fa-magnifying-glass</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-solid fa-user icon--cl"></i>
          <span class="kss__icon__name">fa-solid fa-user</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-solid fa-heart icon--cl"></i>
          <span class="kss__icon__name">fa-solid fa-heart</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-solid fa-house icon--cl"></i>
          <span class="kss__icon__name">fa-solid fa-house</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-solid fa-star icon--cl"></i>
          <span class="kss__icon__name">fa-solid fa-star</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-location-dot icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-location-dot</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-bus icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-bus</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-phone icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-phone</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-regular fa-link icon--cl"></i>
          <span class="kss__icon__name">fa-regular fa-link</span>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row gy-2 gx-2">
      <div class="col-12 mb-2 mt-5">
        <span class="kss__markup-title">Social icons</span>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-brands fa-facebook icon--cl"></i>
          <span class="kss__icon__name">fa-brands fa-facebook</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-brands fa-google icon--cl"></i>
          <span class="kss__icon__name">fa-brands fa-google</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-brands fa-twitter icon--cl"></i>
          <span class="kss__icon__name">fa-brands fa-twitter</span>
        </div>
      </div>
      <div class="col-6 col-md-2">
        <div class="kss__icon">
          <i class="fa-brands fa-linkedin-in icon--cl"></i>
          <span class="kss__icon__name">fa-brands fa-linkedin-in</span>
        </div>
      </div>
      <!--
      <div class="col-12">
        <a href="./dist/img/static/custom-icons.zip" class="button js-button mt-5" data-flip="Download custom icons" download>
          <span class="button__content__wrapper">
            <span class="button__content button__content--noflip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-regular fa-file-pdf icon--cl"></i>
              </span>
              <span class="button__content__label">
                Download custom icons
              </span>
            </span>
            <span class="button__content button__content--flip">
              <span class="icon--btn-wrapper me-3">
                <i class="fa-regular fa-file-pdf icon--cl"></i>
              </span>
              <span class="button__content__label js-button-flip-label">
              </span>
            </span>
          </span>
        </a>
      </div>
      -->
    </div>
  </div>
  <div class="container">
    <div class="row gy-2 gx-2">
      <div class="col-12 mb-2 mt-5">
        <span class="kss__markup-title pb-small">Installation notes</span>
        <div class="wysiwyg">
          <p>
            If you want to use the fontawesome icons, you need to add following script to the head of your application: <br>
          </p>
          <code>
            &lt;script src=&quot;https://kit.fontawesome.com/0f7402df08.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          </code>
        </div>
      </div>
    </div>
  </div>
</div>