Carrusel

El propósito del módulo «Tarjetas-Carrusel» es poder ofrecer un acceso rápido a los contenidos a los usuarios a través de tarjetas. Cada una de las tarjetas contiene un enlace personalizado que redirige al contenido en su interior.  

Son tarjetas interactivas que cuentan con dos estados: un estado compacto y un estado expandido. Son comunmente utilizadas en carruseles de tarjetas para mostrar información de manera dinámica y visualmente atractiva. Combinan recursos gráficos (como un icono, ilustración o imagen) con un texto breve y relevante, mejorando la comprensión y la estética de la información presentada. Constitiuyen un tipo de fragmento que facilita una navegación ágil a través de sus contenidos. 

La animación del componente está compuesta por dos estados:

  • Estado compacto (por defecto): cambia cuando el usuario deja posado el cursor sobre la tarjeta

  • Estado expandido (Hover): es el resultado de la interacción con el cursor

Además de la animación, la forma de interacción principal que tiene el usuario con este fragmento es hacer click sobre la tarjeta (Presionado + En foco),  para redirigirle al enlace que el editor haya atribuido a esa tarjeta. 

Dispone de dos variantes según los elementos que incluya, una con filtro de búsqueda y otra sin él, ya que el fragmento «FRG_Carrusel» posee un campo en la configuración para mostrar u ocultar el filtro. Según la opción seleccionada, el fragmento tendrá una o dos zonas de colocación: aquella reservada para las tarjetas de cada slide (que son los fragmentos «FRG_Tarjeta_Recurso_Grafico») y otra para los filtros, donde tendremos que arrastrar el fragmento «FRG_FiltroDesplegableConOpciones». 

El fragmento «FRG_Tarjeta_Recurso_Grafico» posee varias configuraciones que nos permiten mostrar las tarjetas con aspectos diferentes: 

  • Tipo «Compacta»
    La tarjeta compacta permite añadir un icono en positivo y otro en negativo en la parte superior del slide. 
  • Tipo «Ilustración»
  • Este modo da opción a utilizar una imagen como fondo de la tarjeta, así como una imagen virgulilla (un elemento visual anclado en la zona media derecha de la tarjeta). 
     

imágeneS


Si necesitas subir una imagen nueva para añadirla a este fragmento, la resolución recomendada para las tarjetas es de 112px x 112px. Si en cambio vas a utilizar imágenes de «Documentos y multimedia», utiliza la menor medida que ofrezcan las opciones de la imagen (en este caso serán 300 px x 0 px).

 

Elementos móviles

Nota editores: Se ha de tener en cuenta que este módulo debido a que el diseño responsivo cambia la posición de ciertos elementos y tiene sus componentes exclusivos para dicha vista ocultando en este caso los presentes en escritorio.

El botón del módulo se desplaza al contenedor "Contenedor botón móvil" situado debajo del carrusel esto es con la ayuda del fragmento FRG_MoverElementoResponsivo, es importante que esten ambos para su correcto funcionamiento.

FRG_CMP_Carrusel (versión con filtro)

Fragmento > Módulos - Tarjetas > FRG_CMP_Carrusel

Label

Heading Example


A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.
Usos múltiples de la classe del contenidor mòbil

Error de funcionament - Per a un funcionament correcte, cal que la classe "js-contenedor-movil-boton-carrusel-filtro" utilitzada per al contenidor mòbil s'utilitzi una sola vegada en aquesta pàgina.

Element buit

Component sense funció - Afegeix a aquesta àrea qualsevol element que vulguis desplaçar a un altre lloc en la visualització mòbil.

FRG_CMP_CarruselSinFiltro (versión sin filtro)

Fragmento > Modulos - Tarjetas > FRG_CMP_CarruselSinFiltro

Label

Heading Example


A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.
Usos múltiples de la classe del contenidor mòbil

Error de funcionament - Per a un funcionament correcte, cal que la classe "js-contenedor-movil-boton-carrusel" utilitzada per al contenidor mòbil s'utilitzi una sola vegada en aquesta pàgina.

Element buit

Component sense funció - Afegeix a aquesta àrea qualsevol element que vulguis desplaçar a un altre lloc en la visualització mòbil.