@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
108 lines (103 loc) • 4.71 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/carousel-V2-hero.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/carousel-V2-hero.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<section>
<div class="uss-carousel-v2 uss-focus--outline-white dark" aria-label="carousel de ejemplo">
<div class="uss-carousel-v2__controls container">
<button class="uss-carousel-v2__skip-navigation"></button>
<button class="uss-carousel-v2__play"></button>
<div class="d-flex align-items-center" style="gap: 16px">
<div class="d-flex align-items-center">
<button class="uss-carousel-v2__prev uss-btn uss-btn--slide uss-btn--slide-prev"></button>
<button class="uss-carousel-v2__next uss-btn uss-btn--slide uss-btn--slide-next"></button>
</div>
<div class="uss-carousel-v2__shortcuts d-none d-md-flex"></div>
</div>
</div>
<div class="uss-carousel-v2__viewport">
<div class="uss-carousel-v2__container">
<div class="uss-carousel-v2__slide" data-uss-content-label="Slide número 1">
<div class="uss-hero uss-hero--background uss-hero--carousel-slide">
<img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
<div class="uss-opacity-layer"></div>
<div class="col-md-8">
<div class="uss-hero__content">
<h2 class="uss-hero__title">
Lorem ipsum dolor sit amet, consecteturd adipiscing elit
</h2>
<p class="uss-hero__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
</p>
<div class="uss-hero__buttons">
<a href="#" class="uss-btn uss-btn--tertiary">
<i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
>
</div>
</div>
</div>
</div>
</div>
<div class="uss-carousel-v2__slide" data-uss-content-label="Slide número 2">
<div class="uss-hero uss-hero--background uss-hero--carousel-slide">
<img class="uss-hero__image" src="https://dummyimage.com/1200x1200/" alt="Hero image" />
<div class="uss-opacity-layer"></div>
<div class="col-md-8">
<div class="uss-hero__content">
<h2 class="uss-hero__title">
Lorem ipsum dolor sit amet, consecteturd adipiscing elit
</h2>
<p class="uss-hero__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
</p>
<div class="uss-hero__buttons">
<a href="#" class="uss-btn uss-btn--tertiary">
<i class="uss-icon ri-arrow-right-circle-line"></i>Boton Terciario</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</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>