@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
129 lines (124 loc) • 5.88 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/other/icons.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/other/icons.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<section class="my-12 w-100">
<div>
<div class="h2 mb-12">uss-icon--xl</div>
<div class="flex flex-wrap gap-24 mb-12">
<i class="uss-icon uss-icon--xl ri-home-line"> </i
><i class="uss-icon uss-icon--xl ri-mail-line"> </i
><i class="uss-icon uss-icon--xl ri-chat-1-line"> </i
><i class="uss-icon uss-icon--xl ri-file-copy-line"> </i
><i class="uss-icon uss-icon--xl ri-add-line"> </i
><i class="uss-icon uss-icon--xl ri-subtract-line"> </i
><i class="uss-icon uss-icon--xl ri-arrow-left-circle-line"> </i
><i class="uss-icon uss-icon--xl ri-arrow-right-circle-line"> </i
><i class="uss-icon uss-icon--xl ri-arrow-left-s-line"> </i
><i class="uss-icon uss-icon--xl ri-arrow-right-s-line"> </i
><i class="uss-icon uss-icon--xl ri-information-line"> </i
><i class="uss-icon uss-icon--xl ri-star-line"> </i
><i class="uss-icon uss-icon--xl ri-close-line"> </i>
</div>
</div>
<div>
<div class="h2 mb-12">uss-icon--lg</div>
<div class="flex flex-wrap gap-24 mb-12">
<i class="uss-icon uss-icon--lg ri-home-line"> </i
><i class="uss-icon uss-icon--lg ri-mail-line"> </i
><i class="uss-icon uss-icon--lg ri-chat-1-line"> </i
><i class="uss-icon uss-icon--lg ri-file-copy-line"> </i
><i class="uss-icon uss-icon--lg ri-add-line"> </i
><i class="uss-icon uss-icon--lg ri-subtract-line"> </i
><i class="uss-icon uss-icon--lg ri-arrow-left-circle-line"> </i
><i class="uss-icon uss-icon--lg ri-arrow-right-circle-line"> </i
><i class="uss-icon uss-icon--lg ri-arrow-left-s-line"> </i
><i class="uss-icon uss-icon--lg ri-arrow-right-s-line"> </i
><i class="uss-icon uss-icon--lg ri-information-line"> </i
><i class="uss-icon uss-icon--lg ri-star-line"> </i
><i class="uss-icon uss-icon--lg ri-close-line"> </i>
</div>
</div>
<div>
<div class="h2 mb-12">uss-icon (default)</div>
<div class="flex flex-wrap gap-24 mb-12">
<i class="uss-icon ri-home-line"> </i><i class="uss-icon ri-mail-line"> </i
><i class="uss-icon ri-chat-1-line"> </i><i class="uss-icon ri-file-copy-line"> </i
><i class="uss-icon ri-add-line"> </i><i class="uss-icon ri-subtract-line"> </i
><i class="uss-icon ri-arrow-left-circle-line"> </i
><i class="uss-icon ri-arrow-right-circle-line"> </i
><i class="uss-icon ri-arrow-left-s-line"> </i><i class="uss-icon ri-arrow-right-s-line"> </i
><i class="uss-icon ri-information-line"> </i><i class="uss-icon ri-star-line"> </i
><i class="uss-icon ri-close-line"> </i>
</div>
</div>
<div>
<div class="h2 mb-12">uss-icon--sm</div>
<div class="flex flex-wrap gap-24 mb-12">
<i class="uss-icon ri-home-line"> </i><i class="uss-icon uss-icon--sm ri-mail-line"> </i
><i class="uss-icon uss-icon--sm ri-chat-1-line"> </i
><i class="uss-icon uss-icon--sm ri-file-copy-line"> </i
><i class="uss-icon uss-icon--sm ri-add-line"> </i
><i class="uss-icon uss-icon--sm ri-subtract-line"> </i
><i class="uss-icon uss-icon--sm ri-arrow-left-circle-line"> </i
><i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"> </i
><i class="uss-icon uss-icon--sm ri-arrow-left-s-line"> </i
><i class="uss-icon uss-icon--sm ri-arrow-right-s-line"> </i
><i class="uss-icon uss-icon--sm ri-information-line"> </i
><i class="uss-icon uss-icon--sm ri-star-line"> </i
><i class="uss-icon uss-icon--sm ri-close-line"> </i>
</div>
</div>
<div>
<div class="h2 mb-12">uss-icon--xs</div>
<div class="flex flex-wrap gap-24 mb-12">
<i class="uss-icon uss-icon--xs ri-home-line"> </i
><i class="uss-icon uss-icon--xs ri-mail-line"> </i
><i class="uss-icon uss-icon--xs ri-chat-1-line"> </i
><i class="uss-icon uss-icon--xs ri-file-copy-line"> </i
><i class="uss-icon uss-icon--xs ri-add-line"> </i
><i class="uss-icon uss-icon--xs ri-subtract-line"> </i
><i class="uss-icon uss-icon--xs ri-arrow-left-circle-line"> </i
><i class="uss-icon uss-icon--xs ri-arrow-right-circle-line"> </i
><i class="uss-icon uss-icon--xs ri-arrow-left-s-line"> </i
><i class="uss-icon uss-icon--xs ri-arrow-right-s-line"> </i
><i class="uss-icon uss-icon--xs ri-information-line"> </i
><i class="uss-icon uss-icon--xs ri-star-line"> </i
><i class="uss-icon uss-icon--xs ri-close-line"> </i>
</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>