Cabecera de Página

La cabecera de página es el área destacada y principal de una página, pensada para captar la atención inmediata de la persona usuaria. Puede contener accionables como botones o campos de búsqueda.

Uso

Cuándo usar

Debe estar presente en todas las páginas que requieran de una sección principal que funcione como introducción al contenido de la misma.
Para captar la atención de la persona usuaria en páginas de contenido cultural, de turismo, de eventos u otro.

Disposición

Se ubica siempre en la parte superior del sitio, inmediatamente debajo del Encabezado (header) principal, actuando como punto de inicio y orientación del contenido de la página.

En dispositivos desktop

El contenedor de la cabecera ocupa el 100% del ancho de la pantalla, manteniendo el orden de lectura de izquierda a derecha en sentido horizontal de los elementos como formas y multimedia.

Cabecera de página disposición desktop

Responsive en tamaños de pantalla grandes

Entre 1200 a 1400px: Hasta pantallas de 1400px. las alineaciones de texto y forma de la cabecera van a estar en sincronía con las alineaciones del encabezado (header) para compensar los pesos visuales del componente en la interfaz.

Cabecera de página disposición desktop

Entre 1400 a 1920px: Entre estas resoluciones el margen de la cabecera va a ser ligeramente mayor al del Encabezado (header) para mantener las proporciones en tamaños de pantalla mayores.

Cabecera de página disposición desktop

Mayor a 1920px: Para pantallas con resoluciones mayores a 1920 px., la página mantiene un ancho fijo y se extienden márgenes en blanco para ocupar el espacio disponible de la pantalla.

Cabecera de página disposición desktop

En dispositivos tablet

La cabecera ocupa el 100% del ancho de la pantalla, incluyendo los márgenes, manteniendo una disposición vertical de la estructura. Esto quiere decir que, en el orden de lectura, el contenido textual, tanto título como descripción, se van a ubicar primeros, y por debajo la multimedia.

Cabecera de página disposición tablet

En dispositivos Mobile

Al igual que en dispositivos tablet , la cabecera ocupa el 100% del ancho de la pantalla, incluyendo los márgenes, manteniendo una disposición vertical de la estructura.

Cabecera de página disposición mobile

Personalización

Personalización

Uso del componente en Figma

Para los diseñadores en Figma, el componente tiene la posibilidad de intercambiar el color de fondo por alguno de los seis colores definidos que pertenecen a la paleta de colores de Obelisco. Para hacerlo deben seguir los siguientes pasos:

Seleccionar el tema denominado "Color" desde las propiedades del componente. Por defecto, les aparecerá el color cyan.
Con el componente seleccionado, dirigirse a las propiedades de color del componente donde van a encontrar la variables d colores asignados al texto, al fondo y otros. Entre ellas van a encontrar una variable funcional llamada "hero/bg-cyan".
Intercambiá el slot, utilizando la propiedad de instance swap del encabezado (header), por el logo de la marca o el activo digital.

Contenido en esta página

Uso
Disposición
En dispositivos desktop
En dispositivos tablet
En dispositivos Mobile
Personalización

Tipos de formas

Institucional

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

Dinámico

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
            </p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside bg-aside-hero-dark"></div>
</header>

Con multimedia

Con imagen

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.</p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
  <div class="aside">
    <img alt="Hero" loading="lazy" decoding="async" data-nimg="fill" src="/Obelisco-V2/images/hero/multimedia-hero.jpg">
  </div>
</header>

Con video

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.</p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside">
      <video src="/Obelisco-V2/images/video_hero_header.mp4" autoplay="" muted="" loop="" controls="">
        Your browser does not support the video tag.
      </video>
   </div>
</header>

Con gif

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">
            <ol class="breadcrumb m-0">
               <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            </ol>
         </nav>
         <div>
            <h1 class="mb-3">Encabezado de la página</h1>
            <p class="lead m-0">Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.</p>
         </div>
				<div class="btn-hero">
					<button type="button" class="btn btn-secondary">
						Botón
					</button>
					<button type="button" class="btn btn-outline-secondary">
						Botón
					</button>
				</div>
      </div>
   </div>
   <div class="aside">
    <img alt="Hero" loading="lazy" decoding="async" data-nimg="fill" src="/gif_hero_header.gif">
  </div>
</header>

Accionables

Con botones

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

Con campo buscador

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

searchEnlace predeterminado searchEnlace predeterminado searchEnlace predeterminado

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
			<div class="search-container">
				<div class="search-wrapper">
					<label htmlFor="search-home" class="sr-only">Buscar</label>
					<input 
						type="text" 
						id="search-home" 
						maxlength="100"
						autocomplete="off" 
						class="form-control" 
						placeholder="¿En qué te podemos ayudar?" 
						name="search-home" 
					/>
					<div class="search-btn-container">
						<button class="btn btn-lg btn-primary btn-search">
								Buscar
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
									<path d="M11.3137 10.0598H10.6553L10.422 9.83477C11.422 8.6681 11.9387 7.07643 11.6553 5.38477C11.2637 3.0681 9.33034 1.2181 6.99701 0.934766C3.47201 0.501433 0.505339 3.4681 0.938672 6.9931C1.22201 9.32643 3.07201 11.2598 5.38867 11.6514C7.08034 11.9348 8.67201 11.4181 9.83867 10.4181L10.0637 10.6514V11.3098L13.6053 14.8514C13.947 15.1931 14.5053 15.1931 14.847 14.8514C15.1887 14.5098 15.1887 13.9514 14.847 13.6098L11.3137 10.0598ZM6.31367 10.0598C4.23867 10.0598 2.56367 8.38477 2.56367 6.30977C2.56367 4.23477 4.23867 2.55977 6.31367 2.55977C8.38867 2.55977 10.0637 4.23477 10.0637 6.30977C10.0637 8.38477 8.38867 10.0598 6.31367 10.0598Z" fill="white">
									</path>
								</svg>
						</button>
					</div>
					<div class="search-results bg-light">
						<div>
								<a href="#" target="_blank" rel="noopener noreferrer" 
								class="list-link-result">
									<span class="material-symbols-rounded">search</span>
									Enlace predeterminado
								</a>
								<a href="#" target="_blank" rel="noopener noreferrer" 
								class="list-link-result">
									<span class="material-symbols-rounded">search</span>
									Enlace predeterminado
								</a>
							</div>
					</div>
				</div>
			</div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

Con etiquetas

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

Texto de las etiquetas: EtiquetaEtiquetaEtiqueta

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="d-flex flex-wrap column-gap-2 row-gap-4">
        <span class="me-3 fw-semibold">Texto de las etiquetas: </span>
        <span class="badge badge-default">Etiqueta</span>
        <span class="badge badge-default">Etiqueta</span>
        <span class="badge badge-default">Etiqueta</span>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

Con desplegables

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="d-grid d-sm-flex flex-wrap column-gap-2 row-gap-4">
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-dropdown btn-dropdown-border btn-lg"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
            <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
              expand_more
            </span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
          </div>
        </div>
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-dropdown btn-dropdown-border btn-lg"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
            <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
              expand_more
            </span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
          </div>
        </div>
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-dropdown btn-dropdown-border btn-lg"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
            <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
              expand_more
            </span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
            <a class="dropdown-item" href="#">
              <span class="item-text">Opción de navegación</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

Modos de color

Color

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<!-- default -->
<header class="hero bg-content-hero-cyan">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- sky -->
<header class="hero bg-content-hero-sky">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- yellow -->
<header class="hero bg-content-hero-yellow">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- purple -->
<header class="hero bg-content-hero-purple">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- blue -->
<header class="hero bg-content-hero-blue">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>
<!-- red -->
<header class="hero bg-content-hero-red">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-dark"></div>
</header>

Light

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero bg-content-hero-light">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-secondary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-secondary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></div>
</header>

Dark

Encabezado de la página

Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.

<header class="hero bg-content-hero-dark">
  <div class="content corner">
    <div class="d-flex flex-column">
      <nav aria-label="Navegación secundaria">
        <ol class="breadcrumb m-0">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
        </ol>
      </nav>
      <div>
        <h1 class="mb-3">Encabezado de la página</h1>
        <p class="lead m-0">
          Brinda las herramientas necesarias para lograr el bienestar de perros y gatos, además de la
          convivencia armónica y responsable de las mascotas y sus responsables en el espacio público.
        </p>
      </div>
      <div class="btn-hero">
        <button type="button" class="btn btn-light">
          Botón
        </button>
        <button type="button" class="btn btn-outline-light">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></div>
</header>

Variantes

Tipos de formas
Institucional
Dinámico
Con multimedia
Con imagen
Con video
Con gif
Accionables
Con botones
Con campo buscador
Con etiquetas
Con desplegables
Modos de color
Color
Light
Dark

Anatomía

Anatomia de la Cabecera de página

Elemento	Carácter
Migas de pan	Opcional en páginas de inicio. Obligatorio en páginas internas forman una ruta de navegación.
Titulo de la cabecera	Obligatorio, todas las páginas deben contener un título.
Subtitulo de la cabecera	Opcional, puede ser un texto de apoyo al título principal.
Acciones	Opcional, pueden incluir botones, desplegables, etiquetas, campos de búsqueda o ninguno.
Multimedia	Opcional, puede incluir una imagen, video, audio o ninguno.

Especificaciones sobre la multimedia

Multimedia con imagen

Formatos recomendados

JPEG
: Es la opción más conocida, y ofrece buena compatibilidad, y relación tamaño/peso. Los archivos suelen tener las extensiones .jpg, .jpeg
WebP
: Es poco conocido, pero ofrece buena calidad con compresión eficiente. Los archivos tienen la extensión ".WEBP".
AVIF
: Mayor compresión que formatos JPG/JPEG y alta calidad de imagen. Es compatible en la mayoría de los principales navegadores como Chrome, Firefox y Safari.

Tamaños recomendados

Resolución base de 1600x900 (16:9) con peso menor a 400 KB

Mobile
: 640x480px. (proporción 4:3). Peso máximo sugerido: <100 KB
Tablet
: 1024x768 (proporción 4:3). Peso máximo sugerido: <150 KB
Desktop
: 1600x900px. resolución máxima recomendada (proporción 16:9). Peso sugerido <250 KB

Multimedia con video

Formatos recomendados

MP4
: Formato de video ampliamente soportado. Adecuado para videos cortos, fondos animados o clips promocionales. No soporta transparencia; requiere fallback estático si el autoplay falla.
WebM
: Formato de video optimizado para la web, alternativa libre a MP4. Soporte limitado en navegadores antiguos o entornos legacy.

Tamaños recomendados

Resolución base de 1600x900 (16:9) con peso menor a 400 KB

Mobile

: 720x480 px. (proporción 4:3). Peso máximo sugerido: <2 MB

Tablet

: 1280x720 px (proporción 4:3). Peso máximo sugerido: <2 MB

Desktop

: 1920x1080 px. resolución máxima recomendada (proporción 16:9). Peso sugerido <2 MB

Multimedia con GIF

Formatos recomendados

GIF
: Formato de animación simple basado en imágenes de 8 bits. Evitar fondos complejos o loops largos.

Tamaños recomendados

Mobile

: 360×240 px (proporción 4:3). Peso máximo sugerido: <100 KB

Tablet

: 728×400 px (proporción 4:3). Peso máximo sugerido: <150 KB

Desktop

: 1366×600 px resolución máxima recomendada (proporción 16:9). Peso sugerido <250 KB

Variantes

Tipos de formas

Forma dinámica

Forma dinámica del hero

Forma institucional

Forma institucional del hero

Con multimedia

Los enlaces dentro de una alerta se utilizan para una llamada a la acción. Todos los enlaces a la documentación o información deben abrirse en una nueva pestaña.

Con imagen

Forma con imagen del hero

Con video

Forma con video del hero

Con gif

Forma con gif del hero

Accionables

Permite incluir uno o más enlaces accionables ubicados por fuera del texto principal de la alerta. Su función es ofrecer al usuario caminos directos para resolver la situación comunicada, sin interrumpir la lectura del mensaje.

Con botones

Accionables con botones del hero

Con campo de búsqueda

Accionables con campo de búsqueda del hero

Con desplegables de selección

Accionables con desplegables de selección del hero

Con etiquetas

Accionables con etiquetas

Modos de color

El componente ofrece 3 modos de color que definen el fondo del Hero:

Dark
: Para fondos oscuros y alto contraste.
Light
: Para fondos claros y lectura sutil.
Dark
: Para fondos con identidad visual.

El modo Color incluye 6 opciones intercambiables desde las propiedades del componente:

$hero/bg-blue$hero/bg-sky$hero/bg-cyan

$hero/bg-yellow$hero/bg-red$hero/bg-purple

Modo de color dark

Modo de color light

Modo de color cyan

Modo de color sky

Modo de color red

Modo de color yellow

Modo de color purple

Modo de color blue

Contenido en esta página

Anatomía
Especificaciones sobre la multimedia
Multimedia con imagen
Multimedia con video
Multimedia con GIF
Variantes
Tipos de formas
Con multimedia
Accionables
Modos de color

Navegación alternativa

El componente Cabecera de página está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla.

TABENTER

Acciones como accionar botones botones o abrir desplegables se pueden realizar con las teclas Enter o space, y controlar con las flechas del teclado.

Navegacion alternativa de la Cabecera de página

Etiquetado descriptivo

La etiqueta de texto <h1> representa el título con más jerarquía de la página y aparece al inicio del bloque del componente para garantizar orientación, SEO y accesibilidad. Cada página debe tener un único <h1> y no debe repetirse en otras secciones o encabezados internos, para evitar confusión y mantener una estructura semántica clara.

<header class="hero">
   <div class="content wave">
      <div class="d-flex flex-column">
         <nav aria-label="Navegación secundaria">... </nav>
         <div>
            <h1 class="mb-3">Encabezado único de la página</h1>
            <p class="lead m-0">Subtítulo de la página</p>
         </div>
      </div>
   </div>
</header>

Para las variantes con multimedia, el atributo alt es el texto alternativo que reemplaza lo visual y describe el propósito del contenido sin necesidad de verlo.

Si la multimedia es sólo decorativa, es decir que no aporta información clave, el atributo alt puede estar vacío para que el lector de pantalla lo ignore, por ejemplo: <img alt="" aria-hidden="true">

<header class="hero"> 
  <div class="content wave"> ... </div> 
  <div class="aside">
    <img alt="Festival de música al aire libre en Buenos Aires, con banda tocando en escenario" 
    loading="lazy" decoding="async" data-nimg="fill" src="/images/hero/multimedia-hero.jpg">
  </div>
</header>

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.1.2 No Keyboard Trap (Level A)

Si el foco del teclado puede moverse a un componente de la página utilizando una interfaz de teclado, también debe ser posible mover el foco fuera de ese componente usando únicamente la misma interfaz de teclado. Si se requiere algo más que las teclas de flecha, tabulador u otros métodos estándar para salir, se debe informar al usuario sobre el método necesario para mover el foco.

Success Criterion 2.4.4 Link Purpose (In Context) (Level A)

El propósito de cada enlace debe ser determinado solo con el texto del enlace o con el texto del enlace junto con su contexto determinado de forma programática, excepto en los casos en los que el propósito del enlace sea ambiguo para los usuarios en general.

Success Criterion 2.4.4 Link Purpose (In Context) (Level A)

El propósito de cada enlace debe ser determinado solo con el texto del enlace o con el texto del enlace junto con su contexto determinado de forma programática, excepto en los casos en los que el propósito del enlace sea ambiguo para los usuarios en general.

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 los componentes, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Success Criterion 2.4.8. Location (Level AAA)

La información sobre la ubicación del usuario dentro de un conjunto de páginas web está disponible.

Success Criterion 3.2.3 Consistent Navigation (Level AA)

Los mecanismos de navegación que se repiten en varias páginas web dentro de un conjunto de páginas aparecen en el mismo orden relativo cada vez que se repiten, a menos que el usuario inicie un cambio.

Contenido en esta página

Navegación alternativa
Etiquetado descriptivo
Criterios WCAG aplicados