Card Panel
Es un contenedor de contenido flexible y extensible. Incluye opciones de encabezado, footer para mostrar su contenido. Su flexibilidad permite distintas variantes y estilos de contenido con opciones de visualización en disposiciones horizontales y verticales.
Playground
Tipo de Card Panel
Card Panel con imagen
- Ruby
- Html
<%= card_panel_widget :default,
title: 'Card Panel con imagen' %>
<div class="card-panel ">
<div class="card-panel__imagen">
<img class="fondo" src="" />
</div>
<div class="card-panel__titulo">
<h3 class="modal-title text-truncate">
Título Card Panel
</h3>
</div>
</div>
Lista de parámetros
Card Panel
| Parámetro | Tipo | Detalle |
| type | String | Define el tipo, por "default" o de "reconocimiento" |
| title | String | Define el título |
| icon | String | (Opcional) Agrega un ícono en el título |
| icon_tooltip | String | (Opcional) Agrega un texto como tooltip en el ícono |
| description | String | Agrega un texto descriptivo |
| card_panel_class | String | (Opcional) Se pueden agregar clases personzalizadas |
| background_image_url | String | (Opcional) Agrega la imagen de fondo, a pesar de que es opcional, sino se agrega una, aparecerá una por defecto |
| status | String | (Opcional), Define el tipo de estado del Card Panel |
| status_message | String | (Opcional) Define el texto del estado |
| body | String | (Opcional) Agrega un bloque en el contenido si es necesario agregar mas info, no puede ser definido junto a description |
| footer | String | (Opcional) Agrega un bloque para el footer |
Caso especial: Reconocimientos, atributos específicos
| Parámetro | Tipo | Detalle |
| show_avatar | Boolean | (Opcional) Por defecto true, sirve para desactivar el avatar en vistas donde no se utiliza |
| avatar_image | String | (Opcional) Agrega la imagen del avatar, a pesar de que es opcional, sino se agrega una, aparecerá una por defecto |
| award_image | String | (Opcional) Agrega la imagen del premio, a pesar de que es opcional, sino se agrega una, aparecerá una por defecto |
Anatomía
1. Contenedor
Contienen todos los elementos del card. La elevación del card se genera por medio de una sombra.
2. Huincha [Opcional]
En ocasiones el card puede llevar una huincha la cual puede servir para destacar una acción, un cambio de estado dentro del card o simplemente un texto adicional.
3. Media [Opcional]
Los Card Panel pueden incluir una variedad de medias, incluidas imágenes, gráficas vectoriales, avatares o iconos. Al menos que se especifique lo contrario, debiese llevar una imagen tipo placeholder (por defecto), en los casos donde la imagen no se haya cargado correctamente.
4. Título
texto del encabezado puede incluir cosas como el nombre de un álbum de fotos, un artículo, el nombre de un beneficio, un curso, o un encabezad de cualquier tipo.
5. Texto de apoyo [opcional]
El texto de apoyo incluye texto como el resumen de un artículo o la descripción de un beneficio o de la tarjeta en si.
6. Footer [opcional]
Pueden llevar chips, botones o distintas acciones dentro del footer.
Casos de uso
Es un contenedor de contenido flexible y extensible. Incluye opciones de encabezado, footer para mostrar su contenido. Su flexibilidad permite distintas variantes y estilos de contenido con opciones de visualización en disposiciones horizontales y verticales.
Tipos de contenido
El componente permite una amplia variedad de contenido, incluida imágenes, textos, avatares, iconos, enlaces, chips y más.
¿Cuando usarlos?
Muestran contenido y acciones sobre un solo tema. Deben ser fáciles de escanear por el usuario y visualmente atractivas. Su objetivo es entregar información relevante y procesable. Los elementos como texto e imágenes se utilizan para proporcionar jerarquía visual y hacerlos más destacables.
- Se identifica como una sola unidad
- Es independiente, puede convivir solo o en un layout con otros cards
- Es individual, un **Card Panel** NO puede unirse con otro ni dividirse