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

Kit Digital de la Universidad San Sebastián

<section class="row my-12">
  <div class="col-sm-4 uss-card--equal-height mb-24">
    <div class="uss-card">
      <img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" />
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20">Tag secundario</a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <a href="">
          <div class="h4 mb-16">Titulo de la card</div>
          <p class="mb-32">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat
            scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.
          </p>
        </a>
        <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 uss-card--equal-height mb-24">
    <div class="uss-card uss-card--background-alt">
      <img lazy class="uss-card__img" src="https://dummyimage.com/640x4:3/" alt="dummyimage" />
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <p class="mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 uss-card--equal-height mb-24">
    <div class="uss-card uss-card--border-none">
      <img lazy class="uss-card__img" src="https://dummyimage.com/640x4:3/" alt="dummyimage" />
      <div class="uss-card__body">
        <a href="#" class="uss-tag uss-tag--secondary mb-20"> Tag secundario </a>
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h4 mb-20">Titulo de la card</div>
        <p class="mb-32">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat.
        </p>
        <a href="#" class="uss-btn uss-btn--tertiary mt-auto">
          Botón terciario
          <i class="uss-icon ri-arrow-right-circle-line"></i>
        </a>
      </div>
    </div>
  </div>
</section>