# Banners

> Campañas, inscripciones y comunicaciones.

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

Un banner destaca algo dentro de la página: una inscripción, una campaña o una comunicación, con una sola acción. Para la parte de arriba de la página, con el título, usa Hero.

## Banner gradient

```html
<div class="rounded-ccs bg-ccs-banner p-8 sm:p-10 text-white relative overflow-hidden shadow-ccs dark:bg-ccs-banner-dark">
  <div class="absolute inset-0 opacity-20" style="background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 1px, transparent 1px 12px);"></div>
  <div class="relative grid sm:grid-cols-2 gap-6 items-center">
    <div>
      <div class="text-xs uppercase tracking-widest opacity-80 font-semibold">Boletín semanal</div>
      <h4 class="text-3xl font-semibold leading-tight mt-2">Mantente al día con el comercio nacional.</h4>
      <p class="mt-3 text-sm opacity-90 max-w-md">Suscríbete y recibe semanalmente análisis, oportunidades y novedades regulatorias.</p>
    </div>
    <div class="flex flex-col sm:flex-row gap-3 sm:justify-end">
      <input type="email" placeholder="tu@empresa.cl" class="h-12 px-4 rounded-ccs bg-white/15 placeholder:text-white/70 text-white border border-white/30 focus:bg-white/25 outline-none flex-1 sm:max-w-xs"/>
      <button class="h-12 px-6 rounded-ccs bg-white text-ccs-blue font-semibold hover:bg-ccs-bg shadow-ccs-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white transition active:scale-95 motion-reduce:active:scale-100">Suscribirme</button>
    </div>
  </div>
</div>
```

## Banner split con imagen

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden grid md:grid-cols-2 shadow-ccs-sm dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="ph aspect-[16/10] md:aspect-auto md:h-full grid place-items-center outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10">FOTO · Auditorio</div>
  <div class="p-8 flex flex-col justify-center">
    <div class="text-xs uppercase tracking-widest text-ccs-success font-semibold mb-2 dark:text-ccs-dark-success">Evento destacado</div>
    <h4 class="text-2xl font-semibold leading-tight">Asamblea Anual de Socios 2026</h4>
    <p class="mt-3 text-sm text-ccs-slate leading-relaxed dark:text-ccs-dark-text-2">Encuentro anual donde la institución rinde cuenta y presenta los lineamientos del próximo periodo.</p>
    <div class="mt-5 flex flex-wrap gap-3">
      <button class="h-11 px-5 rounded-ccs bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue 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">Inscribirse</button>
      <button class="h-11 px-5 rounded-ccs border border-ccs-line-strong text-ccs-ink font-medium hover:border-ccs-blue hover:text-ccs-blue dark:text-ccs-dark-text dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-text dark:hover:border-ccs-dark-text 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">Ver programa</button>
    </div>
  </div>
</div>
```

## Banner sutil inline

```html
<div class="rounded-ccs border border-ccs-blue/20 bg-ccs-blue/[0.04] p-5 flex flex-wrap items-center gap-4 dark:border-ccs-dark-accent/20 dark:bg-ccs-dark-accent/10">
  <div class="w-10 h-10 rounded-lg bg-ccs-icon grid place-items-center dark:bg-ccs-icon-dark">
    <iconify-icon icon="solar:shield-check-bold" class="shrink-0 text-[20px] text-white" aria-hidden="true"></iconify-icon>
  </div>
  <div class="flex-1 min-w-[200px]">
    <div class="text-sm font-semibold">¿Aún no eres socio?</div>
    <div class="text-sm text-ccs-slate dark:text-ccs-dark-text-2">Conoce los beneficios y forma parte de la red gremial líder del país.</div>
  </div>
  <button class="h-10 px-5 rounded-ccs bg-ccs-blue text-white text-sm font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue 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">Hazte socio</button>
</div>
```