Estilos

Componentes

Formularios

Organismos

Accesos

Los accesos funcionan como puntos de ingreso a diferentes secciones y pueden agruparse cuando hay una similitud en su contenido.

Uso

Cuándo usar

  • Cuando querés ofrecer al usuario una entrada clara hacia otra sección o página del sistema.
  • Cuando esa entrada representa una unidad funcional (servicio, área, sección) identificable por un título, y eventualmente una descripción breve.
  • Si querés agrupar varias "entradas" en un bloque de navegación o landing para que el usuario elija a dónde ir.
  • Cuando la interfaz permite mostrar múltiples accesos (lista, grilla), de modo que el usuario tenga una visión clara de opciones disponibles.

Cuándo no usar

  • Si la acción no implica navegación hacia otra sección (es decir, no conduce a un "destino" distinto). No usar cuando el elemento no redirige.
  • Si la estructura de información requiere una navegación con múltiples niveles o filtros complejos; "Acceso" está pensado para entradas directas simples.

Disposiciones

Es una agrupación de accesos que tienen cercanía en cuanto a la similitud de acción. Pueden utilizarse tanto vertical como horizontalmente.

Vertical

Para la implementación del componente se desarrolló la clase "list-group" que permite organizarlo y adaptarlo correctamente en forma de lista.

Tamaños de botones

Horizontal

Para la correcta distribución y visualización del componente, se deben utilizar la combinación de las clases: "list-group" y "list-group-row".

Tamaños de botones

Recomendamos utilizar un máximo de 4 accesos en un ancho de 12 columnas y 3 accesos para una grilla de 8 columnas.

Contenido

Ejemplos de uso

Ejemplo de cómo sí usar los accesos
check

Recomendamos limitarse a una línea de texto para el título y la descripción de los accesos.

Ejemplo de cómo no usar los accesos
check

No utilizar puntos suspensivos para truncar el texto de los accesos

Contenido en esta página

Simple

Acceso
Acceso
Acceso
Acceso

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

Con descripción

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)


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

Con icono

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)


  <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 hover">
    <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 focus">
    <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 active">
    <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>

Tamaños

Acceso

Descripción (Opcional)

Acceso

Descripción (Opcional)


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

Disposición

Cuatro columnas en desktop, dos columnas en tablet y una columna en mobile

Acceso
Acceso
Acceso
Acceso
Acceso

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


Cuatro columnas en desktop, y una columna en tablet y mobile

Acceso
Acceso
Acceso
Acceso
Acceso

  <div class="access-items-4 row-cols-md-1">
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
  </div>


Tres columnas en desktop, dos columnas en tablet y una columna en mobile

Acceso
Acceso
Acceso
Acceso
Acceso

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


Tres columnas en desktop, y una columna en tablet y mobile

Acceso
Acceso
Acceso
Acceso
Acceso

  <div class="access-items-3 row-cols-md-1">
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
    <div class="col">
      <a href="#" class="list-group-item item-sm">
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
  </div>


Una columna en aside

Acceso
Acceso
Acceso
Acceso

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias quo repellendus earum dolorem, eos ex reprehenderit labore consequuntur, nemo velit quod adipisci laborum saepe officiis culpa.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias quo repellendus earum dolorem, eos ex reprehenderit labore consequuntur, nemo velit quod adipisci laborum saepe officiis culpa doloremque nulla obcaecati sapiente.


  <div class="container" >
    <div class="row">
      <div class="col-12 col-xl-4">
        <div class="access-items-1">
          <div class="col">
            <a href="#" class="list-group-item item-sm">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="#" class="list-group-item item-sm">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="#" class="list-group-item item-sm">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="#" class="list-group-item item-sm">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-8">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias quo repellendus earum dolorem, eos ex reprehenderit labore consequuntur, nemo velit quod adipisci laborum saepe officiis culpa doloremque nulla obcaecati sapiente.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias quo repellendus earum dolorem, eos ex reprehenderit labore consequuntur, nemo velit quod adipisci laborum saepe officiis culpa doloremque nulla obcaecati sapiente.</p>
      </div>
    </div>
  </div>


Variantes

Anatomía

Anatomia del acceso
ElementoCarácter
IconoObligatorio. Puede ser relleno o con borde.
Titulo del acceso Obligatorio, todos los accesos deben incluir un título.
Descripción del acceso Opcional, pero recomendable para agregar información adicional que puede servirle a la persona usuaria a comprender mejor la acción a realizar.
Icono de chevronObligatorio, ayuda a identificar que el elemento es interactivo y que permite la continuación de la página.

Variantes

Sin borde

Se utilizan para componer organismos donde se establezcan múltiples accesos dentro de un mismo contenedor.

Acceso sin borde

Con borde

Se utilizan para acceder a secciones de mayor relevancia. Principalmente se usan en compañía de otros accesos generando agrupaciones de una misma temática.

Acceso con borde

Con descripción

La descripción es una variable del acceso para agregar información adicional que puede servirle a la persona usuaria a comprender mejor la acción a realizar.

Acceso Con descripción

Con ícono

El ícono sirve como referencia visual para complementar al título del acceso y así ayudar a la persona usuaria a tomar una decisión.

Acceso Con ícono

Tamaños

Acceso tamaños

Estados

Predeterminado (default)

Estado predeterminado de los botones en una interfaz.

Estado predeterminado del componente acceso en una interfaz.

Sobre (hover)

Cuando un usuario está sobre el elemento.

Estado sobre del boton

En Foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Estado en foco del boton

Activo (active)

Indica que la persona usuaria seleccionó el acceso

Estado en foco del boton

Contenido en esta página

Navegación alternativa

El componente de accesos 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 cerrar o activar botones se pueden realizar con las teclas Enter o space.

Navegacion alternativa de los accesos

Etiquetado descriptivo

Las alertas deben incluir etiquetas semánticas y atributos ARIA que comuniquen correctamente su propósito y estado al usuario, especialmente a las tecnologías asistivas.

El atributo role="alert" informa al lector de pantalla que el contenido es importante y requiere atención inmediata. Se anuncian automáticamente sin necesidad de que el foco del teclado se desplace al elemento.

<div class="alert alert-info" role="alert">
  Esta es la descripción de una alerta de información.
</div>

Cuando la alerta tenga un título y una descripción, ambos deben estar correctamente asociados. Se recomienda usar aria-labelledby y aria-describedby para garantizar una lectura secuencial.

<div class="alert alert-info" role="alert" aria-labelledby="alertTitulo" aria-describedby="alertDesc">
  <h4 id="alertTitulo">Actualización del sistema</h4>
  <p id="alertDesc">El servicio estará disponible nuevamente a las 14:00.</p>
</div>

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

Contenido en esta página

Navegación de pie de página