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.


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.

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

Hero
<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/gif_hero_header.gif" autoplay="" muted="" loop="" controls="">
        Your browser does not support the video tag.
      </video>
   </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.

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

Navegación de pie de página