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

Kit Digital de la Universidad San Sebastián

<div>
  <section class="mb-40">
    <h2 class="uss-h4 pt-20">Card Atributo - Horizontal</h2>
    <hr class="my-20" />
    <div class="row flex mb-40">
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <div class="uss-card">
          <div class="uss-card__body flex-column gap-24">
            <div class="p-16" style="background: var(--background-2)">
              <i
                class="uss-icon fs-2 ri-checkbox-circle-line icon-size"
                style="color: var(--icon-decorative)"
              ></i>
            </div>
            <div class="uss-card__wrapper">
              <div class="h5 mb-8">Este es un beneficio o un atributo</div>
              <p class="mb-32">
                Lorem ipsum dolor sit amet consectetur. Volutpat in amet lectus nunc eros eleifend.
                Potenti tempus accumsan risus risus
              </p>
              <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
                Botón terciario
                <i class="uss-icon ri-arrow-right-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <div class="uss-card uss-card--background-alt">
          <div class="uss-card__body flex-column gap-24">
            <div class="p-16" style="background: var(--background-2)">
              <i
                class="uss-icon fs-2 ri-checkbox-circle-line icon-size"
                style="color: var(--icon-decorative)"
              ></i>
            </div>
            <div class="uss-card__wrapper">
              <div class="h5 mb-8">Este es un beneficio o un atributo</div>
              <p class="mb-32">
                Lorem ipsum dolor sit amet consectetur. Volutpat in amet lectus nunc eros eleifend.
                Potenti tempus accumsan risus risus
              </p>
              <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
                Botón terciario
                <i class="uss-icon ri-arrow-right-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <div class="uss-card uss-card--border-none">
          <div class="uss-card__body flex-column gap-24">
            <div class="p-16" style="background: var(--background-2)">
              <i
                class="uss-icon fs-2 ri-checkbox-circle-line icon-size"
                style="color: var(--icon-decorative)"
              ></i>
            </div>
            <div class="uss-card__wrapper">
              <div class="h5 mb-8">Este es un beneficio o un atributo!</div>
              <p class="mb-32">
                Lorem ipsum dolor sit amet consectetur. Volutpat in amet lectus nunc eros eleifend.
                Potenti tempus accumsan risus risus
              </p>
              <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
                Botón terciario
                <i class="uss-icon ri-arrow-right-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="mb-40">
    <h2 class="uss-h4">Card Atributo - Horizontal</h2>
    <hr class="my-20" />
    <div class="row flex mb-40">
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <div class="uss-card">
          <div class="uss-card__body flex-column flex-md-row gap-24">
            <div class="p-16" style="background: var(--background-2)">
              <i
                class="uss-icon fs-2 ri-checkbox-circle-line icon-size"
                style="color: var(--icon-decorative)"
              ></i>
            </div>
            <div class="uss-card__wrapper">
              <div class="h5 mb-8">Este es un beneficio o un atributo</div>
              <p class="mb-32">
                Lorem ipsum dolor sit amet consectetur. Volutpat in amet lectus nunc eros eleifend.
                Potenti tempus accumsan risus risus
              </p>
              <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
                Botón terciario
                <i class="uss-icon ri-arrow-right-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <div class="uss-card uss-card--background-alt">
          <div class="uss-card__body flex-column flex-md-row gap-24">
            <div class="p-16" style="background: var(--background-2)">
              <i
                class="uss-icon fs-2 ri-checkbox-circle-line icon-size"
                style="color: var(--icon-decorative)"
              ></i>
            </div>
            <div class="uss-card__wrapper">
              <div class="h5 mb-8">Este es un beneficio o un atributo</div>
              <p class="mb-32">
                Lorem ipsum dolor sit amet consectetur. Volutpat in amet lectus nunc eros eleifend.
                Potenti tempus accumsan risus risus
              </p>
              <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
                Botón terciario
                <i class="uss-icon ri-arrow-right-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <div class="uss-card uss-card--border-none">
          <div class="uss-card__body flex-column flex-md-row gap-24">
            <div class="p-16" style="background: var(--background-2)">
              <i
                class="uss-icon fs-2 ri-checkbox-circle-line icon-size"
                style="color: var(--icon-decorative)"
              ></i>
            </div>
            <div class="uss-card__wrapper">
              <div class="h5 mb-8">Este es un beneficio o un atributo</div>
              <p class="mb-32">
                Lorem ipsum dolor sit amet consectetur. Volutpat in amet lectus nunc eros eleifend.
                Potenti tempus accumsan risus risus
              </p>
              <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
                Botón terciario
                <i class="uss-icon ri-arrow-right-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>