### 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 ``` -------------------------------- ### 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 // Botón con texto e icono a la derecha // Botón sin texto, con icono ``` -------------------------------- ### 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 ``` -------------------------------- ### 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
Acceso
Acceso
Acceso
Acceso
``` -------------------------------- ### 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 ``` -------------------------------- ### 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

Nombre del paso

Paso siguiente: Nombre del paso 3

Paso 2 de 5
``` -------------------------------- ### 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 //DERECHA //IZQUIERDA //INFERIOR ``` -------------------------------- ### 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
Contenido Pestaña 1
Contenido Pestaña 2
Contenido Pestaña 3
``` -------------------------------- ### 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

Este es el título de una lista de enlaces

Enlace predeterminado Enlace predeterminado Enlace predeterminado Enlace predeterminado Enlace predeterminado
``` -------------------------------- ### 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
$200,00 Solicitud de informes varios Boleta N° 2549-48758798
$250,00 Ecoparque Boleta N° 2549-48758798
``` -------------------------------- ### 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

Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.

``` -------------------------------- ### 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
``` -------------------------------- ### 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 ``` -------------------------------- ### 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
Acceso

Descripción (Opcional)
Acceso

Descripción (Opcional)
Acceso

Descripción (Opcional)
Acceso

Descripción (Opcional)

 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Página de libro ``` -------------------------------- ### 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
Contenido Pestaña 1
Contenido Pestaña 2
``` -------------------------------- ### 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 ``` -------------------------------- ### 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

Título del organismo de máximo 2 líneas

Descripción del organismo de máximo 3 líneas.

N°
Acceso

Descripción (Opcional)
Acceso

Descripción (Opcional)
Acceso

Descripción (Opcional)
Acceso grande
``` -------------------------------- ### 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

Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.

Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.

Esta es la descripción que se encuentra dentro de un colapsable. Debe ser breve y concisa.

``` -------------------------------- ### 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
Enlace de navegación Enlace de navegación Enlace de navegación Enlace de navegación Enlace de navegación Enlace de navegación Ver más
  • Navegación
  • Navegación
  • Navegación
  • Navegación
    • ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Formulario multipagina

    Solicitud de partidas

    Datos del solicitante

    Paso siguiente: Adjuntá documentación

    Paso 2 de 5
    Este es el subtítulo de una lista de requisitos
    • Contá con tu DNI vigente con domicilio en CABA. Las personas mayores de 75 años podrán utilizar la Libreta de Enrolamiento o la Libreta Cívica.
    • Contá con tu número de CUIL/CUIT. Podes consultar la constancia del CUIL desde la página del Anses.
    info

    Todos los campos son obligatorios, salvo que estén marcados como opcionales.

    Datos personales

    Información básica para poder identificarte y establecer contacto. Solo se utilizará con fines vinculados a las búsquedas laborales del GCBA.

    ```