@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/carousel-content.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-content.html</h3> </header> <div id="viewer" class="container my-40" style="border: 1px solid var(--border)"> <section data-uss-carousel="uss-carousel-content" data-uss-speed="100" data-uss-loop> <div class="uss-carousel-content__slide"> <div class="uss-carousel-content__img-container"> <img src="https://dummyimage.com/2700x1800/" alt="Dummy" class="uss-carousel-content__img" /> </div> <div class="uss-carousel-content__body"> <div class="uss-carousel-content__body-intro">Metadato introductorio 1</div> <h2 class="uss-carousel-content__body-title">Estamos probando un texto</h2> <p class="uss-carousel-content__body-bajada"> diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros </p> <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding"> Boton terciario<i class="uss-icon ri-arrow-right-line"></i ></a> </div> </div> <div class="uss-carousel-content__slide"> <div class="uss-carousel-content__img-container"> <img src="https://dummyimage.com/1640x800/" alt="Dummy" class="uss-carousel-content__img" /> </div> <div class="uss-carousel-content__body"> <div class="uss-carousel-content__body-intro">Metadato introductorio</div> <h2 class="uss-carousel-content__body-title"> Lorem ipsum dolor sit amet, consecteturd adipiscing elit </h2> <p class="uss-carousel-content__body-bajada"> 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> <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding"> Boton terciario<i class="uss-icon ri-arrow-right-line"></i ></a> </div> </div> <div class="uss-carousel-content__slide"> <div class="uss-carousel-content__img-container"> <img src="https://dummyimage.com/1640x800/" alt="Dummy" class="uss-carousel-content__img" /> </div> <div class="uss-carousel-content__body"> <div class="uss-carousel-content__body-intro">Metadato introductorio</div> <h2 class="uss-carousel-content__body-title"> Lorem ipsum dolor sit amet, consecteturd adipiscing elit </h2> <p class="uss-carousel-content__body-bajada"> 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> <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding"> Boton terciario<i class="uss-icon ri-arrow-right-line"></i ></a> </div> </div> <div class="uss-carousel-content__slide"> <div class="uss-carousel-content__img-container"> <img src="https://dummyimage.com/1640x800/" alt="Dummy" class="uss-carousel-content__img" /> </div> <div class="uss-carousel-content__body"> <div class="uss-carousel-content__body-intro">Metadato introductorio</div> <h2 class="uss-carousel-content__body-title"> Lorem ipsum dolor sit amet, consecteturd adipiscing elit </h2> <p class="uss-carousel-content__body-bajada"> 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> <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding"> Boton terciario<i class="uss-icon ri-arrow-right-line"></i ></a> </div> </div> <div class="uss-carousel-content__slide"> <div class="uss-carousel-content__img-container"> <img src="https://dummyimage.com/1640x800/" alt="Dummy" class="uss-carousel-content__img" /> </div> <div class="uss-carousel-content__body"> <div class="uss-carousel-content__body-intro">Metadato introductorio</div> <h2 class="uss-carousel-content__body-title"> Lorem ipsum dolor sit amet, consecteturd adipiscing elit </h2> <p class="uss-carousel-content__body-bajada"> 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> <a href="#" class="uss-btn uss-btn--tertiary uss-btn--no-padding"> Boton terciario<i class="uss-icon ri-arrow-right-line"></i ></a> </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>