@ussebastian/kitdigital/docs/components/content/cards-feature.html

Kit Digital de la Universidad San Sebastián

<div>
  <section class="mb-160">
    <h2>Card Atributo - Horizontal</h2>
    <hr class="mb-40" />
    <div class="uss-card uss-card--border-none shadow-2">
      <div class="p-20 py-40 p-md-64">
        <div class="row gx-64">
          <div class="col-md-6 text-center text-md-start">
            <div class="h3 mb-8">
              ¿Por qué se necesita reforzar las políticas públicas en la salud bucal?
            </div>
            <p class="mb-32">
              Informe de la Organización Mundial de la Salud (OMS) reveló que Chile es uno de los
              países con la mayor prevalencia de caries sin tratar
            </p>
            <a href="#" target="_blank" class="uss-btn uss-btn--primary d-none d-md-flex w-50">
              Leer Articulo
              <i class="uss-icon ri-external-link-line"></i>
            </a>
          </div>
          <div class="col-md-6">
            <ul class="flex flex-column gap-24">
              <li class="flex gap-8 gap-md-16">
                <i
                  class="uss-icon icon-size-m icon-size-md-xl ri-checkbox-circle-line"
                  style="color: var(--text-success)"
                ></i>
                <p class="h6" style="color: var(--text-subtle)">
                  Scelerisque donec imperdiet donec lorem ipsum dolor sit amet
                </p>
              </li>
              <li class="flex gap-8 gap-md-16">
                <i
                  class="uss-icon icon-size-m icon-size-md-xl ri-checkbox-circle-line"
                  style="color: var(--text-success)"
                ></i>
                <div class="h6" style="color: var(--text-subtle)">
                  scelerisque donec imperdiet donec lorem ipsum dolor sit amet, consectetur
                  adipiscing elit.
                </div>
              </li>
              <li class="flex gap-8 gap-md-16">
                <i
                  class="uss-icon icon-size-m icon-size-md-xl ri-checkbox-circle-line"
                  style="color: var(--text-success)"
                ></i>
                <div class="h6" style="color: var(--text-subtle)">Consectetur adipiscing elit.</div>
              </li>
              <li class="flex gap-8 gap-md-16">
                <i
                  class="uss-icon icon-size-m icon-size-md-xl ri-checkbox-circle-line"
                  style="color: var(--text-success)"
                ></i>
                <div class="h6" style="color: var(--text-subtle)">
                  scelerisque donec imperdiet donec lorem ipsum dolor sit amet, consectetur
                  adipiscing elit.
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="mt-32 flex justify-content-center">
          <a href="#" target="_blank" class="uss-btn uss-btn--primary d-flex d-md-none">
            Revisar protocolos
            <i class="uss-icon uss-icon--xl ri-external-link-line"></i>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>