# Ítem

> Fila con medio, título, descripción y acciones: variantes, tamaños, grupo, como enlace y con menú.

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

- Para listas de cosas del mismo tipo con una acción cada una.
- Si las filas tienen varias columnas que se comparan, usa Tabla de datos.
- Si la fila entera lleva a otra página, va como enlace y sin otros botones.

## Básico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 w-full max-w-lg"><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Verificación en dos pasos</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Protege tu cuenta con un código adicional al entrar.</p></div><div class="flex items-center gap-2 shrink-0"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Activar</button></div></div></div>
```

## Variantes

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-lg space-y-3"><div class="flex items-center rounded-ccs  gap-4 p-4 "><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Sin borde</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Para listas dentro de una card.</p></div></div><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 "><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Contorno</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Para filas sueltas en la página.</p></div></div><div class="flex items-center rounded-ccs bg-ccs-bg dark:bg-ccs-dark-surface gap-4 p-4 "><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Suave</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Para destacar una fila sin usar color.</p></div></div></div></div>
```

## Tamaños

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-lg space-y-3"><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 "><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Normal</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Título y descripción</p></div></div><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-3 px-4 py-3 "><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Chico</div></div></div><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-2.5 px-3 py-2 "><iconify-icon icon="solar:bell-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Extra chico</div></div></div></div></div>
```

## Con ícono

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 w-full max-w-lg"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:shield-warning-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Revisa la seguridad de tu cuenta</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Último acceso desde un equipo nuevo hace 2 horas.</p></div><div class="flex items-center gap-2 shrink-0"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Revisar</button></div></div></div>
```

## Con avatar

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 w-full max-w-lg"><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">CR</span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Carolina Rojas</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Jefa de ventas, Empresa de Ejemplo</p></div><div class="flex items-center gap-2 shrink-0"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:user-plus-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Invitar</button></div></div></div>
```

## Con imagen

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 w-full max-w-lg"><span class="ph w-16 h-16 shrink-0 rounded-lg" role="img" aria-label="Imagen del evento"></span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Seminario de comercio digital</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Jueves 12 de noviembre · 09:00 a 13:00</p></div><div class="flex items-center gap-2 shrink-0"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Inscribirme</button></div></div></div>
```

## Grupo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="list" class="w-full max-w-lg rounded-ccs border border-ccs-line dark:border-ccs-dark-line divide-y divide-ccs-line dark:divide-ccs-dark-line"><div role="listitem"><div class="flex items-center rounded-ccs  gap-4 p-4 "><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">CR</span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Carolina Rojas</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">carolina@empresa.cl</p></div><div class="flex items-center gap-2 shrink-0"><button type="button" aria-label="Agregar a Carolina Rojas"  class="inline-grid place-items-center w-8 h-8 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:add-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div></div><div role="listitem"><div class="flex items-center rounded-ccs  gap-4 p-4 "><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">MP</span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Matías Pérez</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">matias@empresa.cl</p></div><div class="flex items-center gap-2 shrink-0"><button type="button" aria-label="Agregar a Matías Pérez"  class="inline-grid place-items-center w-8 h-8 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:add-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div></div><div role="listitem"><div class="flex items-center rounded-ccs  gap-4 p-4 "><span class="inline-flex shrink-0 items-center justify-center rounded-full bg-ccs-hover font-medium text-ccs-ink dark:bg-ccs-dark-hover dark:text-ccs-dark-text w-10 h-10 text-sm ">JS</span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Josefa Soto</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">josefa@empresa.cl</p></div><div class="flex items-center gap-2 shrink-0"><button type="button" aria-label="Agregar a Josefa Soto"  class="inline-grid place-items-center w-8 h-8 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:add-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div></div></div></div>
```

## Como enlace

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-lg space-y-3"><a href="#" class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 hover:bg-ccs-bg dark:hover:bg-ccs-dark-surface 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 "><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:buildings-2-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Datos de la empresa</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">Razón social, RUT y dirección</p></div><div class="flex items-center gap-2 shrink-0"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></div></a><a href="#" class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 hover:bg-ccs-bg dark:hover:bg-ccs-dark-surface 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 "><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:users-group-rounded-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">Personas</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">3 personas con acceso</p></div><div class="flex items-center gap-2 shrink-0"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></div></a></div></div>
```

## Con menú

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex items-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line gap-4 p-4 w-full max-w-lg"><span class="grid place-items-center w-10 h-10 shrink-0 rounded-lg border border-ccs-line dark:border-ccs-dark-line bg-ccs-bg dark:bg-ccs-dark-surface"><iconify-icon icon="solar:document-text-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></span><div class="flex-1 min-w-0 space-y-0.5"><div class="text-sm font-medium">informe-anual-2026.pdf</div><p class="text-sm text-ccs-slate dark:text-ccs-dark-text-2 line-clamp-2">PDF · 2,4 MB · subido hoy</p></div><div class="flex items-center gap-2 shrink-0"><button type="button" aria-label="Acciones de informe-anual-2026.pdf" aria-haspopup="menu" class="inline-grid place-items-center w-8 h-8 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:menu-dots-bold" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div></div>
```