> For the complete documentation index, see [llms.txt](https://ajgallego.gitbook.io/ionic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajgallego.gitbook.io/ionic/componentes/componentes_tarjetas.md).

# Tarjetas

Las tarjetas (*cards*) son otro elemento ampliamente usado para mostrar y organizar la información. Para utilizarlas simplemente tenemos que escribir un bloque de código como el siguiente:

```markup
<div class="card">
  <div class="item item-text-wrap">
    ¡Contenido de la tarjeta!
  </div>
</div>
```

Con lo que obtendriamos el siguiente resultado:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWDsQ4sptX8ndTYt%2Fcards_example_1.png?generation=1577179057893711\&alt=media)

Dentro de la sección interior (`item`) podemos incluir todo el código que queramos: texto, otras etiquetas HTML u otros componentes de Ionic. Si ponemos varias secciones `item` simplemente se verán apiladas una después de la otra:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWDuDiN2R0Xgp1bs%2Fcards_example_2.png?generation=1577179057636593\&alt=media)

A continuación vamos a ver algunos elementos más que podemos usar con las tarjetas.

## Cabeceras y pies de tarjeta

Las tarjetas se puede personalizar de forma similar a como si fueran una pantalla normal. Por ejemplo, podemos añadirle de forma muy sencilla una cabecera y un pie de página dentro de la misma tarjeta. Para esto simplemente tenemos que utilizar la clase CSS `item-divider` antes o después del bloque de contenido:

```markup
<div class="card">
  <div class="item item-divider">
    Cabecera de la tarjeta
  </div>
  <div class="item item-text-wrap">
    Este es el bloque de <b>contenido principal</b> 
    de la tarjeta con algún <u>estilo</u> aplicado. 
  </div>
  <div class="item item-divider">
    Pie de página
  </div>
</div>
```

Con lo que obtendríamos el siguiente resultado:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWDw22Y_AMonFPSg%2Fcards_header.png?generation=1577179057800559\&alt=media)

## Listas de elementos

Los elementos de la tarjeta también pueden ser enlaces (`<a>`) sobre los que aplicamos la clase CSS `item`. Estos bloques se pueden apilar unos debajo de otros creando una tarjeta con diferentes secciones, por ejemplo una cabecera, una sección de contenido principal y por último enlaces. En estos bloques también se pueden incluir iconos, pero para esto tenemos que aplicar la clase CSS `item-icon-left`. A continuación se incluye un ejemplo:

```markup
<div class="card">
  <div class="item item-divider">
    Tarjeta empresa
  </div>
  <div class="item item-text-wrap">
    Información detallada de la empresa...
  </div>
  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Contactar con la empresa
  </a>
  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Ver información de pago
  </a>
</div>
```

Con este código obtendríamos una tarjeta similar a la siguiente:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWDyRj1lmmCZf1kX%2Fcards_links.png?generation=1577179057711964\&alt=media)