@ussebastian/kitdigital

<!DOCTYPE html> <html> <head> <title>Kit Digital - Universidad San Sebastían</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/css/theme.css" rel="stylesheet" type="text/css" /> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <script src="/js/main.js" type="module"></script> </head> <body class="on-light"> <div class="container mt-80 mb-160" id="Top"> <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> <script> // window.preventThemeToggle = true; window.addEventListener("message", (event) => { if (event.data.type === "toggleTheme") { console.log(event.data.theme) } }); </script> </body> </html>