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

Kit Digital de la Universidad San Sebastián

<div>
  <section class="mb-160">
    <h2>Cards M Vertical</h2>
    <hr class="mb-40" />
    <div class="row flex mb-40">
      <div class="col-md-6 col-lg-4 uss-card--equal-height mb-32">
        <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--primary 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-md-6 col-lg-4 uss-card--equal-height mb-32">
        <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--primary 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-md-6 col-lg-4 uss-card--equal-height mb-32">
        <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--primary 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>
    </div>
  </section>
  <section class="mb-160">
    <h2>Card S Vertical</h2>
    <hr class="mb-40" />
    <div class="row mb-40">
      <div class="col-md-3 uss-card--equal-height">
        <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-md-3 uss-card--equal-height">
        <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>
      <div class="col-md-3 uss-card--equal-height">
        <div class="uss-card uss-card--border-none">
          <img
            lazy
            class="uss-card__img aspect-ratio-1-1 img-cover"
            src="https://dummyimage.com/640x1:1/"
            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>
  </section>
  <section class="mb-160">
    <h2>Card M Horizontal</h2>
    <hr class="mb-40" />
    <div class="row flex mb-40">
      <div class="col-md-7 mb-20">
        <div class="uss-card flex-column flex-md-row">
          <img
            lazy
            class="uss-card__img aspect-ratio-3-4 w-100 w-md-50"
            src="https://dummyimage.com/640x3:4/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <a href="#" class="uss-tag uss-tag--primary 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-md-7 mb-20">
        <div class="uss-card uss-card--background-alt flex-column flex-md-row">
          <img
            lazy
            class="uss-card__img aspect-ratio-3-4 w-100 w-md-50"
            src="https://dummyimage.com/640x3:4/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <a href="#" class="uss-tag uss-tag--primary 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-md-7 mb-20">
        <div class="uss-card uss-card--border-none flex-column flex-md-row">
          <img
            lazy
            class="uss-card__img aspect-ratio-3-4 w-100 w-md-50"
            src="https://dummyimage.com/640x3:4/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <a href="#" class="uss-tag uss-tag--primary 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>
  </section>
</div>