Frame

Frame envuelve imágenes y demos en un contenedor con borde y leyendas opcionales.

Usa Frame cuando quieras:

• Dar a las capturas de pantalla e imágenes de interfaz un aspecto acabado
• Añadir leyendas para explicar lo que están viendo los lectores
• Distinguir la salida de una demo del contenido habitual
• Crear consistencia visual en toda tu documentación

Uso

<Frame caption="Architecture diagram">

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

</Frame>

Frame básico

Las capturas de pantalla muestran la interfaz en inglés.

<Frame>

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

</Frame>

Con leyenda

Añade una leyenda debajo del frame:

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

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

</Frame>

Enmarcar otro contenido

Frame funciona con cualquier contenido, no solo imágenes:

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

Cuándo NO usar Frame

• Imágenes decorativas en línea - Las imágenes markdown normales son adecuadas para ilustraciones
• Iconos o gráficos pequeños - Frame añade un peso visual innecesario
• Imágenes que fluyen con el texto - Frame crea una ruptura visual; úsalo para elementos visuales independientes

Buenas prácticas

• Mantén las leyendas concisas - Una frase que explique lo que está viendo el lector
• Úsalo de forma consistente - Si enmarcas una captura de pantalla, enmarca todas las capturas de pantalla para mantener la consistencia visual
• No abuses del enmarcado - Reserva los frames para elementos visuales importantes, no para cada imagen de la página

Props

¿Qué sigue?