# Block

Un pedazo de papel en la página: agrupa lo que pertenece juntos.

## Playground

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

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

```html
<section class="feitio-block" aria-labelledby="lembretes">
  <h3 id="lembretes">Lembretes</h3>
  …
</section>
```

## Hacer y no hacer

Do

**Cronogramas**Respaldo 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.
