# Block

Um pedaço de papel sobre a página: agrupa o que pertence junto.

## Playground

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

## Quando usar

-   Para separar uma parte da página que tem começo e fim: um formulário, um resumo, uma tabela com o filtro dela.

## Quando não usar

-   **Para cada item de uma lista:** use TaskList ou Table. Blocos iguais repetidos viram a grade de cartões genérica.
-   **Para o que flutua** (menu, janela): isso é papel sobreposto.
-   **Um dentro do outro:** embaralha a hierarquia.

## Exemplos

### Um bloco

Superfície alta, cantos irregulares e o recuo da régua. Sem borda e sem sombra: ele está na página, não flutua.

Mostrar código

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

## Bons e maus padrões

Faça assim

**Agendamentos**Backup semanal, regar as plantas, relatório mensal.

Um bloco com uma lista dentro.

Não faça

Backup semanal

Regar as plantas

Relatório mensal

Um bloco por item vira uma pilha de cartões iguais, sem hierarquia.

## Atributos

Atributo

Valores

Para quê

`class="feitio-block"`

obrigatório

Superfície alta, cantos irregulares, recuo da régua.

`aria-labelledby`

o id do título

Num `<section>`, dá nome à região.