GEF
Menú

Listados de bloque

Estilos para listados de tipo bloque, sea un listado de usuarios, de noticias, de navegación… Por defecto, se añaden unos separadores entre los elementos. Opcionalmente, se puede agregar una clase para que el contenedor también tenga un separador superior e inferior.

Contenido

Listado de bloque simple

Listado de bloque simple en el que los elementos se presentan con un borde separador entre ellos. Se emplea la clase .list-group adicionalmente se puede añadir la clase .list-group--thin para bordes más finos.

Listado de bloque simple con bordes normales

  • Elemento 1
  • Elemento 2
  • Elemento 3
<ul class="list-group">
    <li class="list-group__item">Elemento 1</li>
    <li class="list-group__item">Elemento 2</li>
    <li class="list-group__item">Elemento 3</li>
</ul>

Listado de bloque simple con bordes finos

  • Elemento 1
  • Elemento 2
  • Elemento 3
<ul class="list-group list-group--thin">
    <li class="list-group__item">Elemento 1</li>
    <li class="list-group__item">Elemento 2</li>
    <li class="list-group__item">Elemento 3</li>
</ul>

Listado de bloque con bordes superior e inferior

Para añadir un borde superior e inferior al contenedor del listado de bloque, se añade la clase .list-group--wrapped para la variante de grosor de linea normal y se añade .list-group--wrapped--thin para la variante de grosor fino.

Listado de bloque con bordes finos en listado con bordes superior e inferior normales

  • Elemento 1
  • Elemento 2
  • Elemento 3
<ul class="list-group list-group--thin list-group--wrapped">
    <li class="list-group__item">Elemento 1</li>
    <li class="list-group__item">Elemento 2</li>
    <li class="list-group__item">Elemento 3</li>
</ul>

Listado de bloque con bordes finos en listado con bordes superior e inferior finos

  • Elemento 1
  • Elemento 2
  • Elemento 3
<ul class="list-group list-group--thin list-group--wrapped--thin">
    <li class="list-group__item">Elemento 1</li>
    <li class="list-group__item">Elemento 2</li>
    <li class="list-group__item">Elemento 3</li>
</ul>

Listado en el cual todos los elementos de lista están agrupados en un enlace. Para este caso concreto, al enlace se le añade la clase .list-group__item__linkblock.

En este tipo de bloques se debe usar la clase .list-group--wrapped en el elemento .list-group para que haya un borde inferior y superior.

Listado de bloque con enlaces de bloque

<ul class="list-group list-group--wrapped">
    <li class="list-group__item">
        <a href="#" title="Texto descriptivo" class="list-group__item__linkblock">
            <p>…</p>
        </a>
    </li>
    <li class="list-group__item">
        <a href="#" title="Texto descriptivo" class="list-group__item__linkblock">
            <p>…</p>
        </a>
    </li>
    <li class="list-group__item">
        <a href="#" title="Texto descriptivo" class="list-group__item__linkblock">
            <p>…</p>
        </a>
    </li>
</ul>

Los enlaces de bloque pueden contener texto simple u otras etiquetas como párrafos y encabezados.

Listado de bloque con segundo nivel

Un listado de bloque puede contener un segundo nivel de listado. Aplicando la clase .list-group__second-level a la clase .list-group obtendremos los estilos del segundo nivel.

En este tipo de bloques se debe usar la clase .list-group--wrapped en el elemento .list-group para que haya un borde inferior y superior.

Listado de bloque con segundo nivel

  • Nivel 1 elemento 1
  • Nivel 1 elemento 2
    • Nivel 2 elemento 1
    • Nivel 2 elemento 2
    • Nivel 2 elemento 3
  • Nivel 1 elemento 3
<ul class="list-group list-group--wrapped">
    <li class="list-group__item">Nivel 1 elemento 1</li>
    <li class="list-group__item">Nivel 1 elemento 2
        <ul class="list-group list-group__second-level">
            <li class="list-group__item">Nivel 2 elemento 1</li>
            <li class="list-group__item">Nivel 2 elemento 2</li>
            <li class="list-group__item">Nivel 2 elemento 3</li>
        </ul>
    </li>
    <li class="list-group__item">Nivel 1 elemento 3</li>
</ul>
Subir