O Card é um elemento exclusivo do RockFunnels e bastante flexível, que cobre algumas situações onde o uso de colunas se mostra um pouco limitado. Por exemplo, se você quiser exibir três cartões (cards) na tela e deixar um espaço entre eles, além de configurar bordas e sombras entre eles, o uso de colunas se mostra inadequado.

Para esse tipo de situação o uso do Card é ideal.

Por padrão, o Card é gerado com um elemento de imagem, um elemento de titulo e outro de parágrafo que poderá editar conforme desejado ao clicar nos ícones de engrenagem de cada elemento. É possível também adicionar outros tipos de elemento ao Card e excluir elementos que não deseja utilizar.

Atenção: Elementos de Lançamento, Formulário, Carrossel, Galeria de Imagens, Bullet Point e FAQ não funcionam corretamente no Card, sendo assim, indicamos não utilizar esses elementos em um Card.

Em caso de dúvidas sobre como adicionar um Card em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos no link abaixo:
​
​https://help.rockfunnels.com/pt-BR/articles/6004116-como-funcionam-as-configuracoes-gerais-de-elementos-no-rockfunnels

Caso tenha dúvidas na configuração de elementos específicos, acesse o tutorial do elemento desejado no link abaixo:
​
​https://help.rockfunnels.com/pt-BR/collections/3275252-construtor-builder#elementos

Acesse o ícone de engrenagem do Card para disponibilizar as possibilidades de configuração que veremos nesse tutorial.

· Visibilidade

Nas configurações de ajustes é possível configurar a visibilidade do elemento. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o elemento em cada um desses dispositivos. Para voltar a mostrar o elemento que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.

· Insira um novo Card

Por padrão um elemento card é gerado com 3 cards, mas você pode excluir individualmente os cards ao clicar no ícone em formato de lixeira a frente do card que deseja deletar ou adicionar mais cards no elemento ao clicar no botão com o ícone +.

Nas configurações de posição é possível configurar largura do elemento, espaço entre os cards, posição, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita) inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Em separador, é possível inserir uma imagem que será usada na separação dos elementos de card. Para inserir a imagem, clique na imagem à frente do texto ‘imagem’ para ter acesso à biblioteca de imagens do RockFunnels ou subir uma imagem do seu dispositivo. Para excluir a imagem clique no ícone de lixeira.

​Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.

· Cor de fundo

Nas configurações de estilo é possível configurar a cor de fundo do elemento utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente, definindo uma orientação para a cor de fundo da seção. Para excluir a cor, clique no ícone de lixeira.

· Imagem

Nas configurações de estilo é possível inserir a imagem de fundo no elemento. Para isso, basta clicar em “Alterar Imagem” para ter acesso à biblioteca de imagens do RockFunnels ou subir uma imagem do seu dispositivo. Para excluir uma imagem, clique no ícone de lixeira.

· Borda | Radial | Sombra

Nas configurações de estilo é possível configurar borda e sombra na imagem. Para isso basta ativar a respectiva chave que então será habilitada a possibilidade de inserir a cor da borda e/ou da sombra através da paleta de cores ou inserindo o código HEX da cor desejada. Para excluir a cor, clique no ícone de lixeira.

Para ajustar o tamanho da borda, deslocamento ou esfumaçar a sombra, insira um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

Para configurar o radial basta ativar a respectiva chave e configurar os valores de radial manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.

· Efeitos de movimento – Animação

Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.

Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:

Comportamento:

- Uma vez > o efeito de animação será apresentado apenas uma vez.

- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).

Ativação:

- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
​
​- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.

Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.

Atraso: É possível configurar um atraso na imagem, ou seja, a imagem irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.

· CSS Classes

Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.

É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.

Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
​
​https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels