O exemplo é o componente real no tema real — os mesmos tokens, o mesmo modo
escuro — por isso um leitor vê o que um bloco faz em vez de uma descrição dele.
Esta página, e todas as outras páginas desta pasta, são feitas com ele.

## Utilização

::preview
:::callout{type="tip"}
Desenhado pela página que estás a ler.
:::

#code
```mdc
::callout{type="tip"}
Desenhado pela página que estás a ler.
::
```
::

````mdc
::preview
:::callout{type="tip"}
Desenhado pela página que estás a ler.
:::

#code
```mdc
::callout{type="tip"}
Desenhado pela página que estás a ler.
::
```
::
````

## API

Sem props.

### Slots

| Slot      | O que leva dentro                                                    |
| :-------- | :------------------------------------------------------------------- |
| `default` | O exemplo, desenhado                                                  |
| `code`    | O código-fonte, como bloco de código. Omite-o e não aparece nenhuma faixa de separadores |

## Notas

O código-fonte em `#code` é escrito à mão em vez de derivado do exemplo acima
dele, e esse é o único custo real do bloco. Quando o componente corre, os seus
filhos já são nós desenhados e o Markdown que os produziu desapareceu; voltar a
serializá-los seria adivinhar uma sintaxe de onde nunca vieram.

::callout{type="warning" title="Duas cópias divergem"}
Nada verifica que o separador do código-fonte corresponde ao que é desenhado ao
lado. Mantém o exemplo curto o suficiente para que mudar um sem o outro seja
óbvio.
::