{% extends "layout/layout.html" %}
{% set page_title = "Card" %}
{% block content %}

<main class="app-wrapper">
  {% include "../templates/layout/header-footer/app-header.html" %}
  {% include "../templates/layout/header-footer/app-sidebar.html" %}
  {% include "../templates/layout/header-footer/topnavbar.html" %}
  <div class="content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
          <!-- Breedcrumb -->
        <div class="row">
          <div class="col-12 rt-mb-25">
            {% include "../templates/components/breadcrumbs/breadcrumbs.html" %}
          </div>
        </div>

        <!-- Cards  -->
        <section class="cards">
            <div class="row">
              <div class="col-xxl-3 col-md-6 d-flex align-items-stretch">
                <div class="card-blog">
                  <div class="card-blog__img">
                    <img src="assets/images/all-img/img-one.png" alt="card-img">
                  </div>
                  <div class="card-blog__info">
                    <h2>This is a basic card title </h2>
                    <p>
                      Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.
                    </p>
                    <a href="#" class="btn btn-primary2 pill btn-icon">
                      <span class="button-content-wrapper">
                           <span class="button-icon align-icon-right">
                             <i class="ph-arrow-right"></i>
                           </span>
                      <span class="button-text">
                             Read More
                           </span>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-xxl-3 col-md-6 d-flex align-items-stretch">
                <div class="card-bg">
                  <div class="card-bg__content" style="background: url('assets/images/all-img/cards/img-one.jpg') center center/cover no-repeat;">
                    <h2>This is a Basic Card Title</h2>
                    <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                    <a href="#" class="btn btn-primary2 pill btn-icon">
                      <span class="button-content-wrapper">
                          <span class="button-icon align-icon-right">
                            <i class="ph-arrow-right"></i>
                          </span>
                      <span class="button-text">
                            Read More 
                          </span>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-xxl-6">
                <div class="row">
                  <div class="col-md-6 d-flex align-items-stretch ">
                    <div class="card-basic">
                      <h2>This is a Basic Card Title </h2>
                      <p>
                        Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.
                      </p>
                      <a href="#" class="card-basic-redirect">
                        Card Link
                        <span>
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.125 10H16.875" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                    
                         </span>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-6 d-flex align-items-stretch ">
                    <div class="card-basic card-basic--bg" style="background: url('assets/images/all-img/cards/img-two.png') center center/cover no-repeat;">
                      <h2>This is a Basic Card Title </h2>
                      <p>
                        Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.
                      </p>
                      <a href="#" class="card-basic-redirect">
                        Card Link
                        <span>
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3.125 10H16.875" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#fff" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                    
                         </span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-12 d-flex align-items-stretch ">
                    <div class="card-blog card-blog--two">
                      <div class="card-blog__img">
                        <img src="assets/images/all-img/img-two.png" alt="card-img">
                      </div>
                      <div class="card-blog__info">
                        <h2>This is a basic card title </h2>
                        <p>
                          Nam non nunc tellus. Quisque cursus ligula pharetra risus ultricies, nec ullamcorper elit suscipit. Aliquam commodo est ut finibus aliquet.
                        </p>
                        <div class="card-blog__buttons">
                          <a href="#" class="card-blog-redirect">
                            Card Link
                            <span>
                              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.125 10H16.875" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                    
                             </span>
                          </a>
                          <a href="#" class="card-blog-redirect">
                            Another Card Link
                            <span>
                              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.125 10H16.875" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M11.25 4.375L16.875 10L11.25 15.625" stroke="#005CE8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>                    
                             </span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                  <div class="card-aligned">
                    <div class="card-aligned__icon">
                      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.2" d="M4.13848 9.32695C4.04778 9.48078 3.99997 9.6561 4 9.83468V22.165C4 22.3424 4.04721 22.5167 4.13679 22.6698C4.22637 22.823 4.35509 22.9496 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3525 16 29.3525L16.0013 29.3525L16.1186 15.9998L4.1385 9.32697L4.13848 9.32695Z" fill="currentColor"></path>
                        <path d="M28 22.1651V9.83477C28 9.65733 27.9528 9.48309 27.8632 9.32992C27.7736 9.17675 27.6449 9.05018 27.4903 8.96319L16.4903 2.77569C16.3406 2.6915 16.1717 2.64727 16 2.64727C15.8283 2.64727 15.6594 2.6915 15.5097 2.77569L4.50974 8.96319C4.35509 9.05018 4.22637 9.17675 4.13679 9.32992C4.04721 9.48309 4 9.65733 4 9.83477V22.1651C4 22.3425 4.04721 22.5167 4.13679 22.6699C4.22637 22.8231 4.35509 22.9497 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3526 16 29.3526C16.1717 29.3526 16.3406 29.3083 16.4903 29.2241L27.4903 23.0366C27.6449 22.9497 27.7736 22.8231 27.8632 22.6699C27.9528 22.5167 28 22.3425 28 22.1651Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M22.1278 19.0635V12.5635L10 5.87461" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M27.8623 9.3282L16.1188 15.9998L4.13867 9.32695" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M16.1193 15.9996L16.002 29.3523" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="card-aligned__info">
                      <h2>This is a card title </h2>
                      <p>
                        Donec aliquet ut diam ut dictum. Donec ornare erat enim, sollicitudin tristique libero tincidunt a. Vestibulum ultrices odio quis tortor viverra commodo.
                      </p>
                      <a href="#" class="btn btn-outline-primary pill btn-icon">
                        <span class="button-content-wrapper">
                            <span class="button-icon align-icon-right">
                              <i class="ph-arrow-right"></i>
                            </span>
                        <span class="button-text">
                              Read more 
                            </span>
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-6">
                  <div class="card-aligned card-aligned--center">
                    <div class="card-aligned__icon">
                      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.2" d="M4.13848 9.32695C4.04778 9.48078 3.99997 9.6561 4 9.83468V22.165C4 22.3424 4.04721 22.5167 4.13679 22.6698C4.22637 22.823 4.35509 22.9496 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3525 16 29.3525L16.0013 29.3525L16.1186 15.9998L4.1385 9.32697L4.13848 9.32695Z" fill="currentColor"></path>
                        <path d="M28 22.1651V9.83477C28 9.65733 27.9528 9.48309 27.8632 9.32992C27.7736 9.17675 27.6449 9.05018 27.4903 8.96319L16.4903 2.77569C16.3406 2.6915 16.1717 2.64727 16 2.64727C15.8283 2.64727 15.6594 2.6915 15.5097 2.77569L4.50974 8.96319C4.35509 9.05018 4.22637 9.17675 4.13679 9.32992C4.04721 9.48309 4 9.65733 4 9.83477V22.1651C4 22.3425 4.04721 22.5167 4.13679 22.6699C4.22637 22.8231 4.35509 22.9497 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3526 16 29.3526C16.1717 29.3526 16.3406 29.3083 16.4903 29.2241L27.4903 23.0366C27.6449 22.9497 27.7736 22.8231 27.8632 22.6699C27.9528 22.5167 28 22.3425 28 22.1651Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M22.1278 19.0635V12.5635L10 5.87461" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M27.8623 9.3282L16.1188 15.9998L4.13867 9.32695" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M16.1193 15.9996L16.002 29.3523" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="card-aligned__info">
                      <h2>This is a card title </h2>
                      <p>
                        Donec aliquet ut diam ut dictum. Donec ornare erat enim, sollicitudin tristique libero tincidunt a. Vestibulum ultrices odio quis tortor viverra commodo.
                      </p>
                      <a href="#" class="btn btn-outline-primary pill btn-icon">
                        <span class="button-content-wrapper">
                            <span class="button-icon align-icon-right">
                              <i class="ph-arrow-right"></i>
                            </span>
                        <span class="button-text">
                              Read more 
                            </span>
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-6">
                  <div class="card-aligned card-aligned--right">
                    <div class="card-aligned__icon">
                      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.2" d="M4.13848 9.32695C4.04778 9.48078 3.99997 9.6561 4 9.83468V22.165C4 22.3424 4.04721 22.5167 4.13679 22.6698C4.22637 22.823 4.35509 22.9496 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3525 16 29.3525L16.0013 29.3525L16.1186 15.9998L4.1385 9.32697L4.13848 9.32695Z" fill="currentColor"></path>
                        <path d="M28 22.1651V9.83477C28 9.65733 27.9528 9.48309 27.8632 9.32992C27.7736 9.17675 27.6449 9.05018 27.4903 8.96319L16.4903 2.77569C16.3406 2.6915 16.1717 2.64727 16 2.64727C15.8283 2.64727 15.6594 2.6915 15.5097 2.77569L4.50974 8.96319C4.35509 9.05018 4.22637 9.17675 4.13679 9.32992C4.04721 9.48309 4 9.65733 4 9.83477V22.1651C4 22.3425 4.04721 22.5167 4.13679 22.6699C4.22637 22.8231 4.35509 22.9497 4.50974 23.0366L15.5097 29.2241C15.6594 29.3083 15.8283 29.3526 16 29.3526C16.1717 29.3526 16.3406 29.3083 16.4903 29.2241L27.4903 23.0366C27.6449 22.9497 27.7736 22.8231 27.8632 22.6699C27.9528 22.5167 28 22.3425 28 22.1651Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M22.1278 19.0635V12.5635L10 5.87461" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M27.8623 9.3282L16.1188 15.9998L4.13867 9.32695" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M16.1193 15.9996L16.002 29.3523" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div class="card-aligned__info">
                      <h2>This is a card title </h2>
                      <p>
                        Donec aliquet ut diam ut dictum. Donec ornare erat enim, sollicitudin tristique libero tincidunt a. Vestibulum ultrices odio quis tortor viverra commodo.
                      </p>
                      <a href="#" class="btn btn-outline-primary pill btn-icon">
                        <span class="button-content-wrapper">
                            <span class="button-icon align-icon-right">
                              <i class="ph-arrow-right"></i>
                            </span>
                        <span class="button-text">
                              Read more 
                            </span>
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
            </div>
            <div class="row">
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-white">
                  <h3>Light Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate
                    dapibus.</p>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-gray-900">
                  <h3>Dark Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-primary-500">
                  <h3>Primary Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-secondary-500">
                  <h3>Secondary Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-success-500">
                  <h3>Success Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-warning-500">
                  <h3>Warning Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-4 col-sm-6">
                <div class="label-tag-item bg-danger-600">
                  <h3>Danger Card Tittle</h3>
                  <p>Morbi pretium mollis justo, vitae dictum eros mollis ut. Aliquam erat volutpat. Ut egestas ipsum ut eros vulputate dapibus.</p>
                </div>
              </div>
            </div>
        </section>

        {% include "../templates/layout/header-footer/footer.html" %}
      </div>
    </div>
  </div>
</main>



{% endblock %}