@ussebastian/kitdigital

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="/css/main.css" /> <title>Component: docs/components/content/cards-persona.html</title> </head> <body> <header style="border-bottom: 1px solid var(--border)" class="p-20"> <div class="d-flex justify-content-between"> <a href="/" class="uss-btn uss-btn--tertiary"> <i class="uss-icon uss-icon--sm ri-home-line"></i>Volver al inicio</a > <div> <button id="_uss-btn-toggle-container" class="uss-btn uss-btn--size-sm uss-btn--tertiary"> [ Toggle .container ] </button> </div> </div> <h3 class="p-0">docs/components/content/cards-persona.html</h3> </header> <div id="viewer" class="container my-40" style="border: 1px solid var(--border)"> <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> </div> </body> <script type="module" src="/js/main.js"></script> <script> const button = document.getElementById('_uss-btn-toggle-container'); button.addEventListener('click', () => { const viewer = document.getElementById('viewer'); viewer.classList.toggle('container'); }); </script> </html>