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:

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

Con lo que obtendriamos el siguiente resultado:

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:

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:

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

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:

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