01/Estructura

Barra de anuncio

Franja superior para estados, avisos cortos o información de contacto. Va antes de la navbar.

Con estado

El punto cb-dot pulsa con el color de acento. Usa cb-dot--static para quitar la animación.

HTML

<div class="cb-topbar">
  <div class="cb-topbar__inner">
    <div class="cb-topbar__status"><span class="cb-dot" aria-hidden="true"></span>Todos los sistemas operativos</div>
    <div class="cb-topbar__aside">Soporte de lunes a viernes · <a class="cb-topbar__link" href="#">Contacto</a></div>
  </div>
</div>

Estados de color

HTML

<div class="cb-topbar">
  <div class="cb-topbar__inner">
    <div class="cb-topbar__status"><span class="cb-dot cb-dot--warning" aria-hidden="true"></span>Mantenimiento programado el sábado a las 22:00</div>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-topbar`	Contenedor con borde inferior y texto pequeño.
`.cb-topbar__inner`	Fila centrada con el ancho máximo del contenedor.
`.cb-topbar__status`	Texto principal con espacio para el punto.
`.cb-topbar__aside`	Texto secundario. Se oculta por debajo de 600px.
`.cb-topbar__link`	Enlace subrayado dentro de la barra.
`.cb-dot`	Indicador que pulsa. Variantes `--success`, `--warning`, `--danger`, `--static`.

Accesibilidad

Marca el punto con aria-hidden="true": el texto ya comunica el estado.
La animación del punto se detiene con prefers-reduced-motion.