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.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

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>


Navegación de pie de página