<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GNexus UI Kit</title>
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/assets/libs/highlight/styles/base16/summerfruit-dark.min.css">
<link rel="stylesheet" href="/css/demo.css">
<link rel="icon" type="image/svg+xml" href="/assets/imgs/gnexus-mark.svg">
<meta name="theme-color" content="#16161E">
</head>
<body>
<header class="nav-topbar">
<button class="nav-topbar-toggle" type="button" data-navigation-toggle aria-controls="docs-navigation" aria-expanded="false">
<i class="ph ph-sidebar-simple"></i>
<span>Menu</span>
</button>
<div class="nav-topbar-brand">
<img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
<span>GNexus UI Kit</span>
</div>
<div class="nav-topbar-current" data-docs-current-section>Typography</div>
</header>
<main class="container docs-page">
<header class="section docs-intro">
<h1 class="contrast">GNexus UI Kit</h1>
<p>Набор базовых элементов интерфейса.</p>
</header>
<div class="docs-layout">
<div class="nav-drawer-backdrop" data-navigation-close></div>
<aside class="nav-drawer" id="docs-navigation" data-navigation-drawer aria-label="Навигация по UI kit" aria-hidden="true" inert>
<header class="nav-drawer-header">
<div>
<div class="nav-drawer-title">Sections</div>
<div class="nav-drawer-subtitle">Component library</div>
</div>
<button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
<i class="ph ph-x"></i>
</button>
</header>
<nav class="nav-drawer-body">
<ul class="list list-nav">
<li class="list-item list-item-active">
<a class="list-action" href="#typography">
<span class="list-label"><i class="ph ph-text-aa"></i> Typography</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#colors">
<span class="list-label"><i class="ph ph-palette"></i> Palette</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#buttons">
<span class="list-label"><i class="ph ph-hand-pointing"></i> Buttons</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#forms">
<span class="list-label"><i class="ph ph-textbox"></i> Forms</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#utilities">
<span class="list-label"><i class="ph ph-ruler"></i> Utilities</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#editable-string">
<span class="list-label"><i class="ph ph-pencil-simple"></i> Editable String</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#navigation-overlays">
<span class="list-label"><i class="ph ph-stack"></i> Navigation & Overlays</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#navigation-shell">
<span class="list-label"><i class="ph ph-sidebar-simple"></i> Navigation Shell</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#lists">
<span class="list-label"><i class="ph ph-list-bullets"></i> Lists</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#badges">
<span class="list-label"><i class="ph ph-tag"></i> Badges</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#alerts">
<span class="list-label"><i class="ph ph-warning"></i> Alerts</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#tables">
<span class="list-label"><i class="ph ph-table"></i> Tables</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#data-patterns">
<span class="list-label"><i class="ph ph-chart-bar"></i> Data Patterns</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#page-header">
<span class="list-label"><i class="ph ph-browser"></i> Page Header</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#description-list">
<span class="list-label"><i class="ph ph-list-dashes"></i> Key-Value</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#progress">
<span class="list-label"><i class="ph ph-activity"></i> Progress</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#steps">
<span class="list-label"><i class="ph ph-list-numbers"></i> Steps</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#chips">
<span class="list-label"><i class="ph ph-tag"></i> Chips</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#avatar">
<span class="list-label"><i class="ph ph-user-circle"></i> Avatar</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#timeline">
<span class="list-label"><i class="ph ph-clock"></i> Timeline</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#accordion">
<span class="list-label"><i class="ph ph-caret-down"></i> Accordion</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#drawer">
<span class="list-label"><i class="ph ph-sidebar"></i> Drawer</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#toasts">
<span class="list-label"><i class="ph ph-notification"></i> Toasts</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#cards">
<span class="list-label"><i class="ph ph-squares-four"></i> Cards</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#modals">
<span class="list-label"><i class="ph ph-browser"></i> Modals</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#confirm-dialog">
<span class="list-label"><i class="ph ph-warning"></i> Confirm Dialog</span>
</a>
</li>
</ul>
</nav>
<footer class="nav-drawer-footer">
<span>GNexus UI Kit v0.2</span>
<span>© GNexus</span>
</footer>
</aside>
<div class="docs-content">
@@include("partials/typography.html")
@@include("partials/palette.html")
@@include("partials/buttons.html")
@@include("partials/forms.html")
@@include("partials/utilities.html")
@@include("partials/editable-string.html")
@@include("partials/navigation-overlays.html")
@@include("partials/navigation-shell.html")
@@include("partials/lists.html")
@@include("partials/badges.html")
@@include("partials/alerts.html")
@@include("partials/tables.html")
@@include("partials/data-patterns.html")
@@include("partials/page-header.html")
@@include("partials/description-list.html")
@@include("partials/progress.html")
@@include("partials/steps.html")
@@include("partials/chips.html")
@@include("partials/avatar.html")
@@include("partials/timeline.html")
@@include("partials/accordion.html")
@@include("partials/drawer.html")
@@include("partials/toasts.html")
@@include("partials/cards.html")
@@include("partials/modals.html")
@@include("partials/confirm-dialog.html")
</div>
</div>
</main>
<script src="/assets/libs/highlight/highlight.min.js"></script>
<script src="/js/gnexus-ui-kit.js"></script>
</body>
</html>
