---
title: Tile & TileGroup
description: Tarjetas más grandes con capacidad de imagen para resúmenes de funciones y secciones de inicio de producto.
url: https://docs.thally.io/es/components/tile
---

# Tile & TileGroup

Tarjetas más grandes con capacidad de imagen para resúmenes de funciones y secciones de inicio de producto.

`<Tile>` es una variante de tarjeta más grande con un área de imagen prominente y animación al pasar el cursor. Usa `<TileGroup>` para organizar tiles en una cuadrícula. A diferencia de `<Card>`, los tiles están diseñados para presentaciones visuales de funciones en lugar de enlaces de navegación.

## Ejemplo

    Operaciones CRUD completas sobre HTTP. Admite paginación, filtrado y operaciones en lote de forma nativa.

    Bibliotecas cliente oficiales para TypeScript, Python, Go y Ruby con tipos generados.

```mdx
<TileGroup cols={2}>
  <Tile title="REST API" icon="code-simple" href="/api">
    Operaciones CRUD completas sobre HTTP. Admite paginación, filtrado y operaciones en lote de forma nativa.
  </Tile>
  <Tile title="CLI" icon="wrench" href="/guides/cli-overview">
    Bibliotecas cliente oficiales para TypeScript, Python, Go y Ruby con tipos generados.
  </Tile>
</TileGroup>
```

## Con imagen

Agrega una imagen superior a los tiles para presentaciones visuales de productos. La imagen se escala al pasar el cursor para un efecto interactivo sutil.

    Monitorea usuarios activos, tasas de conversión y retención en una sola vista.

    Envía solicitudes en vivo directamente desde la documentación con tu propia clave de API.

```mdx
<TileGroup cols={2}>
  <Tile title="Panel de Analíticas" img="/images/image1.jpg" href="/quickstart">
    Monitorea usuarios activos, tasas de conversión y retención en una sola vista.
  </Tile>
  <Tile title="Explorador de API" img="/images/image2.jpg" href="/api">
    Envía solicitudes en vivo directamente desde la documentación con tu propia clave de API.
  </Tile>
</TileGroup>
```

## Tres tiles

    Recibe notificaciones de eventos en tiempo real mediante HTTP POST a tu endpoint.

    Protege tu API con OAuth 2.0, claves de API o tokens JWT bearer.

    Paginación basada en cursor para grandes conjuntos de datos con rendimiento consistente.

```mdx
<TileGroup cols={3}>
  <Tile title="Referencia de API" icon="telegram" href="/guides/api-reference-setup">
    Recibe notificaciones de eventos en tiempo real mediante HTTP POST a tu endpoint.
  </Tile>
  <Tile title="Documentación privada" icon="envelope" href="/guides/private-docs">
    Protege tu API con OAuth 2.0, claves de API o tokens JWT bearer.
  </Tile>
  <Tile title="Navegación" icon="grid-round" href="/guides/configuring-navigation">
    Paginación basada en cursor para grandes conjuntos de datos con rendimiento consistente.
  </Tile>
</TileGroup>
```

## Props

### `<Tile>`

| Prop | Tipo | Descripción |
|---|---|---|
| `title` | `string` | Encabezado del tile |
| `href` | `string` | Convierte el tile en un enlace |
| `icon` | `string` | Nombre del icono que se muestra junto al título |
| `img` | `string` | Imagen que se muestra en la parte superior del tile |

### `<TileGroup>`

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `cols` | `1 \| 2 \| 3 \| 4` | `2` | Número de columnas |