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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajgallego.gitbook.io/ionic/componentes/componentes_tarjetas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.