Criação de cards
Confira como criar, inserir ícones e o símbolo [i] de "informação" nos cards de uma capa.
Criação de Cards
Para exibição do conteúdo em formato de cards, é preciso criar uma capa para poder ter acesso à funcionalidade "Layout", mas também é possível aplicar o template de cards sobre um conjunto de pastas.
Passo a passo para configurar Cards numa Capa
- Crie uma capa dentro de uma pasta
Após criar a capa, clique em "Layout", no menu de edição.
No Layout, insira uma linha e arraste para dentro dela o tile de "Cards":
- Salve;
- Em seguida, clique no menu "Compor". Imediatamente, vai aparecer no canto direito da página o botão "Adicionar conteúdo".
- Ao clicar no botão "Adicionar conteúdo", clique em "Árvore de conteúdo", depois em "Português Brasil", em seguida procure e escolha as páginas, pastas e links que você deseja adicionar como card. Quando encontrar o conteúdo desejado, é só clicar e arrastar para dentro da linha de edição onde está escrito "Cards".
- As pastas e páginas precisam estar publicadas para serem adicionadas ao tile de cards.
Visão dos Cards
Após arrastar os conteúdos para dentro do tile de Cards, clique em visão. Por padrão, eles ficarão no tamanho grande. Veja:
- Para configurar a área de cards: clique em "Compor" no menu de edição, depois em "editar" no tile de cards. Pode configurar os cards com o tamanho pequeno, escolher a quantidade de cards por linha, mudar o alinhamento, colocar título ou subtítulo na área de cards, e até mesmo criar um botão com link.
- Confira a seguir a tela de configuração:
- Se optar por cards grandes, poderá colocar, no máximo 4 por linha.
- Se optar por cards pequenos, poderá colocar até 5 cards por linha, mas não poderá adicionar botão.
Confira a seguir a visão dos cards pequenos resultantes da configuração acima:
- Para excluir cards da capa ou alterar a disposição, clique em "Compor", no menu de edição da capa, em seguida em "Editar" no tile de cards:
- para excluir, basta clicar no x ao lado do nome do conteúdo;
- para arrastar, basta clicar no conteúdo dentro do tile e arrastar pra cima ou para baixo, conforme desejado. Ve na imagem:
Quer que apareça o símbolo de informação "i" no card?
Para aparecer o símbolo de informação "i" no card, cada pasta, página ou link escolhidos para a área terá que ter uma descrição. Ex. página. Entre na página, edite-a e coloque uma descrição mínima do que é aquele conteúdo. Veja exemplo abaixo:
Quer que apareça o ícone no card?
- Para aparecer o ícone no card, é preciso colocar o código dos ícones na edição da página também.
- Como encontrar esses ícones? Conforme o Design System do GOV.BR, foi escolhida a coleção free de ícones “Font Awesome“ - versão 6.7.2.2 (Free Icons | Font Awesome). Lembre-se de escolher ícones semânticos e que tenham a ver com o conteúdo a ser disponibilizado.
- Como colocar os ícones? Copie o código do ícone do site acima, depois volte no site e edite a página, link ou pasta que você quer que apareça nos cards. No item "Card", cole o código da fonte Awesome que você copiou, ajustando para que o campo "Classe de css" fique como na imagem abaixo. Salvar e voltar à capa pra visualizá-los.
