Frame

O Frame envolve imagens e demonstrações em um contêiner com borda e legendas opcionais.

As capturas de tela mostram a interface em inglês.

Use o Frame quando quiser:

• Dar às capturas de tela e imagens da interface um acabamento profissional
• Adicionar legendas para explicar o que os leitores estão vendo
• Diferenciar a saída de demonstrações do conteúdo regular
• Criar consistência visual em toda a documentação

Uso

<Frame caption="Architecture diagram">

  ![Diagram](/images/city-skyline.jpg)

</Frame>

Frame básico

<Frame>

  ![City skyline](/images/city-skyline.webp)

</Frame>

Com legenda

Adicione uma legenda abaixo do frame:

<Frame caption="New York City at dusk">

  ![City skyline](/images/city-skyline.webp)

</Frame>

Enquadrar outro conteúdo

O Frame funciona com qualquer conteúdo, não apenas imagens:

✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production

Quando NÃO usar o Frame

• Imagens decorativas inline — imagens Markdown comuns são suficientes para ilustrações
• Ícones ou gráficos pequenos — o Frame adiciona um peso visual desnecessário
• Imagens que acompanham o texto — o Frame cria uma separação visual; use-o para elementos visuais independentes

Práticas recomendadas

• Mantenha as legendas concisas — uma frase que explique o que o leitor está vendo
• Use de forma consistente — se você enquadrar uma captura de tela, enquadre todas para manter a consistência visual
• Não use frames em excesso — reserve-os para elementos visuais importantes, não para todas as imagens da página

Props

Próximos passos?