# Frames (/es/components/frames)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1377 · updated: 2026-07-30 -->
Related: [Accordions](/es/components/accordions.md), [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md)

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 [#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 [#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 [#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 [#videos]
</div>

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

```mdx title="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.

<div id="properties">
  ## Propiedades [#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>
  <CodeBlockTabs defaultValue="Frame" groupId="frame+frame-con-markdown-en-el-pie-de-imagen+frame-con-pista-y-pie-de-imagen+frame-con-texto-en-negrita-y-enlaces-en-el-pie-de-imagen+frame-con-un-pie-de-imagen+frame-con-una-pista">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="Frame">
        Frame
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame con un pie de imagen">
        Frame con un pie de imagen
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame con Markdown en el pie de imagen">
        Frame con Markdown en el pie de imagen
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame con texto en negrita y enlaces en el pie de imagen">
        Frame con texto en negrita y enlaces en el pie de imagen
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame con una pista">
        Frame con una pista
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Frame con pista y pie de imagen">
        Frame con pista y pie de imagen
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

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

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

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

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

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

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