Frames

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.

Fotografía de un lago rodeado de árboles y montañas a lo lejos en el Parque Nacional de Yellowstone.

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.

Fotografía del valle de Yosemite. — El Parque Nacional Yosemite es visitado por más de 3,5 millones de personas cada año.

Markdown en los pies de foto

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

Fotografía de un lago rodeado de árboles con montañas a lo lejos en el Parque Nacional de Yellowstone. — Importante: Consulta el sitio web del parque para conocer las condiciones actuales.

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

Campos

Iconos

⌘I

Primeros pasos

Organizar

Personalizar

Crear contenido

Documentar APIs

Desplegar

Optimizar

Pies de foto

Markdown en los pies de foto

Sugerencias

Videos

Propiedades

​Pies de foto

​Markdown en los pies de foto

​Sugerencias

​Videos

​Propiedades

Pies de foto

Markdown en los pies de foto

Sugerencias

Videos

Propiedades