Estilos

Componentes

Formularios

Organismos

Banner

Los banners muestran mensajes importantes y breves, a modo de aviso general, para informar a los usuarios sobre temas de diverso interés. Se muestran al ancho completo.

Uso

Cuándo usar

  • Para comunicar novedades relevantes (por ejemplo, lanzamientos, cambios importantes o accesos destacados).
  • Para reforzar acciones prioritarias que se espera que la persona usuaria conozca al ingresar al sitio.
  • Para mensajes de alcance general, no asociados a una acción puntual del sistema.
  • Cuando el contenido requiere alta visibilidad, pero no justifica interrumpir el flujo con un Modal.

Cuándo no usar

  • Evitar usar modales para informar sobre el estado del sistema. En esos casos utilizar Alertas
  • Para mensajes que requieran una respuesta obligatoria o confirmación explícita. En esos casos utilizar Modal.
  • No usar modales sin la acción de una persona usuaria. Por ejemplo, tocar un botón, un enlace o un ícono.

Contexto de uso

Este componente está diseñado para ser utilizado únicamente en páginas de inicio (Home), donde cumple un rol informativo y de orientación inicial.

Se presentan al ancho completo del contenedor y buscan captar la atención sin interrumpir completamente la navegación.

Uso de banner en cuerpo de página

Los banners pueden disponibilizarse en cualquier parte de la página y funcionan como un elemento más para mostrar información. (Ej: "Lanzamos una nueva versión de nuestro sistema de diseño")
Ademas el banner no puede ubicarse de forma arbitraria: solo puede mostrarse en tres posiciones predefinidas dentro de la estructura de la página:

  1. Debajo del header
  2. Debajo del hero (encabezado de la página)
  3. Arriba del footer
Contexto de uso de componente BannerContexto de uso de componente BannerContexto de uso de componente Banner

Uso de banner con comportamiento fijo (sticky)

Algunos mensajes requieren cierto compromiso del usuario y deben mostrarse hasta que este dé su consentimiento. Estos son métodos de mensajería altamente invasivos, por lo tanto, deben usarse con mesura. Estos mensajes se pueden fijar solo en la parte inferior de la pantalla (EJ: "Aviso de privacidad de Cookies").

Uso de iconografía

El uso de iconografía no es obligatorio, y su utilización debe acompañar conceptualmente cada mensaje. Hay que poner especial atención en no usar íconos de carácter semántico (información, error, advertencia, éxito y similares) que puedan confundir los banners con alertas.

Contenido

Utilizar un máximo de 110 caracteres para las descripciones de los banners. El contenido debe ser claro, simple y conciso. En caso de superar el máximo de caracteres, el texto se truncará (a excepción del Banner con enlace, donde el texto no se trunca y pasa a otra línea).

Contenido del Banner

Contenido en esta página

Simple


  <div class="banner">
    <div class="banner-content">
      <p class="banner-text">
        Esta descripción de banner
        <strong>puede tener énfasis</strong>
        y
        <a href="#" target="_blank" rel="noopener noreferrer">enlace</a>
        .
      </p>
    </div>
  </div>



  <div class="banner banner-dark">
    <div class="banner-content">
      <p class="banner-text">
        Esta descripción de banner
        <strong>puede tener énfasis</strong>
        y
        <a href="#" target="_blank" rel="noopener noreferrer">enlace</a>
        .
      </p>
    </div>
  </div>

Con botón


  <div class="banner">
    <div class="banner-content">
      <span class="material-symbols-rounded o-icon" aria-hidden="true">
        departure_board
      </span>
      <p class="banner-text">
        Este banner tiene un solo botón y
        <strong>puede tener énfasis</strong>
        . Se truncan los textos que superen más de una línea de texto.
      </p>
      <div class="banner-actions">
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-sm btn-primary"
        >
          Botón
        </a>
      </div>
    </div>
  </div>



  <div class="banner banner-dark">
    <div class="banner-content">
      <span class="material-symbols-rounded o-icon" aria-hidden="true">
        departure_board
      </span>
      <p class="banner-text">
        Este banner tiene un solo botón y
        <strong>puede tener énfasis</strong>
        . Se truncan los textos que superen más de una línea de texto.
      </p>
      <div class="banner-actions">
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-sm btn-primary"
        >
          Botón
        </a>
      </div>
    </div>
  </div>

Con botones


  <div class="banner">
    <div class="banner-content">
      <span class="material-symbols-rounded o-icon" aria-hidden="true">
        cookie
      </span>
      <p class="banner-text">
        Este banner tiene dos botones y
        <strong>puede tener énfasis</strong>
        . Se truncan los textos que superen más de una línea de texto.
      </p>
      <div class="banner-actions">
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-sm btn-primary"
        >
          Botón
        </a>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-sm btn-outline-primary"
        >
          Botón
        </a>
      </div>
    </div>
  </div>



  <div class="banner banner-dark">
    <div class="banner-content">
      <span class="material-symbols-rounded o-icon" aria-hidden="true">
        cookie
      </span>
      <p class="banner-text">
        Este banner tiene dos botones y
        <strong>puede tener énfasis</strong>
        . Se truncan los textos que superen más de una línea de texto.
      </p>
      <div class="banner-actions">
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-sm btn-primary"
        >
          Botón
        </a>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="btn btn-sm btn-outline-light"
        >
          Botón
        </a>
      </div>
    </div>
  </div>


Variantes

Anatomía

Anatomia del banner
ElementoCarácter
1. Icono (Opcional) Elemento visual que acompaña y refuerza el mensaje. Debe ser coherente con el contenido y no utilizar íconos semánticos de estado.
2. Descripción Texto principal del banner. Comunica el mensaje de forma clara y concisa. Puede incluir énfasis o enlaces según la variante.
3. EnlaceAcción de navegación integrada al texto. Disponible solo en la variante Banner con enlace y ubicada al final del contenido.
4. Botón PrimarioAcción principal del banner. Representa el camino prioritario para la persona usuaria.
5. Botón SecundarioAcción alternativa o complementaria al botón primario.

Nota: Las acciones (enlace y botones) no se muestran todas juntas. Su presencia y disposición dependen del tipo del banner.

Tipos

Banner con enlace

Las variantes de banner se diferencian por su color de fondo y el tipo de llamado a la acción que contienen.

Ilustración Banner con enlace

Banner con un botón

En la variante con botón la descripción se alinea a la izquierda y la acompaña un botón secundario como llamado a la acción.

Ilustración Banner con un botón

Banner con dos botones

En la variante con botón la descripción se alinea a la izquierda y la acompañan un botón primario y secundario como llamado a la acción. El botón primario siempre se encuentra a la izquierda del secundario.

Ilustración Banner con dos botones

Modos de color

El componente ofrece 2 modos de color:

  • Dark: Pensado para fondos oscuros o contextos donde el banner debe destacarse con alto contraste. Refuerza la visibilidad del mensaje y de las acciones.
  • Light: Diseñado para fondos claros. Ofrece una lectura más sutil y se integra de forma armónica con el resto del contenido de la página.
Ilustración Banner con dos botones

Contenido en esta página

Navegación alternativa

El componente de banner está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando su estado de forma clara.

TABENTER
  • Tab / Shift + Tab
    Permiten navegar únicamente entre los elementos interactivos dentro del banner. (Enlace y botones)
  • Enter
    Activa el elemento interactivo enfocado (enlace o botón).
Navegacion alternativa del banner

Etiquetado descriptivo

Para cumplir con buenas prácticas de accesibilidad (WCAG + WAI-ARIA), se recomienda que:

  • Los enlaces y botones cuenten con textos descriptivos que comuniquen claramente la acción que realizan.
  • El ícono incluido en el banner sea marcado como decorativo mediante aria-hidden="true", siempre que no aporte información relevante.
  • El texto del banner se anuncie de forma continua por los lectores de pantalla, respetando el orden visual y semántico.

Criterios WCAG aplicados

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Success Criterion 1.4.4 Resize Text (Level AA)

Excepto por los subtítulos e imágenes de texto, el texto puede redimensionarse hasta un 200 % sin tecnología de asistencia, sin pérdida de contenido ni funcionalidad.

Success Criterion 1.4.10 Reflow (Level AA)

El contenido puede presentarse sin pérdida de información o funcionalidad y sin necesidad de desplazarse en dos dimensiones, siempre que el desplazamiento vertical se ajuste a un ancho equivalente a 320 píxeles CSS y el desplazamiento horizontal a una altura equivalente a 256 píxeles CSS, excepto en aquellas partes del contenido que requieran un diseño bidimensional para su uso o significado.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.4.3 Focus Order (Level A)

Al navegar por las migas de pan con el teclado, el foco en los enlaces permanece en orden lógico en relación con los demás enlaces en la ruta de navegación.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible. Cuando utiliza un teclado para navegar por las migas de pan, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Success Criterion 4.1.2 Name, Role, Value (Level A)

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Contenido en esta página

Navegación de pie de página