@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/buttons-variations.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/buttons-variations.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"> <h4>Botón primario</h4> <div class="col"> <p>Default</p> <a href="#" class="uss-btn uss-btn--primary mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary mb-24"> Botón primario </a> </div> <div class="col"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--primary hover mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary hover mb-24"> Botón primario </a> </div> <div class="col"> <p>Active</p> <a href="#" class="uss-btn uss-btn--primary active mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary active mb-24"> Botón primario </a> </div> <div class="col"> <p>Disable</p> <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled="true"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary mb-24" aria-disabled="true"> Botón primario </a> </div> </div> <div class="row flex mb-40"> <h4>Botón primario - Medium</h4> <div class="col"> <p>Default</p> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24"> Botón primario </a> </div> <div class="col"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium hover mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium hover mb-24"> Botón primario </a> </div> <div class="col"> <p>Active</p> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium active mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium active mb-24"> Botón primario </a> </div> <div class="col"> <p>Disable</p> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24" aria-disabled="true"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24" aria-disabled> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--primary uss-btn--medium mb-24" aria-disabled="true"> Botón primario </a> </div> </div> <div class="row flex mb-40"> <h4>Botón primario - small</h4> <div class="col"> <p>Default</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24"> Botón primario </a> </div> </div> <div class="col"> <p>Hover</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--primary hover mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary hover mb-24"> Botón primario </a> </div> </div> <div class="col"> <p>Active</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--primary active mb-24"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary active mb-24"> Botón primario </a> </div> </div> <div class="col"> <p>Disable</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24" aria-disabled="true"> Botón primario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24" aria-disabled> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón primario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--primary mb-24" aria-disabled="true"> Botón primario </a> </div> </div> </div> <div class="row mb-40"> <h4>Botón secundario</h4> <div class="col"> <p>Default</p> <a href="#" class="uss-btn uss-btn--secondary mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary mb-24"> Botón secundario </a> </div> <div class="col"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary hover mb-24"> Botón secundario </a> </div> <div class="col"> <p>Active</p> <a href="#" class="uss-btn uss-btn--secondary active mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary active mb-24"> Botón secundario </a> </div> <div class="col"> <p>Disable</p> <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario </a> </div> </div> <div class="row mb-40"> <h4>Botón secundario - medium</h4> <div class="col"> <p>Default</p> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24"> Botón secundario </a> </div> <div class="col"> <p>Hover</p> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary hover mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary hover mb-24"> Botón secundario </a> </div> <div class="col"> <p>Active</p> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary active mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary active mb-24"> Botón secundario </a> </div> <div class="col"> <p>Disable</p> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--medium uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario </a> </div> </div> <div class="row mb-40"> <h4>Botón secundario - small</h4> <div class="col"> <p>Default</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24"> Botón secundario </a> </div> </div> <div class="col"> <p>Hover</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary hover mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary hover mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary hover mb-24"> Botón secundario </a> </div> </div> <div class="col"> <p>Active</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary active mb-24"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary active mb-24"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary active mb-24"> Botón secundario </a> </div> </div> <div class="col"> <p>Disable</p> <div class="flex flex-col items-start"> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario <i class="uss-icon ri-arrow-right-circle-line"></i> </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-circle-line"></i> Botón secundario </a> <a href="#" class="uss-btn uss-btn--small uss-btn--secondary mb-24" aria-disabled="true"> Botón secundario </a> </div> </div> </div> <div class="row mb-40"> <h4>Botón terciario</h4> <div class="col"> <p>Default</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Hover</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary hover mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Active</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary active mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Disable</p> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario </a> </div> </div> </div> <div class="row mb-40"> <h4>Botón terciario - medium</h4> <div class="col"> <p>Default</p> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Hover</p> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary hover mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary hover mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary hover mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Active</p> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary active mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary active mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary active mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Disable</p> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--medium uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario </a> </div> </div> </div> <div class="row mb-40"> <h4>Botón terciario - small</h4> <div class="col"> <p>Default</p> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Hover</p> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary hover mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary hover mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary hover mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Active</p> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary active mb-24"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary active mb-24"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary active mb-24"> Botón terciario </a> </div> </div> <div class="col"> <p>Disable</p> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario <i class="uss-icon ri-arrow-right-line"></i> </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24" aria-disabled="true"> <i class="uss-icon ri-arrow-right-line"></i> Botón terciario </a> </div> <div class="block"> <a href="#" class="uss-btn uss-btn--small uss-btn--tertiary mb-24" aria-disabled="true"> Botón terciario </a> </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>