Block
Un pedazo de papel en la página: agrupa lo que pertenece juntos.
En esta página
Playground
Copia semanal
Elemento
Fondo
<div style="inline-size: min(100%, 26rem)"><div class="feitio-block"><strong>Copia semanal</strong></div></div>Cuándo usarlo
- Para separar una parte de la página con un inicio y un fin: un formulario, un resumen, una tabla con su filtro.
Cuándo no usarlo
- Para cada elemento de una lista: use TaskList o Table. Los bloques idénticos repetidos se convierten en la grilla genérica de tarjetas.
- Para lo que flota (menú, ventana): es el papel elevado.
- Uno dentro de otro: ensucia la jerarquía.
Ejemplos
Recordatorios
Regar las plantas, martes a las 9. Informar, el 1º.
Un bloque
Superficie elevada, esquinas irregulares y relleno desde la escala. Sin borde y sin sombra: se asienta en la página, no flota.
Mostrar código
<section class="feitio-block" aria-labelledby="lembretes">
<h3 id="lembretes">Lembretes</h3>
…
</section>Hacer y no hacer
Do
CronogramasRespaldo semanal, regar las plantas, informe mensual.
Un bloque con una lista adentro.
Don’t
Respaldo semanal
Regar las plantas
Informe mensual
Un bloque por ítem se convierte en un montón de tarjetas idénticas, sin jerarquía.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-block" | obligatorio | Superficie elevada, esquinas irregulares, relleno desde la escala. |
aria-labelledby | el id del encabezado | En un <section>, se nombra la región. |