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.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

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>


Navegación de pie de página