Block
Un morceau de papier sur la page : il regroupe ce qui appartient ensemble.
Sur cette page
Playground
Sauvegarde hebdomadaire
Élément
Fond
<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
Rappels
Arroser les plantes, mardi à 9h. Rapport, le 1er.
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
<section class="feitio-block" aria-labelledby="lembretes">
<h3 id="lembretes">Lembretes</h3>
…
</section>Faire et ne pas faire
Do
CalendriersSauvegarde 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. |