<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/tile/01_Tarjeta_Ejemplo.png';
import image2 from '../../stories/assets/tile/02_Tarjeta_Agrupaciones.png';
import image3 from '../../stories/assets/tile/03_Tarjeta_VariacionesNormal.png';
import image4 from '../../stories/assets/tile/04_Tarjeta_VariacionesExpandible.png';
import image5 from '../../stories/assets/tile/05_Tarjeta_VariacionesBoton.png';
import image6 from '../../stories/assets/tile/06_Tarjeta_VariacionesEnlace.png';
import image7 from '../../stories/assets/tile/07_Tarjeta_VariacionesLectura.png';
import image8 from '../../stories/assets/tile/08_Tarjeta_VariacionesClicable.png';
import image9 from '../../stories/assets/tile/09_Tarjeta_VariacionesRadio.png';
import image10 from '../../stories/assets/tile/10_Tarjeta_VariacionesCasilla.png';
import image11 from '../../stories/assets/tile/11_Tarjeta_VariacionesNormal.png';
import image12 from '../../stories/assets/tile/12_Tarjeta_VariacionesLight.png';
import image13 from '../../stories/assets/tile/13_Tarjeta_Anatomia.png';
import image14 from '../../stories/assets/tile/14_Tarjeta_GutterCondensed.png';
import image15 from '../../stories/assets/tile/15_Tarjeta_GutterNormal.png';
import image16 from '../../stories/assets/tile/16_Tarjeta_GutterWide.png';
import image17 from '../../stories/assets/tile/17_Tarjeta_PosicionEstandar.png';
import image18 from '../../stories/assets/tile/18_Tarjeta_PosicionVertical.png';
import image19 from '../../stories/assets/tile/19_Tarjeta_PosicionHorizontal.png';
import image20 from '../../stories/assets/tile/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image20} width="150"/>


# Tarjeta / Card / Tile

La tarjeta es un contenedor de varios elementos de información breves y relacionados entre si, que se representan como una unidad conceptual. Es un componente muy flexible que permite mostrar una gran variedad de contenidos y formatos de una manera más organizada, homogénea y comprensible al usuario.

<img src={image1} width="250"/>

Las tarjetas no tienen estilos predefinidos puesto que se diseñan para cada contenido concreto, por ejemplo, tarjetas de información de ciudadanos, tarjetas de organizaciones, de servicios, trámites, ayudas y recomendaciones, próximos pasos… El componente provee una estructura básica integrada en la rejilla de la página, que ha de adaptarse a cada uso concreto en cada diseño.

La tarjeta suele ir identificada mediante un título que indica de qué tratan los datos contenidos. La tarjeta puede contener uno o varios datos, representados con textos, valores, imágenes… de diferentes tamaños y colores según se requiera dar mayor o menor relevancia a unos o a otros. Además, las tarjetas pueden incluir otros componentes como botones, enlaces…

<img src={image2} width="700"/>

No es aconsejable agrupar en una sola tarjeta un gran número de datos y componentes. En caso de tener que mostrar muchos más datos se recomienda buscar agrupaciones lógicas que permitan distribuirlos en varias tarjetas, facilitando así la lectura.

No se recomienda el uso de versiones de componentes de mayor jerarquía que la propia tarjeta dentro de la misma, como por ejemplo usar títulos, pestañas o botones primarios como parte del contenido, puesto que estos deben reservarse para su posición esperada a nivel de página o sección.

### Variaciones

Existen variaciones infinitas de tarjetas según su tamaño, formato, contenido… puesto que este contenido ofrece total libertad a la hora de diseñar la manera en que el contenido se ofrece al usuario.

Cabe destacar como particulares, las tarjetas que permiten **interacción con su contenido**, bien con botones, para realizar una o más acciones sobre los datos mostrados, como con enlaces cuando no se pretende una acción sobre los datos sino profundizar en estos.

| **Tarjeta normal**   | **Tarjeta expandible**   |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image3} width="300"/><br/>                | <br/><img src={image4} width="300"/><br/> |     

<br/>

| **Tarjeta con botón(es)**   | **Tarjeta con enlace(s)**   |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image5} width="300"/><br/>                | <br/><img src={image6} width="300"/><br/> |     

Frente a las tarjetas **normales** que muestran todo el contenido de un único vistazo, las tarjetas **expandibles** permiten presentar cantidades mayores de contenido que las habituales mediante una presentación inicial más breve y la capacidad de ampliar su tamaño empujando el resto de contenido de la página hacia abajo.

Como ya se ha explicado, las tarjetas pueden permitir interacciones con su contenido permitiendo ejecutar acciones sobre el mismo con **botones**, o navegaciones hacia mayor detalle de la información mediante **enlaces**.

Por sencillez de uso de la tarjeta, no se recomienda abusar de las interacciones con el contenido de una tarjeta. Asimismo, se recomienda que los controles de estas se posicionen en la parte inferior de la misma para diferenciar claramente el contenido de la interacción.

Asimismo, existen variaciones según la **interacción con la tarjeta como contenedor**.

| **Tarjeta normal de lectura**   | **Tarjeta clicable**   |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image7} width="300"/><br/>                | <br/><img src={image8} width="300"/><br/> |     

<br/>

| **Tarjeta seleccionable con botón de radio**   | **Tarjeta seleccionable con casilla**   |
| --------------------------------------------- | --------------------------------- | 
| <br/><img src={image9} width="300"/><br/>                | <br/><img src={image10} width="300"/><br/> |     

Las tarjetas de **lectura** se usan simplemente para mostrar información al usuario. Son conjuntos de contenido individual puro.

Las tarjetas **clicables** se pueden usar como elementos de navegación, donde toda la tarjeta funciona como un elemento que al ser pulsado lleva al usuario a una nueva página relacionada con el contenido. Estas tarjetas no permiten interacción con el contenido mediante botones o enlaces.

Las tarjetas **seleccionables** funcionan como un botón de radio o como una casilla seleccionable, donde el elemento de información opcional que se puede seleccionar es más complejo que un simple texto. Estas tarjetas se usan para presentar opciones al usuario de una manera estructurada.

En cuanto a la integración de la tarjeta con el fondo, existe también una variación respecto al color del fondo, que permite integrar el componente en bloques con un color de fondo blanco y donde no destaque, o gris (o similares) y queramos que el contraste sea equivalente al de la tarjeta normal sobre fondo blanco.

| **Tarjeta normal (por defecto)**   | **Tarjeta clara (light)**   |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image11} width="300"/><br/>                | <br/><img src={image12} width="300"/><br/> |                                                             |

### Anatomía

La anatomía de las tarjetas es dependiente del diseño concreto de cada una. En líneas generales se recomienda el uso de tipografías estándar para los textos, esto es Lato 16px regular para los textos normales, Lato 18px bold para títulos, y Lato 12px regular para los detalles.

Asimismo se recomienda emplear medidas de espaciado que respeten los estándares de espaciado de todos los componentes, esto es un padding genérico entre elementos de 16px, o dos mini unidades de espaciado, y otros menores de 8px o mayores de 24px o 32px donde sea necesario.

<img src={image13} width="700"/>

Esta misma recomendación de espaciados estándar se aplica también a los conjuntos de tarjetas. Se recomienta, para una **distribución normal**, una distancia de 16px entre elementos (gutter), tanto en horizontal como en vertical en las distintas agrupaciones de tarjetas.

<img src={image14} width="700"/>

Esta recomendación de distancias entre conjuntos depende de la distribución concreta, el formato de la propia tarjeta, su integración en el contexto de la página…

Otras distribuciones habituales pueden ser con un espaciado mayor, en una **distribución amplia** (wide), de 32px entre elemntos, o **distribución condensada** (condensed) donde la separación entre ellas es de 1px (que equivale a tarjetas prácticamente unidas).

<img src={image15} width="700"/>

<img src={image16} width="700"/>

Teniendo en cuenta estas distribuciones, la anchura de cada tarjeta varía según el número de elementos en la página y la distribución entre ellas (normal, amplia o condensada). La altura varía según el contenido de las tarjetas. Es importante definir un **ratio de aspecto** (aspect ratio) que mantiene constante la relación de ancho y alto de cada tarjeta dentro de un conjunto. Ratios tipo son 3:2, 2:3, 2:1…, aunque cualquier relación que visualmente tenga sentido en un conjunto es válida.

### Posición

La agrupación de tarjetas son una forma útil de alinear tarjetas que tienen una relación sólida. Los grupos de tarjetas por lo general fluyen horizontalmente de izquierda a derecha y tienen una importancia jerárquica similar, como los mosaicos de navegación o catálogos.

La integración de las tarjetas en la retícula de la página se puede hacer de varias maneras. Hay tres distribuciones básicas para las tarjetas, estándar, de construcción vertical y de construcción horizontal. El diseño estándar será la versión más utilizada.

La distribución de **construcción estándar** distribuye las tarjetas a lo alto y ancho sobre la retícula con las mismas medidas para cada una de ellas. Una distribución de **construcción vertical** puede variar en altura, pero se mantienen las anchuras. Una distribución de **construcción horizontal** puede variar en el ancho, en este caso las filas de las tarjetas pueden variar en altura, pero mantienen la misma altura.

| **Construcción estándar**                                    |
| ------------------------------------------------------------ |
| <img src={image17} width="700"/> |

| **Construcción vertical**                                    |
| ------------------------------------------------------------ |
| <img src={image18} width="700"/> |

| **Construcción horizontal**                                  |
| ------------------------------------------------------------ |
| <img src={image19} width="700"/> |


### Código

```
<tile></tile>
```

### Tokens

**Color**

| Class                        | Property         | Color token |
| :--------------------------- | :--------------- | :---------- |
| `.bx--tile`                  | background-color | `$ui-01`    |
| `.bx--tile:focus`            | border           | `$focus`    |
| `.bx--tile:hover`            | background-color | `$hover-ui` |
| `.bx--tile--is-selected`     | border           | `$ui-05`    |
| `.bx--tile__chevron`         | svg              | `$icon-01`  |
| `.bx--tile__checkmark`       | svg              | `$icon-01`  |
| `.bx--tile__checkmark:hover` | svg              | `$icon-02`  |

**Estructura**

| Class       | Property          | Spacing token |
| :---------- | :---------------- | :------------ |
| `.bx--tile` | min-height        | –             |
| `.bx--tile` | min-width         | –             |
| `.bx--tile` | padding (minimum) | `$spacing-05` |