Simple
Título del organismo de máximo 2 líneas
Descripción del organismo de máximo 3 líneas.
Acceso
Descripción (Opcional)
<div class="group-access">
<div class="card-access">
<div class="card-access-body reverse">
<div>
<h4 class="card-access-title">Título del organismo de máximo 2 líneas</h4>
<p class="card-access-text">Descripción del organismo de máximo 3 líneas.</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
Título del organismo de máximo 2 líneas
Descripción del organismo de máximo 3 líneas.
info
Acceso grande
<div class="group-access">
<div class="card-access">
<div class="card-access-body">
<div>
<h4 class="card-access-title">Título del organismo de máximo 2 líneas</h4>
<p class="card-access-text">Descripción del organismo de máximo 3 líneas.</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
Título del organismo de máximo 2 líneas
Descripción del organismo de máximo 3 líneas.
info
Acceso grande
<div class="group-access">
<div class="card-access">
<div class="card-access-body">
<div>
<h4 class="card-access-title">Título del organismo de máximo 2 líneas</h4>
<p class="card-access-text">Descripción del organismo de máximo 3 líneas.</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>