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

Kit Digital de la Universidad San Sebastián

<div>
  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-6 col-lg-4 mb-20">
        <div class="uss-card">
          <img
            lazy
            class="uss-card__img aspect-ratio-4-3 aspect-ratio-lg-3-4"
            src="https://dummyimage.com/640x3:4/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <p class="m-0 mb-12 mb-md-20">Descripción persona</p>
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
            <a href="#" class="uss-btn uss-btn--tertiary">
              Más sobre persona
              <i class="uss-icon ri-arrow-right-circle-line"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-20">
        <div class="uss-card uss-card--background-alt">
          <img
            lazy
            class="uss-card__img aspect-ratio-4-3 aspect-ratio-lg-3-4"
            src="https://dummyimage.com/640x3:4/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <p class="m-0 mb-12 mb-md-20">Descripción persona</p>
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
            <a href="#" class="uss-btn uss-btn--tertiary">
              Más sobre persona
              <i class="uss-icon ri-arrow-right-circle-line"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-20">
        <div class="uss-card uss-card--border-none">
          <img
            lazy
            class="uss-card__img aspect-ratio-4-3 aspect-ratio-lg-3-4"
            src="https://dummyimage.com/640x3:4/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <p class="m-0 mb-12 mb-md-20">Descripción persona</p>
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
            <a href="#" class="uss-btn uss-btn--tertiary">
              Más sobre persona
              <i class="uss-icon ri-arrow-right-circle-line"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <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">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <p class="m-0 mb-12 mb-md-20">Descripción persona</p>
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
            <a href="#" class="uss-btn uss-btn--tertiary">
              Más sobre persona
              <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">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <p class="m-0 mb-12 mb-md-20">Descripción persona</p>
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
            <a href="#" class="uss-btn uss-btn--tertiary">
              Más sobre persona
              <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">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <p class="m-0 mb-12 mb-md-20">Descripción persona</p>
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
            <a href="#" class="uss-btn uss-btn--tertiary">
              Más sobre persona
              <i class="uss-icon ri-arrow-right-circle-line"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-6 mb-20">
        <div class="uss-card flex-row">
          <img
            lazy
            class="uss-card__img aspect-ratio-1-1 w-30"
            src="https://dummyimage.com/640x1:1/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-6 mb-20">
        <div class="uss-card uss-card--background-alt flex-row">
          <img
            lazy
            class="uss-card__img aspect-ratio-1-1 w-30"
            src="https://dummyimage.com/640x1:1/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-6 mb-20">
        <div class="uss-card uss-card--border-none flex-row">
          <img
            lazy
            class="uss-card__img aspect-ratio-1-1 w-30"
            src="https://dummyimage.com/640x1:1/"
            alt="dummyimage"
          />
          <div class="uss-card__body">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-4 mb-20">
        <div class="uss-card align-items-center flex-column">
          <img
            lazy
            class="uss-card__img aspect-ratio-16-9"
            src="https://dummyimage.com/600x300/"
            alt="dummyimage"
          />
          <div class="uss-card__body align-items-center">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-4 mb-20">
        <div class="uss-card uss-card--background-alt align-items-center flex-column">
          <img
            lazy
            class="uss-card__img aspect-ratio-16-9"
            src="https://dummyimage.com/600x300/"
            alt="dummyimage"
          />
          <div class="uss-card__body align-items-center">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="mb-160">
    <div class="row flex mb-40">
      <div class="col-md-4 mb-20">
        <div class="uss-card uss-card--border-none align-items-center flex-column">
          <img
            lazy
            class="uss-card__img aspect-ratio-16-9"
            src="https://dummyimage.com/600x300/"
            alt="dummyimage"
          />
          <div class="uss-card__body align-items-center">
            <div class="h3 mb-16">Nombre persona</div>
            <hr class="m-0 mb-12 mb-md-20" />
            <a
              class="flex uss-btn uss-btn--tertiary uss-btn--small mb-12 mb-md-20"
              href="mailto:nombre@uss.cl"
            >
              <i class="uss-icon ri-mail-line"></i>
              nombre@uss.cl
            </a>
            <div class="flex gap-4 mb-12 mb-md-32">
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-linkedin-box-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-facebook-circle-line"></i>
              </a>
              <a class="uss-btn uss-btn--icon uss-btn--icon-sm" href="#" target="_blank">
                <i class="uss-icon uss-icon--sm ri-twitter-line"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>