# Block

Un morceau de papier sur la page : il regroupe ce qui appartient ensemble.

## Playground

```html
<div style="inline-size: min(100%, 26rem)"><div class="feitio-block"><strong>Sauvegarde hebdomadaire</strong></div></div>
```

## Quand l'utiliser

-   Pour isoler une partie de la page avec un début et une fin : un formulaire, un résumé, un tableau avec son filtre.

## Quand ne pas l'utiliser

-   **Pour chaque élément d'une liste :** utilisez TaskList ou Table. Les blocs identiques répétés deviennent la grille générique des cartes.
-   **Pour ce qui flotte** (menu, fenêtre) : c'est du papier soulevé.
-   **L'un à l'intérieur de l'autre :** cela trouble la hiérarchie.

## Exemples

### Un bloc

Surface surélevée, coins irréguliers et remplissage à l'échelle. Pas de bordure ni d'ombre : il repose sur la page, il ne flotte pas.

Afficher le code

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

## Faire et ne pas faire

Do

**Calendriers**Sauvegarde hebdomadaire, arroser les plantes, rapport mensuel.

Un bloc avec une liste à l'intérieur.

Don’t

Sauvegarde hebdomadaire

Arroser les plantes

Rapport mensuel

Un bloc par élément devient un tas de cartes identiques, sans hiérarchie.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-block"`

obligatoire

Surface surélevée, coins irréguliers, remplissage à l'échelle.

`aria-labelledby`

l'identifiant du titre

On a `<section>`, nom de la région.