Obelisco V2

https://gcba.github.io/Obelisco-V2
Admin
Obelisco V2 is the design system and component library of the Government of the City of Buenos...
Tokens:215,833
Snippets:1,337
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Implement bordered list steps

Source: https://gcba.github.io/Obelisco-V2/components/list-step

Use the list-steps-light class to create a list of steps with a border.

```html
<ul class="list-steps list-steps-light">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>
```

--------------------------------

### Buttons with Icons

Source: https://gcba.github.io/Obelisco-V2/components/button

Examples of buttons featuring icons positioned to the left, right, or as standalone icons with aria-labels.

```html
// Botón con texto e icono a la izquierda
<button type="button" class="btn btn-primary btn-sm">
  <span className="material-symbols-rounded o-icon" aria-hidden="true">add_2</span> Botón
</button>

<button type="button" class="btn btn-primary">
  <span className="material-symbols-rounded o-icon" aria-hidden="true">add_2</span> Botón
</button>

<button type="button" class="btn btn-primary btn-lg">
  <span className="material-symbols-rounded o-icon" aria-hidden="true">add_2</span> Botón
</button>

// Botón con texto e icono a la derecha
<button type="button" class="btn btn-primary btn-sm">
  Botón
  <span class="material-symbols-rounded o-icon" aria-hidden="true"> arrow_forward </span>
</button>

<button type="button" class="btn btn-primary">
  Botón
  <span class="material-symbols-rounded o-icon" aria-hidden="true"> arrow_forward </span>
</button>

<button type="button" class="btn btn-primary btn-lg">
  Botón
  <span class="material-symbols-rounded o-icon" aria-hidden="true"> arrow_forward </span>
</button>

// Botón sin texto, con icono
<button type="button" class="btn btn-primary btn-sm" aria-label="Botón">
  <span class="material-symbols-rounded o-icon" aria-hidden="true">add</span>
</button>

<button type="button" class="btn btn-primary" aria-label="Botón">
  <span class="material-symbols-rounded o-icon" aria-hidden="true">add</span>
</button>

<button type="button" class="btn btn-primary btn-lg" aria-label="Botón">
  <span class="material-symbols-rounded o-icon" aria-hidden="true">add</span>
</button>
```

--------------------------------

### Instalar Obelisco V2 con gestores de paquetes

Source: https://gcba.github.io/Obelisco-V2/getting-started/installation

Comandos para añadir la librería como dependencia local en el proyecto.

```bash
npm i @gcba/obelisco-v2
```

```bash
yarn add @gcba/obelisco-v2
```

```bash
pnpm i @gcba/obelisco-v2
```

--------------------------------

### Initialize Calendar Instance

Source: https://gcba.github.io/Obelisco-V2/components/calendar

Configures and initializes a calendar instance with a specific start date and event list.

```javascript
// define la instancia de un calendario
	createCalendarInstance('#calendar', {
		startDate: '2026-02', // formato: año-mes, es el mes que se va a mostrar, de no pasarlo se mostrara el actual
		events: EVENTS_LIST,
	});
```

--------------------------------

### Implement numbered pagination

Source: https://gcba.github.io/Obelisco-V2/components/pagination

Use this structure for standard numbered pagination. The example shows an active state on the first page with an ellipsis for truncated navigation.

```html
<nav aria-label="Ejemplo de paginado numerado inicial">
  <ul class="pagination">
    <li class="page-item" style="opacity: 0;">
      <span class="page-link">
        <span class="page-previous-icon" aria-hidden="true"></span>
        <span class="page-previous-text">Anterior</span>
      </span>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item no-events"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="page-next-text">Siguiente</span>
        <span class="page-next-icon" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>
```

--------------------------------

### Implementar accesos simples

Source: https://gcba.github.io/Obelisco-V2/components/access

Muestra la estructura básica de un acceso utilizando clases de estado para hover, focus y active.

```html
  <a href="#" class="list-group-item item-sm">
    <div class="access-content">
      <span class="access-title">Acceso</span>
    </div>
  </a>

  <a href="#" class="list-group-item item-sm hover">
    <div class="access-content">
      <span class="access-title">Acceso</span>
    </div>
  </a>

  <a href="#" class="list-group-item item-sm focus">
    <div class="access-content">
      <span class="access-title">Acceso</span>
    </div>
  </a>

  <a href="#" class="list-group-item item-sm active">
    <div class="access-content">
      <span class="access-title">Acceso</span>
    </div>
  </a>
```

--------------------------------

### Implement Header with Login and Search

Source: https://gcba.github.io/Obelisco-V2/components/header

Standard header configuration including a search form and login buttons for both mobile and desktop views.

```html
<header class="o-header navbar" role="banner">
    <a href="#main" class="skip-to-main-content-link">
    Saltar al contenido principal
    </a>
    <div class="container header-container">
    <a href="https://buenosaires.gob.ar" class="navbar-brand">
        <img class="d-none d-xl-block" src="/Obelisco-V2/images/logo_ba.svg" alt="Gobierno de la Ciudad de Buenos Aires - Inicio" />
        <img class="d-xl-none" src="/Obelisco-V2/images/logo_ba_mobile.svg" alt="Gobierno de la Ciudad de Buenos Aires - Inicio" />
    </a>
    <div class="navbar-login-mobile">
        <a class="btn btn-lg btn-icon btn-outline-tertiary" href="#" target="_blank">
        <span class="material-symbols-rounded" aria-hidden="true">
            person
        </span>
        <span class="btn-text">Ingresar</span>
        </a>
    </div>
    <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarContent12"
        aria-controls="navbarContent12"
        aria-expanded="false"
        aria-label="Menú"
    ></button>
    <div class="collapse navbar-collapse" id="navbarContent12">
        <div class="navbar-content">
        <div class="navbar-search">
            <form class="form-search">
            <label for="header-search" class="form-label sr-only">
                Buscador
            </label>
            <div class="search-container">
                <input
                type="search"
                class="form-control input-search input-search-with-button"
                id="header-search"
                placeholder="Buscador"
                />
                <button class="reset" type="reset" aria-label="Borrar"></button>
                <button class="button-search" type="submit" aria-label="Buscar"></button>
            </div>
            </form>
        </div>
        <div class="navbar-login">
            <a class="btn btn-lg btn-outline-tertiary" href="#" target="_blank">
            <span class="material-symbols-rounded" aria-hidden="true">
                person
            </span>
            <span class="btn-text">Ingresar</span>
            </a>
        </div>
        </div>
    </div>
    </div>
    <div class="header-backdrop"></div>
</header>
```

--------------------------------

### Implementación básica del componente de pasos

Source: https://gcba.github.io/Obelisco-V2/components/steps-form

Estructura HTML básica para mostrar el progreso de un formulario con indicadores visuales.

```html
<div class="stepper-content">
  <div class="stepper">
    <h2 class="step-title">Nombre del paso</h2>
    <p class="step-subtitle">Paso siguiente: Nombre del paso 3</p>
    <div class="steps">
      <div class="steps-items">
        <div class="steps-item active"></div>
        <div class="steps-item active"></div>
        <div class="steps-item"></div>
        <div class="steps-item"></div>
        <div class="steps-item"></div>
      </div>
      <span class="steps-detail">Paso 2 de 5</span>
    </div>
  </div>
</div>
```

--------------------------------

### Implementación de Tooltips con botones

Source: https://gcba.github.io/Obelisco-V2/components/tooltip

Ejemplos de configuración de tooltips en diferentes direcciones (superior, derecha, izquierda, inferior) utilizando atributos de datos en elementos span que envuelven botones.

```html
//SUPERIOR
<span
  data-direction="top-right"
  data-tooltip='Esta es la descripción de un tooltip "arriba-derecha".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">turn_right</span>
  </button>
</span>
<span
  data-direction="top"
  data-tooltip='Esta es la descripción de un tooltip "arriba".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">arrow_upward</span>
  </button>
</span>
<span
  data-direction="top-left"
  data-tooltip='Esta es la descripción de un tooltip "arriba-izquierda".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">turn_left</span>
  </button>
</span>

//DERECHA
<span
  data-direction="right-bottom"
  data-tooltip='Esta es la descripción de un tooltip "derecha-abajo".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">south_east</span>
  </button>
</span>
<span
  data-direction="right"
  data-tooltip='Esta es la descripción de un tooltip "derecha".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">arrow_forward</span>
  </button>
</span>
<span
  data-direction="right-top"
  data-tooltip='Esta es la descripción de un tooltip "derecha-arriba".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">north_east</span>
  </button>
</span>


//IZQUIERDA
<span
  data-direction="left-bottom"
  data-tooltip='Esta es la descripción de un tooltip "izquierda-abajo".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">south_west</span>
  </button>
</span>
<span
  data-direction="left"
  data-tooltip='Esta es la descripción de un tooltip "izquierda".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">keyboard_backspace</span>
  </button>
</span>
<span
  data-direction="left-top"
  data-tooltip='Esta es la descripción de un tooltip "izquierda-arriba".'
  tabindex="0"
>
  <button
    type="button"
    class="btn btn-primary btn-icon"
    aria-label="Botón"
  >
    <span class="material-symbols-rounded o-icon" aria-hidden="true">north_west</span>
  </button>
</span>


//INFERIOR
<span
  data-direction="bottom-right"
  data-tooltip='Esta es la descripción de un tooltip "abajo-derecha".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">subdirectory_arrow_right</span>
  </button>
</span>
<span
  data-direction="bottom"
  data-tooltip='Esta es la descripción de un tooltip "abajo".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">arrow_downward</span>
  </button>
</span>
<span
  data-direction="bottom-left"
  data-tooltip='Esta es la descripción de un tooltip "abajo-izquierda".'
  tabindex="0"
>
  <button type="button" class="btn btn-primary btn-icon" aria-label="Botón">
    <span class="material-symbols-rounded o-icon" aria-hidden="true">subdirectory_arrow_left</span>
  </button>
</span>
```

--------------------------------

### Actualizar Obelisco V2

Source: https://gcba.github.io/Obelisco-V2/getting-started/installation

Comando para actualizar una instalación existente a la última versión disponible.

```bash
npm update @gcba/obelisco-v2
```

--------------------------------

### Implementar pestañas simples

Source: https://gcba.github.io/Obelisco-V2/components/tabs

Estructura HTML básica para crear un sistema de navegación por pestañas utilizando clases de Bootstrap y atributos ARIA para accesibilidad.

```html
<nav class="tabs-box" aria-label="Navegación por pestañas">
    <ul class="nav nav-pills tabs" id="simple-myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          data-bs-toggle="tab"
          data-bs-target="#panel-content-1"
          type="button"
          role="tab"
          aria-controls="panel-content-1"
          aria-selected="false"
          id="tab-1"
        >
          Pestaña 1
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link"
          data-bs-toggle="tab"
          data-bs-target="#panel-content-2"
          type="button"
          role="tab"
          aria-controls="panel-content-2"
          aria-selected="false"
          id="tab-2"
        >
          Pestaña 2
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button
          class="nav-link active"
          data-bs-toggle="tab"
          data-bs-target="#panel-content-3"
          type="button"
          role="tab"
          aria-controls="panel-content-3"
          aria-selected="true"
          id="tab-3"
        >
          Pestaña 3
        </button>
      </li>
    </ul>
  </nav>
  <div class="tab-content" id="simple-myTabContent">
    <div class="tab-pane fade" id="panel-content-1" role="tabpanel" aria-labelledby="tab-1">
      Contenido Pestaña 1
    </div>
    <div class="tab-pane fade" id="panel-content-2" role="tabpanel" aria-labelledby="tab-2">
      Contenido Pestaña 2
    </div>
    <div class="tab-pane fade show active" id="panel-content-3" role="tabpanel" aria-labelledby="tab-3">
      Contenido Pestaña 3
    </div>
  </div>
```

--------------------------------

### Implementar lista de enlaces básica

Source: https://gcba.github.io/Obelisco-V2/components/list-link

Estructura HTML estándar para el componente de lista de enlaces utilizando una clase contenedora y elementos de anclaje.

```html
<div class="list-link">
    <h3 class="list-link-title">Este es el título de una lista de enlaces</h3>
    <a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
    <a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
    <a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
    <a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
    <a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
</div>
```

--------------------------------

### Implementar Collapse con información

Source: https://gcba.github.io/Obelisco-V2/components/collapse

Muestra un resumen de datos financieros o boletas dentro de un contenedor colapsable.

```html
<div class="accordion">
    <div class="accordion-item">
        <button
            class="accordion-button collapsed"
            type="button" 
            data-bs-toggle="collapse"
            data-bs-target="#collapseContentInfo"
            aria-expanded="false" 
            aria-controls="collapseContentInfo"
        >
            <span class="collapse-label">Total a pagar</span>
            <span class="collapse-title">$450,00</span>
        </button>
        <div id="collapseContentInfo" class="accordion-collapse collapse">
            <div class="accordion-body">
                <small class="text-success">$200,00</small>
                <span class="d-block headline-md">Solicitud de informes varios</span>
                <small>Boleta N° 2549-48758798</small>
                <hr />
                <small class="text-success">$250,00</small>
                <span class="d-block headline-md">Ecoparque</span>
                <small>Boleta N° 2549-48758798</small>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Implementar colapsable con volanta, descripción e icono

Source: https://gcba.github.io/Obelisco-V2/components/collapse

Incluye elementos adicionales como volanta y subtítulo dentro del botón de activación.

```html
<div class="accordion">
    <div class="accordion-item">
        <button
            class="accordion-button collapsed"
            type="button" 
            data-bs-toggle="collapse"
            data-bs-target="#collapseHeader"
            aria-expanded="false" 
            aria-controls="collapseHeader"
        >
            <span class="material-symbols-rounded o-icon" aria-hidden="true">topic</span>
            <span class="collapse-label">Volanta</span>
            <span class="collapse-title">Título</span>
            <span class="collapse-subtitle">Descripción</span>
        </button>
        <div id="collapseHeader" class="accordion-collapse collapse">
            <div class="accordion-body">
                <p>Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.</p>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Implementar Collapse con lista seleccionable

Source: https://gcba.github.io/Obelisco-V2/components/collapse

Utiliza una estructura de acordeón para presentar opciones de pago mediante botones de radio dentro de un menú desplegable.

```html
<div class="accordion">
    <div class="accordion-item">
        <button
            class="accordion-button collapsed"
            type="button" 
            data-bs-toggle="collapse"
            data-bs-target="#collapseContentList"
            aria-expanded="false" 
            aria-controls="collapseContentList"
        >
            <span class="collapse-title">Tarjeta de crédito / débito</span>
            <span class="collapse-subtitle">VISA, MasterCard, AMEX, CABAL, Maestro</span>
        </button>
        <div id="collapseContentList" class="accordion-collapse collapse">
            <div class="accordion-body">
                <form class="accordion-form">
                    <div class="form-radio reverse">
                        <input
                            class="form-radio-input"
                            type="radio"
                            name="credit_card"
                            id="visa"
                        />
                        <label class="form-radio-label" for="visa">
                            <div class="label-content">
                            <i class="bxf bxl-visa label-icon"></i>
                            <small class="label-top">Volanta</small>
                            <span class="label-title">Visa Débito ****1234</span>
                            <small class="label-subtitle">Heraldo Paez</small>
                            </div>
                        </label>
                    </div>
                    <hr />
                    <div class="form-radio reverse">
                        <input
                            class="form-radio-input"
                            type="radio"
                            name="credit_card"
                            id="master"
                        />
                        <label class="form-radio-label" for="master">
                            <div class="label-content">
                                <i class="bxf bxl-mastercard label-icon"></i>
                                <small class="label-top">Volanta</small>
                                <span class="label-title">MasterCard Crédito ****5678</span>
                                <small class="label-subtitle">Heraldo Paez</small>
                            </div>
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Implementación de botones XS con iconos

Source: https://gcba.github.io/Obelisco-V2/components/button

Ejemplos de botones de tamaño extra pequeño (XS) que contienen iconos de material symbols.

```html
<button type="button" class="btn btn-xs" aria-label="Editar">
  <span
    class="material-symbols-rounded o-icon"
    aria-hidden="true"
  >
    edit
  </span>
</button>
<button type="button" class="btn btn-xs" aria-label="Editar">
  <span className="material-symbols-rounded o-icon" aria-hidden="true">delete</span>
</button>
<button type="button" class="btn btn-xs" aria-label="Editar">
  <span
    class="material-symbols-rounded o-icon"
    aria-hidden="true"
  >
    visibility
  </span>
</button>
<button type="button" class="btn btn-xs" aria-label="Editar">
  <span className="material-symbols-rounded o-icon" aria-hidden="true">
		download_2
	</span>
</button>
```

--------------------------------

### Implementar accesos con descripción

Source: https://gcba.github.io/Obelisco-V2/components/access

Extiende el componente de acceso incluyendo un párrafo con la clase access-text para descripciones opcionales.

```html
  <a href="#" class="list-group-item item-sm">
    <div class="access-content">
      <span class="access-title">Acceso</span>
      <p class="access-text">Descripción (Opcional)</p>
    </div>
  </a>

  <a href="#" class="list-group-item item-sm hover">
    <div class="access-content">
      <span class="access-title">Acceso</span>
      <p class="access-text">Descripción (Opcional)</p>
    </div>
  </a>

  <a href="#" class="list-group-item item-sm focus">
    <div class="access-content">
      <span class="access-title">Acceso</span>
      <p class="access-text">Descripción (Opcional)</p>
    </div>
  </a>

  <a href="#" class="list-group-item item-sm active">
    <div class="access-content">
      <span class="access-title">Acceso</span>
      <p class="access-text">Descripción (Opcional)</p>
    </div>
  </a>
```

--------------------------------

### Implementar migas de pan con fondo claro

Source: https://gcba.github.io/Obelisco-V2/components/breadcrumb

Estructura HTML básica para el componente de migas de pan, incluyendo el truncamiento de texto para enlaces largos.

```html
<nav aria-label="Ruta de navegación">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Inicio</a>
        </li>
        <li class="breadcrumb-item">
          <a href="#">Página intermedia con mucho mucho texto</a>
        </li>
        <li class="breadcrumb-item">
          <a href="#">Intermedia</a>
        </li>
        <li class="breadcrumb-item">
          <a href="#">Página anterior</a>
        </li>
      </ol>
    </nav>
```

--------------------------------

### Implement Small List Step

Source: https://gcba.github.io/Obelisco-V2/components/list-step

Use the list-steps-sm class to render a small version of the list step component.

```html
<ul class="list-steps list-steps-sm">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>
```

--------------------------------

### Estructura básica HTML para página de libro

Source: https://gcba.github.io/Obelisco-V2/templates/pagina-de-libro

Plantilla base HTML que incluye las etiquetas meta necesarias y la configuración de codificación para una página de libro.

```html
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <title>Página de libro</title>

  <!-- Obelisco -->
  <!-- OBELISCO CDN's -->
  <!-- Obelisco -->

</head>
```

--------------------------------

### Implementar pestañas pequeñas

Source: https://gcba.github.io/Obelisco-V2/components/tabs

Utiliza la clase nav-link-sm para renderizar pestañas de tamaño reducido.

```html
<nav class="tabs-box" aria-label="Navegación por pestañas">
  <ul class="nav nav-pills tabs" id="small-myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button
        class="nav-link nav-link-sm active"
        data-bs-toggle="tab"
        data-bs-target="#panel-small-content-1"
        type="button"
        role="tab"
        aria-controls="panel-small-content-1"
        aria-selected="true"
        id="tab-small-1"
      >
        <div class="nav-icon">
          <span>Pestaña chica 1</span>
          <span class="material-symbols-rounded o-icon" aria-hidden="true">description</span>
        </div>
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button
        class="nav-link nav-link-sm"
        data-bs-toggle="tab"
        data-bs-target="#panel-small-content-2"
        type="button"
        role="tab"
        aria-controls="panel-small-content-2"
        aria-selected="false"
        id="tab-small-2"
      >
        <div class="nav-icon">
          <span>Pestaña chica 2</span>
          <span class="material-symbols-rounded o-icon" aria-hidden="true">description</span>
        </div>
      </button>
    </li>
  </ul>
</nav>
<div class="tab-content" id="small-myTabContent">
  <div
    class="tab-pane fade show active"
    id="panel-small-content-1"
    role="tabpanel"
    aria-labelledby="tab-small-1"
  >
    Contenido Pestaña 1
  </div>
  <div class="tab-pane fade" id="panel-small-content-2" role="tabpanel" aria-labelledby="tab-small-2">
    Contenido Pestaña 2
  </div>
</div>
```

--------------------------------

### Implementar navegación con borde

Source: https://gcba.github.io/Obelisco-V2/components/nav-horizontal

Añade la clase border-link para aplicar un borde a los elementos de navegación.

```html

  <nav aria-label="Navegación horizontal">
    <ul class="nav flex-row nav-pills">
      <li class="nav-item">
        <a class="nav-link border-link" href="#">
          <div class="nav-icon">
            <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
            <span>Navegación</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link border-link active" href="#">
          <div class="nav-icon">
            <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
            <span>Activo</span>
          </div>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link border-link" href="#">
          <div class="nav-icon">
            <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
            <span>Navegación</span>
          </div>
        </a>
      </li>
    </ul>
  </nav>

```

--------------------------------

### Implementar lista de accesos

Source: https://gcba.github.io/Obelisco-V2/components/access-organism

Estructura avanzada que incluye una lista de opciones de acceso y un enlace de acceso grande adicional.

```html
<div class="group-access">
  <div class="card-access">
    <div class="card-access-body">
      <div>
        <h4 class="card-access-title">Título del organismo de máximo 2 líneas</h4>
        <p class="card-access-text">Descripción del organismo de máximo 3 líneas.</p>
      </div>
      <span class="card-access-icon descriptive">N°</span>
    </div>
    <hr class="clearfix" />
    <div class="container-access">
      <div class="access-option">
        <a href="#" class="list-group-item item-sm">
          <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
          <div class="access-content">
            <span class="access-title">Acceso</span>
            <p class="access-text">Descripción (Opcional)</p>
          </div>
        </a>
        <a href="#" class="list-group-item item-sm">
          <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
          <div class="access-content">
            <span class="access-title">Acceso</span>
            <p class="access-text">Descripción (Opcional)</p>
          </div>
        </a>
        <a href="#" class="list-group-item item-sm">
          <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
          <div class="access-content">
            <span class="access-title">Acceso</span>
            <p class="access-text">Descripción (Opcional)</p>
          </div>
        </a>
      </div>
    </div>
    <hr class="clearfix" />
    <a href="#" class="list-group-item card-item">
      <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
      <div class="access-content">
        <span class="access-title">Acceso grande</span>
      </div>
    </a>
  </div>
</div>
```

--------------------------------

### Implementar un acordeón de selección única

Source: https://gcba.github.io/Obelisco-V2/components/collapse

Estructura HTML para un componente de acordeón donde solo un elemento puede estar expandido a la vez, utilizando clases de Bootstrap.

```html
<div class="accordion" id="accordionUniqueSelection">
    <div class="accordion-item">
        <button
            class="accordion-button collapsed"
            type="button" 
            data-bs-toggle="collapse"
            data-bs-target="#collapseOneUniqueSelection"
            aria-expanded="false" 
            aria-controls="collapseOneUniqueSelection"
        >
            <span class="collapse-label">Selección única</span>
            <span class="collapse-title">Item colapsable #1</span>
        </button>
        <div id="collapseOneUniqueSelection" class="accordion-collapse collapse" data-bs-parent="#accordionUniqueSelection">
            <div class="accordion-body">
              <p>Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <button
            class="accordion-button collapsed"
            type="button" 
            data-bs-toggle="collapse"
            data-bs-target="#collapseTwoUniqueSelection"
            aria-expanded="false" 
            aria-controls="collapseTwoUniqueSelection"
        >
            <span class="collapse-label">Selección única</span>
            <span class="collapse-title">Item colapsable #2</span>
        </button>
        <div id="collapseTwoUniqueSelection" class="accordion-collapse collapse" data-bs-parent="#accordionUniqueSelection">
            <div class="accordion-body">
              <p>Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <button
            class="accordion-button collapsed"
            type="button" 
            data-bs-toggle="collapse"
            data-bs-target="#collapseThreeUniqueSelection"
            aria-expanded="false" 
            aria-controls="collapseThreeUniqueSelection"
        >
            <span class="collapse-label">Selección única</span>
            <span class="collapse-title">Item colapsable #3</span>
        </button>
        <div id="collapseThreeUniqueSelection" class="accordion-collapse collapse" data-bs-parent="#accordionUniqueSelection">
            <div class="accordion-body">
              <p>Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.</p>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Implement Header Navigation and User Menu

Source: https://gcba.github.io/Obelisco-V2/components/header

HTML structure for a header containing navigation links and a user profile dropdown menu.

```html
</span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                    <span class="item-text">Enlace de navegación</span>
                    </a>
                    <a class="dropdown-item item-link" href="#">
                    <span class="item-text">Ver más</span>
                    <span class="material-symbols-rounded" aria-hidden="true">arrow_forward</span>
                    </a>
                </div>
                </li>
                <li class="nav-item">
                <a class="nav-link nav-link-lg" href="#">
                    <span>Navegación</span>
                </a>
                </li>
                <li class="nav-item">
                <a class="nav-link nav-link-lg" href="#">
                    <span>Navegación</span>
                </a>
                </li>
                <li class="nav-item">
                <a class="nav-link nav-link-lg" href="#">
                    <span>Navegación</span>
                </a>
                </li>
                <li class="nav-item">
                <a class="nav-link nav-link-lg" href="#">
                    <span>Navegación</span>
                </a>
                </li>
            </ul>
            </nav>
        </div>
        <div class="navbar-user-mobile">
            <nav>
            <p class="navbar-user-mobile-title">Perfil</p>
            <ul class="nav flex-column nav-pills nav-user">
                <li class="nav-item"><a class="nav-link nav-link-lg" href="#"><span>Enlace de navegación</span></a></li>
                <li class="nav-item"><a class="nav-link nav-link-lg" href="#"><span>Enlace de navegación</span></a></li>
                <li class="nav-item"><a class="nav-link nav-link-lg" href="#"><span>Enlace de navegación</span></a></li>
                <li class="nav-item"><a class="nav-link nav-link-lg" href="#">
                <span>Notificaciones</span>
                <span class="item-notifications"></span></a>
                </li>
                <li class="nav-item"><a class="nav-link nav-link-danger nav-link-lg" href="#">
                <div class="nav-icon">
                    <span class="material-symbols-rounded" aria-hidden="true">logout</span>
                    <span>Cerrar sesión</span>
                </div></a>
                </li>
            </ul>
            </nav>
        </div>
        </div>
    </div>
    <div class="header-backdrop"></div>
</header>
```

--------------------------------

### Implement numbered list steps

Source: https://gcba.github.io/Obelisco-V2/components/list-step

Use the list-steps-numbers class to create a list of steps with automatic numbering.

```html
<ul class="list-steps list-steps-numbers">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>
```

--------------------------------

### Estructura básica de formulario multipágina

Source: https://gcba.github.io/Obelisco-V2/templates/formularios/formulario-multipagina

Implementación HTML que incluye el encabezado con el componente stepper y el contenedor del formulario.

```html
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <title>Formulario multipagina</title>

  <!-- Obelisco -->
  <!-- OBELISCO CDN's -->
  <!-- Obelisco -->

</head>

<body>
  <main class="min-vh-100">
    <header class="bg-light pt-3 pb-5 mb-5">
      <div class="container pt-3 px-3 px-lg-0">
        <nav aria-label="Navegación secundaria" class="py-4">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Inicio</a></li>
            <li class="breadcrumb-item"><a href="#">Formulario</a></li>
          </ol>
        </nav>
        <div class="row px-3 px-md-0">
          <div class="stepper-content" style="padding: 0px;">
            <div class="stepper">
              <p class="step-volanta">Solicitud de partidas</p>
              <h2 class="step-title">Datos del solicitante</h2>
              <p class="step-subtitle">Paso siguiente: Adjuntá documentación</p>
              <div class="steps">
                <div class="steps-items">
                  <div class="steps-item active"></div>
                  <div class="steps-item active"></div>
                  <div class="steps-item"></div>
                  <div class="steps-item"></div>
                  <div class="steps-item"></div>
                </div>
                <span class="steps-detail">Paso 2 de 5</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-xl-8">
          <div class="mb-5">
            <h6 class="mb-3">Este es el subtítulo de una lista de requisitos</h6>
            <ul class="list-informative-check mb-4">
              <li><strong>Contá con tu DNI vigente con domicilio en CABA.</strong> Las personas mayores de 75 años
                podrán utilizar la Libreta de Enrolamiento o la Libreta Cívica. </li>
              <li><strong>Contá con tu número de CUIL/CUIT.</strong> Podes consultar la constancia del CUIL desde la
                página del Anses.</li>
            </ul>
            <div class="d-flex gap-2 mb-4">
              <span class="material-symbols-rounded text-info">info</span>
              <p>Todos los campos son obligatorios, salvo que estén marcados como opcionales.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row justify-content-center">
        <form id="formData" class="col-12 col-xl-8">
          <!-- Datos personales -->
          <div class="mb-5">

            <h3 class="mb-1">Datos personales</h3>
            <hr class="mb-2 mt-0">
            <p class="text-md mb-4 pb-2">
              Información básica para poder identificarte y establecer contacto. Solo se utilizará con fines
              vinculados
              a
              las búsquedas laborales del GCBA.
            </p>

            <div class="container d-flex flex-column gap-3" style="padding: 0;">
              <!-- nombre y apellido -->
              <div class="row row-gap-3">
                <div class="col-12 col-xl-6">
                  <div class="form-label-container">
                    <label for="firstname" class="form-label">Nombre</label>
                  </div>
                  <input type="text" class="form-control" id="firstname" name="firstname" />
                </div>
```
Tokens:
Raw