Cards Collection

Cards Collection es el nombre que se le da a la plantilla / template al conjunto de multiples cards en una vista, con el objetivo de normar su uso como grupo. Estos deben seguir un patron consistentes en cuanto a estilos visuales y disposición dentro de una vista.

Anatomía

1. Encabezado [opcional]

Puede ser un hero banner o un carrusel con imagenes, además es un encabezado compuesto, puede ir acompañado de otros componentes como categorías y tabs.

2. Buscador

La plantilla lleva la opcion de filtrar por medio de un buscador.

3. Template de cards

Grupo de componentes card_panel o card_widget dependiendo del caso de uso.

Interacciones Permitidas

La plantilla de cards cumple un rol interactivo, es decir el usuario puede interactuar con el card para gatillar una acción. El texto dentro de cada card debe limitarse a una descripción breve, el contexto completo se mostrara en un segundo paso utilizando un componente externo. En Buk hemos definido las siguientes interacciones:

Side bar

Al pinchar uno de los cards, este abre un Side bar con el detalle de la información.

Modales

Al pinchar uno de los cards, este abre un Modal con el detalle de la información.

Vistas

Al pinchar uno de los cards, este me lleva a una segunda vista con mayor detalle.

¿Donde usar el template?

Usualmente el template de cards se utiliza dentro de un outer box en vistas completas, con el objetivo de aprovechar la mayor pare del espacio de la vista y de esta forma mostrar la mayor cantidad de información de manera atractiva, pero este no es el único lugar en donde se pueden mostrat. La plantilla de cards también puede usarse dentre de modales de 900px en adelante.

Cards en Modales

Estos son las únicas superficies en las que se puede utilizar la plantilla en grupo de cards. Por ningún motivo deberían estar dentro de otros componentes de espacio reducido, como por ejemplo el Aside. Para casos como ese, se debe utilizar el componente de manera aislada. Como es el actual caso de reconocimientos, al pinchar un reconocimiento podemos ver el detalle del mismo.

Layout grid / Breakpoints

El template tiene un comportamiento responsivo, en un breakpoint de 1366 cada card utilizara un espacio de 4 columnas, haciendo un total de 12. Si el breakpoint es mayor, este se ajusta responsivamente mostrando hasta un total de 5 cards por vista. En un breakpoint mas pequeño ej: 960ox, cada card utilizará 6 columnas y en mobile cada card utilizara el ancho completo de 12 columnas.

Card collection en integraciones

Ejemplo de card collection en integraciones. La logica del layout grid para ambos template (ya sea card panel o card widget es la misma)

Usos actuales en Buk

• Beneficios
• Capacitaciones
• Integraciones
• Reconocimientos

El tipo de template a utilizar dependera de las necesidades del producto. Si el objetivo es mostrar / anunciar de manera atractiva una vitrina de productos, bienes o features dandole un abanico de opciones los usuarios pensando en un concepto más ligado al marketing, el template adecuado es el conjunto de card panel, ya que este disponey brinda la posibilidad al usuario de cargar una imagen custom de un cierto producto y una descripción breve con el objetivo de hacerlo más atractivo e invitar al usuario a ver máyor detalle.

Si el objetivo es mas enterprice b2b como agregar una nueva API o integración el template adecuado es utilizando el card widget con una pequeña imagen, sin mucho detalle como el isotipo / simbolo de una empresa o un icono.