@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
256 lines (251 loc) • 10.4 kB
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.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.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<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>
</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>