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