Informativo: Bloco Cartões

Conteúdo

O bloco Cartões mostra até 6 caixinhas (os cartões), cada uma com um ícone, um título, um texto curto e, se quiser, um botão. É bom para listar diferenciais, serviços ou vantagens de forma organizada. Acima dos cartões pode haver um título e um subtítulo para a seção inteira.

Para acrescentar, mover ou remover blocos numa página, veja a página “Editor de páginas”. Em cada figura, os círculos vermelhos numerados mostram a parte da tela que está sendo explicada. O número do círculo é o mesmo número da lista logo abaixo da figura.

Como os Cartões aparecem no site

Figura 1 — Três cartões em grade, no site.

1. Título da seção — o título acima de todos os cartões.
2. Subtítulo — um texto curto abaixo do título da seção.
3. Ícone — uma imagem pequena no topo do cartão. Funciona melhor com desenhos simples, em SVG ou PNG.
4. Título do cartão — o nome do item.
5. Texto — a explicação curta do item.
6. Botão — leva a outra página. Só aparece quando o texto e o endereço do botão estão preenchidos. Endereços de outros sites abrem em outra aba.

Cada cartão mostra só o que estiver preenchido: dá para ter cartões sem ícone ou sem botão, como os dois da direita na figura.

Layout em slide

No layout Slide (com setas), os cartões ficam numa faixa só, e o visitante passa por eles com as setas ou deslizando o dedo no celular.

Figura 2 — Os mesmos cartões no layout Slide, com 2 itens por vez.

1. Cartão — os cartões aparecem lado a lado, na quantidade escolhida em “Itens por vez”.
2. Seta para trás — volta um cartão. Fica apagada quando o primeiro cartão já está na tela.
3. Seta para frente — avança um cartão.

As setas só aparecem quando nem todos os cartões cabem na tela.

Opções do bloco

Figura 3 — Opções gerais dos Cartões.

1. Fundo — a cor de fundo da seção: Claro (padrão), Escuro ou Suave.
2. Layout — como os cartões se organizam:
   • Grade (lado a lado): em linhas, lado a lado (Figura 1);
   • Lista (um embaixo do outro; o resto em slide): um cartão por linha; se houver mais cartões do que “Itens por vez”, os que sobram ficam em páginas seguintes, com setas;
   • Slide (com setas): todos numa faixa, com setas (Figura 2).
3. Itens por vez — quantos cartões aparecem de uma vez: 3, 2 ou 4. Na grade e no slide, é quantos ficam lado a lado no computador; na lista, quantos ficam um embaixo do outro antes de virar a página.
4. Alinhamento dos cartões — o texto dentro dos cartões fica À esquerda (padrão) ou Centralizado.
5. Tamanho do ícone — Pequeno (padrão) ou Grande.
6. Título da seção — o título acima dos cartões (Figura 1, item 1).
7. Subtítulo — o texto abaixo do título da seção (Figura 1, item 2).
8. Cartões — a lista de cartões e, no canto, quantos existem do máximo de 6.
9. Cartão — cada linha é um cartão, com o número e o título. Clicar abre os campos (Figura 4).
10. Adicionar — cria um cartão novo no fim da lista.

Um bloco Cartões sem nenhum cartão não aparece no site. Na prévia do editor, aparece como o aviso “Nenhum cartão”.

Campos de um cartão

Figura 4 — Um cartão aberto para editar.

1. Cabeçalho do cartão — o número e o título. Clicar abre ou fecha o cartão.
2. Setas — ↑ e ↓ mudam a ordem dos cartões.
3. X — tira o cartão do bloco.
4. Ícone — opcional. Escolha da Mídia (Biblioteca) ou envie um arquivo (Enviar arquivo); aceita SVG. O ícone é só decorativo: o título do cartão já diz do que se trata.
5. Título — o nome do item (Figura 1, item 4).
6. Texto — a explicação curta (Figura 1, item 5).
7. Texto do botão — o que vai escrito no botão.
8. Endereço do botão — para onde o botão leva: uma página do site (como /sobre) ou o endereço completo de outro site.

Dicas

• Use a mesma quantidade de texto em todos os cartões, para eles ficarem com altura parecida.
• Prefira ícones do mesmo estilo e da mesma cor.
• Com 4 ou mais cartões, 2 ou 4 itens por vez costuma ficar mais equilibrado que 3.

Controle de Mudanças

Notas adicionais

As imagens usam as telas reais do NetCorp em um ambiente de demonstração. Os textos e os ícones são exemplos fictícios, não dados de um cliente. Os números vermelhos foram acrescentados às figuras e não aparecem no site nem no painel.

Contato de suporte: a preencher.

Referências

• NetCorp — bloco Cartões do site e editor de páginas do painel.
• Modelo de página Informativo e blocos de conteúdo da base de conhecimento.