mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
be513d4fcf
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
147 lines
4.3 KiB
Plaintext
147 lines
4.3 KiB
Plaintext
---
|
|
title: "Tarjetas"
|
|
description: "Resalta puntos clave o enlaces con diseños e íconos personalizables."
|
|
keywords: ["tarjetas", "contenedores visuales"]
|
|
---
|
|
|
|
import IconsOptional from "/snippets/es/icons-optional.mdx";
|
|
|
|
Usa tarjetas para crear contenedores visuales para el contenido. Las tarjetas son contenedores flexibles que pueden incluir texto, iconos, imágenes y enlaces.
|
|
|
|
<div id="basic-card">
|
|
## Tarjeta básica
|
|
</div>
|
|
|
|
<Card title="Título de la tarjeta" icon="text-align-start" href="/es/components/columns">
|
|
Así es como se usa una tarjeta con un icono y un enlace. Al hacer clic en esta tarjeta,
|
|
irás a la página de Columns.
|
|
</Card>
|
|
|
|
```mdx Card example
|
|
<Card title="Título de la tarjeta" icon="text-align-start" href="/es/components/columns">
|
|
Así se usa una tarjeta con un ícono y un enlace. Al hacer clic en esta tarjeta
|
|
accederás a la página de Columnas.
|
|
</Card>
|
|
```
|
|
|
|
<div id="card-variations">
|
|
## Variantes de tarjetas
|
|
</div>
|
|
|
|
Las tarjetas admiten varias opciones de diseño y estilo para adaptarse a diferentes necesidades de contenido.
|
|
|
|
<div id="horizontal-layout">
|
|
### Diseño horizontal
|
|
</div>
|
|
|
|
Agrega la propiedad `horizontal` para mostrar las tarjetas en un diseño horizontal más compacto.
|
|
|
|
<Card title="Tarjeta horizontal" icon="text-align-start" horizontal>
|
|
Este es un ejemplo de una tarjeta horizontal.
|
|
</Card>
|
|
|
|
```mdx Horizontal card example
|
|
<Card title="Tarjeta horizontal" icon="text-align-start" horizontal>
|
|
Este es un ejemplo de tarjeta horizontal.
|
|
</Card>
|
|
```
|
|
|
|
<div id="image-cards">
|
|
### Tarjetas con imagen
|
|
</div>
|
|
|
|
Agrega una propiedad `img` para mostrar una imagen en la parte superior de la tarjeta.
|
|
|
|
<Card title="Tarjeta con imagen" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
|
|
Este es un ejemplo de una tarjeta con imagen.
|
|
</Card>
|
|
|
|
```mdx Image card example
|
|
<Card title="Tarjeta con imagen" img="/images/card-with-image.png">
|
|
Este es un ejemplo de tarjeta con imagen.
|
|
</Card>
|
|
```
|
|
|
|
<div id="link-cards-with-custom-ctas">
|
|
### Tarjetas de enlace con CTA personalizadas
|
|
</div>
|
|
|
|
Puedes personalizar el texto de la llamada a la acción y controlar si aparece una flecha. De forma predeterminada, las flechas solo se muestran en los enlaces externos.
|
|
|
|
<Card title="Tarjeta de enlace" icon="link" href="/es/components/columns" arrow="true" cta="Haz clic aquí">
|
|
Este es un ejemplo de una tarjeta con un ícono y un enlace. Al hacer clic en esta tarjeta, irás a la página Columns.
|
|
</Card>
|
|
|
|
```mdx Link card example
|
|
<Card
|
|
title="Tarjeta de enlace"
|
|
icon="link"
|
|
href="/components/columns"
|
|
arrow="true"
|
|
cta="Haz clic aquí"
|
|
>
|
|
Este es un ejemplo de una tarjeta con un ícono y un enlace. Al hacer clic en esta tarjeta, accederás a la página de Columnas.
|
|
</Card>
|
|
```
|
|
|
|
<div id="group-cards">
|
|
## Agrupar tarjetas
|
|
</div>
|
|
|
|
Usa el [componente Columns](/es/components/columns) para organizar varias tarjetas lado a lado. El componente Columns admite entre una y cuatro columnas y se ajusta automáticamente para pantallas más pequeñas.
|
|
|
|
<Columns cols={2}>
|
|
<Card title="Primera tarjeta" icon="panel-left-close">
|
|
Esta es la primera tarjeta.
|
|
</Card>
|
|
|
|
<Card title="Segunda tarjeta" icon="panel-right-close">
|
|
Esta es la segunda tarjeta.
|
|
</Card>
|
|
</Columns>
|
|
|
|
```mdx Columns example
|
|
<Columns cols={2}>
|
|
<Card title="Primera tarjeta" icon="panel-left-close">
|
|
Esta es la primera tarjeta.
|
|
</Card>
|
|
<Card title="Segunda tarjeta" icon="panel-right-close">
|
|
Esta es la segunda tarjeta.
|
|
</Card>
|
|
</Columns>
|
|
```
|
|
|
|
|
|
<div id="properties">
|
|
## Propiedades
|
|
</div>
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
El título que se muestra en la tarjeta
|
|
</ResponseField>
|
|
|
|
<IconsOptional />
|
|
|
|
<ResponseField name="color" type="string">
|
|
Color del ícono como código hexadecimal (por ejemplo, `#FF6B6B`).
|
|
</ResponseField>
|
|
|
|
<ResponseField name="href" type="string">
|
|
URL a la que se navega cuando se hace clic en la tarjeta.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="horizontal" type="boolean">
|
|
Muestra la tarjeta en un diseño horizontal compacto.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="img" type="string">
|
|
URL o ruta local a una imagen que se muestra en la parte superior de la tarjeta.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="cta" type="string">
|
|
Texto personalizado para el botón de acción.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="arrow" type="boolean">
|
|
Mostrar u ocultar el ícono de flecha del enlace.
|
|
</ResponseField> |