Estilos

Componentes

Formularios

Organismos

Cabecera de Página institucional

La Cabecera de página institucional es el área principal de una página que brinda información introductoria para orientar a la persona usuaria en el propósito de la misma. Puede contener accionables como botones, campos de búsqueda y otros.

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 otras.

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.

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 migas de pan, título, como descripción, se van a ubicar primeros y luego, los accionables.

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 y los accionables deben ocupar el 100% del ancho de la pantalla. El desplegable va a tener el texto centrado y la flecha de despliegue a la derecha del accionable.

Cabecera de página disposición mobile

Contexto de uso

La cabecera de página (hero) se utiliza de manera consistente según el tipo de página, con el objetivo de brindar jerarquía, orientación y contexto al contenido principal.

Variante Dark:

  • El color tiene demasiado peso visual. Puede funcionar para las páginas que requieran un impacto a primer vista.
  • El usuario ingresa al sitio y el header oscuro se presenta como el principal foco e impacto visual.
  • El color es demasiado expresivo.
  • Visualmente atractivo y dominante.
  • Se usaría únicamente para secciones de alta jerarquía.

Variante Light:

  • Color con un leve componente azul que genera personalidad sin convertirse en un color protagonista, esto permite conseguir neutralidad más identidad.
  • No compite con el contenido sino que lo destaca por su contraste.
  • Cumple con el objetivo de la sobriedad, personalidad y neutralidad (revisar concepto de sobriedad respecto de los requisitos).
  • Respeta la jerarquía del contenido (bajo riesgo de competir con el mismo).
  • Tiene un contraste correcto entre fondo y frente.
Tipo de páginaConsideraciones principales
Página de inicioVariante Dark o Multimedia
Página de áreaVariante Dark
Página simpleVariante Light
Página turnos e inscripcionesVariante Light
Página trámitesVariante Light
Perfil institucionalVariante Light
Página noticiasVariante Light

Contenido en esta página

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 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-primary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-primary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></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 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-primary">
          Botón
        </button>
        <button type="button" class="btn btn-outline-primary">
          Botón
        </button>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></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.

<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="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-light"></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 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="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-s-default">Etiqueta</span>
        <span class="badge badge-s-default">Etiqueta</span>
        <span class="badge badge-s-default">Etiqueta</span>
      </div>
    </div>
  </div>
  <div class="aside bg-aside-hero-light"></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.

Opción de navegaciónOpción de navegaciónOpción de navegación
Opción de navegaciónOpción de navegaciónOpción de navegación
Opción de navegaciónOpción de navegaciónOpción de navegación
<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="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-light"></div>
</header>

Con redes sociales

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.

Compartir en redes
<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 class="d-flex flex-wrap align-items-center column-gap-2 row-gap-4">
				<span class="badge badge-s-info">Etiqueta</span>
				<span class="badge badge-s-info">Etiqueta</span>
			</div>

			<div>
				<p class="text-sm text-body-secondary mb-3">Jueves 17 de julio de 2022</p>
				<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 align-items-center column-gap-2 row-gap-4">
				<span class="text-body-secondary me-2">Compartir en redes</span>
				<a href="#" class="shadow-none" target="_blank">
					<i class="bxl bx-facebook-circle o-icon text-primary"></i>
				</a>
				<a href="#" class="shadow-none" target="_blank">
					<i class="bxl bx-instagram o-icon text-primary"></i>
				</a>
				<a href="#" class="shadow-none" target="_blank">
					<i class="bxl bx-twitter-x o-icon text-primary"></i>
				</a>
				<a href="#" class="shadow-none" target="_blank">
					<i class="bxl bx-linkedin-square o-icon text-primary"></i>
				</a>
			</div>
		</div>
	</div>

	<div class="aside bg-aside-hero-light"></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.

<!-- default -->
<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-primary">
          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-primary">
          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-primary">
          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-primary">
          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-primary">
          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-primary">
          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-primary">
          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

Anatomía

Anatomia de la Cabecera de página
ElementoCarácter
1. Migas de panOpcional en páginas de inicio. Obligatorio en páginas internas forman una ruta de navegación.
2. Titulo de la cabeceraObligatorio, todas las páginas deben contener un título.
3. Subtitulo de la cabeceraOpcional, puede ser un texto de apoyo al título principal.
4. AccionesOpcional, pueden incluir botones, desplegables, etiquetas, campos de búsqueda o ninguno.

Variantes

Institucional

Variante Dark

hero institucional dark

Variante Light

hero institucional light

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 desplegables de selección y botón

Accionables con desplegables de selección del hero

Con etiquetas

Accionables con etiquetas

Modos de color

El componente ofrece 2 modos de color que definen la combinación de colores de la cabecera:

  • Dark

    : Para fondos oscuros y alto contraste.

  • Light

    : para fondos claros y lectura sutil.
Ejemplos de modos de color, hero dark

Con desplegables de selección y botón

Ejemplos de modos de color, hero light

Modos de color

El componente ofrece 2 modos de color que definen la combinación de colores de la cabecera:

  • Dark

    : Para fondos oscuros y alto contraste.

  • Light

    : Para fondos claros y lectura sutil.
Modo de color darkModo de color light

Página de noticias

Para el template de Noticias se definió la variante Light. La misma prioriza la legibilidad y jerarquía de elementos, evitando así, distracciones visuales. Esta decisión busca mantener coherencia en el texto, accesibilidad y foco en el contenido.
Esta variante está compuesta por los siguientes elementos:

hero en página de noticias
Tipo de páginaConsideraciones principales
1. Migas de panObligatorio, en página noticia al ser una página interna. Forman una ruta de navegación.
2. EtiquetaObligatorio, todas las páginas deben contener al menos una etiqueta.
3. Fecha de publicaciónObligatorio, todas las páginas deben contener fecha de publicación.
4. Titulo de la cabeceraObligatorio, todas las páginas deben contener un título.
5. Subtitulo de la cabeceraOpcional, puede ser un texto de apoyo al título principal.
6. AccionablesCompartir en redes

Para más detalles sobre estructura, jerarquía de contenido y variantes, consultar la documentación delTemplate de Noticias, donde se describe el comportamiento completo de este tipo de página.

Contenido en esta página

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

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Acciones como accionar 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 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>

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 de pie de página