# Block

Ein Stück Papier auf der Seite: es gruppiert das, was zusammengehört.

## Playground

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

## Wann verwenden

-   Um einen Teil der Seite mit einem Anfang und einem Ende abzugrenzen: ein Formular, eine Zusammenfassung, eine Tabelle mit ihrem Filter.

## Wann nicht verwenden

-   **Für jedes Element einer Liste:** verwenden Sie TaskList oder Table. Wiederholte identische Blöcke werden zum generischen Raster von Karten.
-   **Für das Fließende** (Menü, Fenster): das ist gehobenes Papier.
-   **Eines in einem anderen:** es verwirrt die Hierarchie.

## Beispiele

### Ein Block

Erhobene Oberfläche, unebene Ecken und Abstände aus der Skala. Kein Rahmen und kein Schatten: es sitzt auf der Seite, es schwebt nicht.

Code anzeigen

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

## Do and don't

Do

**Zeitpläne**Wöchentlicher Backup, Pflanzen gießen, monatlicher Bericht.

Ein Block mit einer Liste darin.

Don’t

Wöchentlicher Backup

Pflanzen gießen

Monatlicher Bericht

Ein Block pro Element wird zu einem Haufen identischer Karten, ohne Hierarchie.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-block"`

erforderlich

Erhobene Oberfläche, unebene Ecken, Abstände aus der Skala.

`aria-labelledby`

die ID des Überschrifts

In einem `<section>` Namen die Region.