# Sidebar

> Navegación lateral para apps, portales y dashboards.

Categoría: Navegación · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Sidebar expandido

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden shadow-ccs-sm dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold px-4 py-2 bg-ccs-bg border-b border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">Expandido · 260px</div>
  <div class="flex h-[440px]">
    <aside class="w-[260px] bg-white border-r border-ccs-line flex flex-col dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
      <div class="h-16 px-5 flex items-center border-b border-ccs-line dark:border-ccs-dark-line">
        <div class="ccs-mark text-lg"><span class="c1">CCS</span><span class="c2">·</span><span class="text-ccs-slate font-medium text-xs tracking-wide uppercase dark:text-ccs-dark-text-2">App</span></div>
      </div>
      <div class="px-4 py-3 mx-3 mt-3 rounded-lg bg-ccs-bg flex items-center gap-3 dark:bg-ccs-dark-overlay">
        <div class="ph w-9 h-9 rounded-full grid place-items-center text-[8px] shrink-0">AV</div>
        <div class="min-w-0">
          <div class="text-sm font-semibold leading-tight truncate">Andrés V.</div>
          <div class="text-xs text-ccs-slate truncate dark:text-ccs-dark-text-2">Andina Retail SpA</div>
        </div>
      </div>
      <nav class="flex-1 overflow-y-auto px-3 py-4 text-sm">
        <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold px-3 mb-2 dark:text-ccs-dark-text-2">General</div>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg bg-ccs-blue/10 text-ccs-blue font-medium dark:text-ccs-dark-accent dark:bg-ccs-dark-accent/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>
          Inicio
        </a>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink mt-1 dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
          Comités
          <span class="ml-auto inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-ccs-blue text-white text-xs font-semibold dark:bg-ccs-blue-mid">3</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink mt-1 dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 2v3H4v17h16V5h-3V2M3 9h18"/></svg>
          Eventos
        </a>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink mt-1 dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm0 0v6h6"/></svg>
          Documentos
        </a>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink mt-1 dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 13h2v8H3v-8Zm6-4h2v12H9V9Zm6-6h2v18h-2V3Zm-9 18h14"/></svg>
          Estadísticas
        </a>
        <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold px-3 mb-2 mt-5 dark:text-ccs-dark-text-2">Mi empresa</div>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 21V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v16M4 21h16M19 21V9a1 1 0 0 0-1-1h-2"/></svg>
          Perfil empresa
        </a>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink mt-1 dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M16 11h6m-3-3v6"/></svg>
          Integrantes
        </a>
        <a href="#" class="flex items-center gap-3 px-3 h-10 rounded-lg text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink mt-1 dark:text-ccs-dark-text-2 dark:hover:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09c0 .66.39 1.25 1 1.51.59.24 1.27.11 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.26.61.85 1 1.51 1H21a2 2 0 1 1 0 4h-.09c-.66 0-1.25.39-1.51 1Z"/></svg>
          Configuración
        </a>
      </nav>
      <div class="border-t border-ccs-line p-3 flex items-center gap-2 dark:border-ccs-dark-line">
        <button class="flex-1 h-9 rounded-lg text-sm text-ccs-slate hover:bg-ccs-bg flex items-center justify-center gap-2 dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">
          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
          Cerrar sesión
        </button>
      </div>
    </aside>
    <div class="flex-1 bg-ccs-bg/40 p-6 dark:bg-ccs-dark-overlay/40">
      <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold mb-3 dark:text-ccs-dark-text-2">Vista del contenido</div>
      <div class="rounded-lg bg-white border border-ccs-line h-full p-4 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
        <div class="h-3 rounded-full bg-ccs-bg w-1/2 mb-3 dark:bg-ccs-dark-overlay"></div>
        <div class="h-3 rounded-full bg-ccs-bg w-3/4 mb-3 dark:bg-ccs-dark-overlay"></div>
        <div class="h-3 rounded-full bg-ccs-bg w-2/3 dark:bg-ccs-dark-overlay"></div>
      </div>
    </div>
  </div>
</div>
```

## Sidebar colapsado

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden shadow-ccs-sm dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold px-4 py-2 bg-ccs-bg border-b border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">Colapsado · 72px</div>
  <div class="flex h-[440px]">
    <aside class="w-[72px] bg-ccs-ink text-white flex flex-col items-center py-4">
      <div class="w-10 h-10 rounded-lg bg-ccs-icon grid place-items-center mb-6 shrink-0 dark:bg-ccs-icon-dark">
        <span class="font-bold text-sm text-white">C</span>
      </div>
      <nav class="flex flex-col items-center gap-1 text-white/70 w-full px-2">
        <button class="w-12 h-12 rounded-lg bg-white/10 text-white grid place-items-center relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100" title="Inicio">
          <span class="absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full bg-ccs-green-br"></span>
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>
        </button>
        <button class="w-12 h-12 rounded-lg hover:bg-white/10 hover:text-white grid place-items-center relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100" title="Comités">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
          <span class="absolute top-2 right-2 w-2 h-2 rounded-full bg-ccs-green-br"></span>
        </button>
        <button class="w-12 h-12 rounded-lg hover:bg-white/10 hover:text-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100" title="Eventos">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 2v3H4v17h16V5h-3V2M3 9h18"/></svg>
        </button>
        <button class="w-12 h-12 rounded-lg hover:bg-white/10 hover:text-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100" title="Documentos">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm0 0v6h6"/></svg>
        </button>
        <button class="w-12 h-12 rounded-lg hover:bg-white/10 hover:text-white grid place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100" title="Estadísticas">
          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 13h2v8H3v-8Zm6-4h2v12H9V9Zm6-6h2v18h-2V3Zm-9 18h14"/></svg>
        </button>
      </nav>
      <div class="mt-auto flex flex-col items-center gap-2">
        <button class="w-12 h-12 rounded-lg hover:bg-white/10 grid place-items-center text-white/70 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100" title="Notificaciones">
          <span class="relative">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>
            <span class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-ccs-error-fill text-white text-xs font-bold grid place-items-center dark:bg-ccs-dark-error-fill">5</span>
          </span>
        </button>
        <button class="w-10 h-10 rounded-full overflow-hidden ph grid place-items-center text-[8px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100" title="Andrés V.">AV</button>
      </div>
    </aside>
    <div class="flex-1 bg-ccs-bg/40 p-6 dark:bg-ccs-dark-overlay/40">
      <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold mb-3 dark:text-ccs-dark-text-2">Vista del contenido</div>
      <div class="rounded-lg bg-white border border-ccs-line h-full p-4 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
        <div class="h-3 rounded-full bg-ccs-bg w-1/2 mb-3 dark:bg-ccs-dark-overlay"></div>
        <div class="h-3 rounded-full bg-ccs-bg w-3/4 mb-3 dark:bg-ccs-dark-overlay"></div>
        <div class="h-3 rounded-full bg-ccs-bg w-2/3 dark:bg-ccs-dark-overlay"></div>
      </div>
    </div>
  </div>
</div>
```

## Sidebar de documentación

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden shadow-ccs-sm dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold px-4 py-2 bg-ccs-bg border-b border-ccs-line dark:text-ccs-dark-text-2 dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">Documentación · con secciones agrupadas</div>
  <div class="flex">
    <aside class="w-[280px] border-r border-ccs-line py-4 text-sm dark:border-ccs-dark-line">
      <div class="px-5">
        <search aria-label="Páginas" class="block w-full"><div class="flex w-full items-center rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25 h-10"><span class="pl-3 text-ccs-slate dark:text-ccs-dark-text-2"><iconify-icon icon="solar:magnifier-outline" class="shrink-0 text-[18px]" aria-hidden="true"></iconify-icon></span><label for="sb-filtro" class="sr-only">Filtrar páginas</label><input id="sb-filtro" type="search" autocomplete="off" enterkeyhint="search" placeholder="Filtrar páginas…" class="peer h-full min-w-0 flex-1 bg-transparent pl-2 pr-2 text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none text-base sm:text-sm"><button type="button" data-filtro-borrar aria-label="Borrar filtro" class="mr-1 peer-placeholder-shown:hidden grid h-8 w-8 shrink-0 place-items-center rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:close-outline" class="shrink-0 text-[16px]" aria-hidden="true"></iconify-icon></button></div></search>
      </div>
      <div class="mt-5 px-3">
        <div class="text-xs uppercase tracking-widest text-ccs-slate font-semibold px-3 mb-2 dark:text-ccs-dark-text-2">Fundamentos</div>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Color</a>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-blue bg-ccs-blue/5 font-medium border-l-2 border-ccs-blue -ml-0.5 pl-[10px] dark:text-ccs-dark-accent dark:border-ccs-dark-accent dark:bg-ccs-dark-accent/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Tipografía</a>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Iconografía</a>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Forma y sombra</a>
      </div>
      <div class="mt-4 px-3">
        <div class="text-xs uppercase tracking-widest text-ccs-slate font-semibold px-3 mb-2 dark:text-ccs-dark-text-2">Componentes</div>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg flex items-center justify-between dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Botones <span class="text-xs tabular-nums text-ccs-slate dark:text-ccs-dark-text-2">12</span></a>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg flex items-center justify-between dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Cards <span class="text-xs tabular-nums text-ccs-slate dark:text-ccs-dark-text-2">8</span></a>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg flex items-center justify-between dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Tablas <span class="text-xs tabular-nums text-ccs-slate dark:text-ccs-dark-text-2">4</span></a>
        <a href="#" class="block px-3 py-1.5 rounded-lg text-ccs-ink hover:bg-ccs-bg flex items-center justify-between dark:text-ccs-dark-text dark:hover:bg-ccs-dark-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Formularios <span class="inline-flex items-center px-1.5 h-4 rounded-full text-xs font-semibold bg-ccs-success-soft text-ccs-success dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success">NEW</span></a>
      </div>
    </aside>
    <div class="flex-1 p-8">
      <div class="text-xs uppercase tracking-wider text-ccs-slate font-semibold mb-2 dark:text-ccs-dark-text-2">Fundamentos</div>
      <h4 class="text-2xl font-semibold leading-tight">Tipografía</h4>
      <p class="text-sm text-ccs-slate mt-3 max-w-lg dark:text-ccs-dark-text-2">Una sola familia (Inter), cinco pesos. Neogrotesca, neutra y pensada para pantalla.</p>
    </div>
  </div>
</div>
```