Frames

Envuelve imágenes, videos y otros componentes con el componente frame para añadir bordes estilizados, pies de foto y énfasis visual a tu contenido.

Usa marcos para mostrar imágenes, diagramas, videos u otros contenidos visuales con un estilo uniforme y leyendas opcionales. Los Frames centran el contenido y aportan separación visual con respecto al texto circundante.

​

Pies de foto

Añade contexto adicional a una imagen con la prop opcional caption. Los pies de foto aparecen en el marco situado debajo de la imagen.

​

Markdown en los pies de foto

Los pies de foto admiten formato Markdown, incluidos los enlaces y el texto en negrita.

​

Sugerencias

Añade texto que preceda al cuadro usando la prop opcional hint. Las sugerencias aparecen sobre el cuadro.

Si planeas visitar el Parque Nacional de Yosemite, obtén tus permisos antes de ir.

​

Videos

Cuando colocas un elemento video con autoPlay dentro de un marco, el marco añade los atributos playsInline, loop y muted.

Video with autoPlay

<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>

Los videos sin autoPlay no reciben atributos adicionales de forma predeterminada.

​

Propiedades

caption · string

Texto que aparece como parte del marco, centrado debajo del contenido. Admite formato Markdown, incluidos enlaces y texto en negrita.

hint · string

Texto que va antes del marco.

Frame

<Frame>
  <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>

<Frame caption="Caption text">
  <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>

<Frame caption="Visit the [documentation](/docs) for more details">
  <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>

<Frame caption="**Note:** See the [official guide](https://example.com) for setup instructions">
  <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>

<Frame hint="Hint text">
  <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>

<Frame hint="Hint text" caption="Caption text">
  <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
</Frame>