Accesos - Organismo
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
Título del acceso
Descripción del acceso
Acceso
Descripción (Opcional)
<div class="group-access">
<div class="card-access">
<div class="card-access-body reverse">
<div>
<h4 class="mb-1">Título del acceso</h4>
<p class="mb-0">Descripción del acceso</p>
</div>
<span class="card-access-icon material-symbols-rounded" aria-hidden="true">info</span>
</div>
<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</span>
<p class="access-text">Descripción (Opcional)</p>
</div>
</a>
</div>
</div>
Con lista de accesos
<div class="group-access">
<div class="card-access">
<div class="card-access-body">
<div>
<h4 class="mb-1">Título del acceso</h4>
<p class="mb-0">Descripción del acceso</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>
Con categorías
<div class="group-access">
<div class="card-access">
<div class="card-access-body">
<div>
<h4 class="mb-1">Título del acceso</h4>
<p class="mb-0">Descripción del acceso</p>
</div>
<span class="card-access-icon descriptive">N°</span>
</div>
<hr class="clearfix" />
<div class="container-access">
<div class="access-option">
<h5 class="title-option">Categoría 1</h5>
<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 chico</span>
</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 chico</span>
</div>
</a>
<h5 class="title-option">Categoría 2</h5>
<a href="#" class="list-group-item item-sm">
<i class="bx bxs-info-circle o-icon"></i>
<div class="access-content">
<span class="access-title">Acceso chico</span>
</div>
</a>
<a href="#" class="list-group-item item-sm">
<i class="bx bxs-info-circle o-icon"></i>
<div class="access-content">
<span class="access-title">Acceso chico</span>
</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>