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

Kit Digital de la Universidad San Sebastián

<section class="row">
  <div class="col-sm-4 my-12">
    <div class="uss-card uss-card--border-none">
      <img
        lazy
        class="uss-card__img aspect-ratio-1-1 img-cover"
        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>
        <div class="h5 mb-20">Titulo de la card</div>
        <p class="p-size--sm 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 my-12">
    <div class="uss-card">
      <img lazy class="uss-card__img" src="https://dummyimage.com/640x16:9/" alt="dummyimage" />
      <div class="uss-card__body">
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-16">Titulo de la card</div>
        <p class="p-size--sm 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 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 my-12">
    <div class="uss-card uss-card--background-alt">
      <img
        lazy
        class="uss-card__img aspect-ratio-4-3 img-cover"
        src="https://dummyimage.com/640x16:9/"
        alt="dummyimage"
      />
      <div class="uss-card__body">
        <div class="overline text-color--alt">Metadato introductorio</div>
        <div class="h5 mb-16">Titulo de la card corta</div>
        <p class="p-size--sm 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>