# Separador

> Línea horizontal o vertical entre grupos de contenido, también con texto o fecha.

Categoría: Contenido · Solar v0.8.0

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

## Guía: Cuándo usarlo

- Entre grupos de contenido que el espacio no alcanza a separar.
- No entre cada fila de una lista corta: el espacio basta.
- Con texto, para "o" entre dos formas de hacer lo mismo.

## Horizontal y vertical

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><div class="space-y-1"><h4 class="text-sm font-semibold">Solar</h4><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Sistema de diseño de la CCS.</p></div><hr class="my-4 border-ccs-line dark:border-ccs-dark-line" /><div class="flex items-center h-5 gap-4 text-sm"><a href="#" class="hover:underline 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">Componentes</a><div role="separator" aria-orientation="vertical" class="w-px h-full bg-ccs-line dark:bg-ccs-dark-line"></div><a href="#" class="hover:underline 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">Patrones</a><div role="separator" aria-orientation="vertical" class="w-px h-full bg-ccs-line dark:bg-ccs-dark-line"></div><a href="#" class="hover:underline 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">Docs</a></div></div></div>
```

## Con texto

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><div role="separator" aria-label="o" class="flex items-center gap-3 text-xs text-ccs-slate dark:text-ccs-dark-text-2"><span class="h-px flex-1 bg-ccs-line dark:bg-ccs-dark-line"></span>o continúa con<span class="h-px flex-1 bg-ccs-line dark:bg-ccs-dark-line"></span></div></div></div>
```

## Con fecha

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-sm"><div role="separator" class="flex items-center gap-3 text-xs font-medium text-ccs-slate dark:text-ccs-dark-text-2"><span class="h-px flex-1 bg-ccs-line dark:bg-ccs-dark-line"></span>Hoy<span class="h-px flex-1 bg-ccs-line dark:bg-ccs-dark-line"></span></div></div></div>
```