# Listas

> Bulleted, numeradas, con check y de definición.

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).

## Bulleted

```html
<div>
  <ul class="space-y-2 text-sm text-ccs-ink dark:text-ccs-dark-text">
    <li class="flex gap-3"><span class="mt-2 w-1.5 h-1.5 rounded-full bg-ccs-blue shrink-0 dark:bg-ccs-dark-accent"></span>Identidad institucional clara y consistente.</li>
    <li class="flex gap-3"><span class="mt-2 w-1.5 h-1.5 rounded-full bg-ccs-blue shrink-0 dark:bg-ccs-dark-accent"></span>Jerarquía visual bien definida.</li>
    <li class="flex gap-3"><span class="mt-2 w-1.5 h-1.5 rounded-full bg-ccs-blue shrink-0 dark:bg-ccs-dark-accent"></span>Facilidad de navegación en cualquier dispositivo.</li>
    <li class="flex gap-3"><span class="mt-2 w-1.5 h-1.5 rounded-full bg-ccs-blue shrink-0 dark:bg-ccs-dark-accent"></span>Contenido al servicio del usuario.</li>
  </ul>
</div>
```

## Numerada

```html
<div>
  <ol class="space-y-3 text-sm">
    <li class="flex gap-3"><span class="w-6 h-6 rounded-full bg-ccs-blue text-white text-xs font-semibold grid place-items-center shrink-0 dark:bg-ccs-blue-mid">1</span><span>Definir lineamientos visuales y de marca.</span></li>
    <li class="flex gap-3"><span class="w-6 h-6 rounded-full bg-ccs-blue text-white text-xs font-semibold grid place-items-center shrink-0 dark:bg-ccs-blue-mid">2</span><span>Validar tokens con stakeholders.</span></li>
    <li class="flex gap-3"><span class="w-6 h-6 rounded-full bg-ccs-blue text-white text-xs font-semibold grid place-items-center shrink-0 dark:bg-ccs-blue-mid">3</span><span>Implementar componentes en Tailwind.</span></li>
    <li class="flex gap-3"><span class="w-6 h-6 rounded-full bg-ccs-blue text-white text-xs font-semibold grid place-items-center shrink-0 dark:bg-ccs-blue-mid">4</span><span>Documentar uso y casos.</span></li>
  </ol>
</div>
```

## Con check

```html
<div>
  <ul class="space-y-2 text-sm">
    <li class="flex gap-3"><span class="w-5 h-5 rounded-full bg-ccs-success-soft text-ccs-success grid place-items-center shrink-0 mt-0.5 dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg></span>Acceso a tu cuenta en línea</li>
    <li class="flex gap-3"><span class="w-5 h-5 rounded-full bg-ccs-success-soft text-ccs-success grid place-items-center shrink-0 mt-0.5 dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg></span>Suscripción al boletín semanal</li>
    <li class="flex gap-3"><span class="w-5 h-5 rounded-full bg-ccs-success-soft text-ccs-success grid place-items-center shrink-0 mt-0.5 dark:bg-ccs-dark-success-fill/10 dark:text-ccs-dark-success"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 5 5L20 7"/></svg></span>Descuentos en eventos y cursos</li>
    <li class="flex gap-3"><span class="w-5 h-5 rounded-full bg-ccs-line text-ccs-slate grid place-items-center shrink-0 mt-0.5 dark:text-ccs-dark-text-2 dark:bg-ccs-dark-line"><svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 6l12 12M18 6 6 18"/></svg></span>Espacios de coworking <span class="text-ccs-slate dark:text-ccs-dark-text-2">(próximamente)</span></li>
  </ul>
</div>
```

## Definición

```html
<div>
  <dl class="space-y-4 text-sm">
    <div><dt class="font-semibold">Central CCS</dt><dd class="text-ccs-slate mt-0.5 mono text-sm dark:text-ccs-dark-text-2">+56 2 2360 7000</dd></div>
    <div><dt class="font-semibold">Ventas</dt><dd class="text-ccs-slate mt-0.5 mono text-sm dark:text-ccs-dark-text-2">+56 2 2835 6842</dd></div>
    <div><dt class="font-semibold">Soporte</dt><dd class="text-ccs-slate mt-0.5 mono text-sm dark:text-ccs-dark-text-2">+56 2 2360 7001</dd></div>
    <div><dt class="font-semibold">Contacto</dt><dd class="text-ccs-slate mt-0.5 mono text-sm dark:text-ccs-dark-text-2">contacto@ccs.cl</dd></div>
  </dl>
</div>
```