> ## Documentation Index
> Fetch the complete documentation index at: https://smartac-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Frame>
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Fotografía de un lago rodeado de árboles y montañas a lo lejos en el Parque Nacional de Yellowstone." />
</Frame>

<div id="captions">
  ## Pies de foto
</div>

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.

<Frame caption="El Parque Nacional Yosemite es visitado por más de 3,5 millones de personas cada año.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Fotografía del valle de Yosemite." />
</Frame>

<div id="markdown-in-captions">
  ### Markdown en los pies de foto
</div>

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

<Frame caption="Obtén más información sobre el [Parque Nacional Yosemite](https://www.nps.gov/yose/index.htm) y planifica tu visita.">
  <img src="https://mintlify-assets.b-cdn.net/yosemite.jpg" alt="Fotografía del valle de Yosemite." />
</Frame>

<Frame caption="**Importante:** Consulta el [sitio web del parque](https://www.nps.gov/yose/index.htm) para conocer las condiciones actuales.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Fotografía de un lago rodeado de árboles con montañas a lo lejos en el Parque Nacional de Yellowstone." />
</Frame>

<div id="hints">
  ## Sugerencias
</div>

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

<Frame hint="Si planeas visitar el Parque Nacional de Yosemite, obtén tus permisos antes de ir." caption="El Parque Nacional de Yosemite es visitado por más de 3,5 millones de personas cada año.">
  <img src="https://mintlify-assets.b-cdn.net/yellowstone.jpeg" alt="Fotografía de un lago rodeado de árboles con montañas a lo lejos en el Parque Nacional de Yellowstone." />
</Frame>

<div id="videos">
  ## Videos
</div>

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

```mdx Video with autoPlay theme={null}
<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>
```

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

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="caption" type="string">
  Texto que aparece como parte del marco, centrado debajo del contenido. Admite formato Markdown, incluidos enlaces y texto en negrita.
</ResponseField>

<ResponseField name="hint" type="string">
  Texto que va antes del marco.
</ResponseField>

<CodeGroup>
  ```mdx Frame theme={null}
  <Frame>
    <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
  </Frame>
  ```

  ```mdx Frame con un pie de imagen theme={null}
  <Frame caption="Caption text">
    <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
  </Frame>
  ```

  ```mdx Frame con Markdown en el pie de imagen theme={null}
  <Frame caption="Visit the [documentation](/docs) for more details">
    <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
  </Frame>
  ```

  ```mdx Frame con texto en negrita y enlaces en el pie de imagen theme={null}
  <Frame caption="**Note:** See the [official guide](https://example.com) for setup instructions">
    <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
  </Frame>
  ```

  ```mdx Frame con una pista theme={null}
  <Frame hint="Hint text">
    <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
  </Frame>
  ```

  ```mdx Frame con pista y pie de imagen theme={null}
  <Frame hint="Hint text" caption="Caption text">
    <img src="/path/image.jpg" alt="Texto alternativo descriptivo" />
  </Frame>
  ```
</CodeGroup>