Os cards são usados para organizar o conteúdo de uma página. Você estará limitado a 4 cards por linha.
Existem duas opções para cards: com ou sem bordas. Os cards com bordas colocam uma borda cinza fina ao redor do perímetro do card, enquanto os cards sem bordas não.
Como Criar Cards
- Crie uma página ou edite uma existente.
- Clique em Adicionar Cards.
- Selecione o número de cards por linha (3 é padrão, mas até 4 cards são permitidos).
- Em Card Style, escolha entre Borda ou Sem Bordas.
- Escolha um Card Title Style, Título Dentro do Card (padrão) ou Título na Imagem.
- Escolha um nível de título para os títulos do seu card usando o menu suspenso Card Title Level (o nível do título do seu card).
- Selecione um Card Title Display Size (tamanho de exibição do título visual).
- Marque ou desmarque a caixa Clickable Cards, o que tornará todo o card clicável em vez de apenas o link.
- Em Additional Options:
- Selecione a quantidade desejada de espaço na parte inferior da linha do card antes que o próximo elemento seja exibido em Additional Options > Bottom Spacing.
- Você também pode editar a exibição em tablets e telefones. Mais detalhes são fornecidos em Exibições alternativas abaixo.
- Adicione um título. Adicionar texto no campo Card Group Title criará um título que aparece acima do seu grupo de cards. Isso é opcional.
- Se você adicionou um Título do Grupo de Cards, selecione sua cor usando o menu suspenso Card Group Title Color.
- Selecione Card Background, Add Media, insira um título do card, selecione Alinhamento do título do card, insira um Corpo do card e adicione um link com os campos Título do link do card e URL do link do card e, em seguida, selecione Estilo do link do card.
- Clique em Adicionar outro item para adicionar mais cards.
- Salve.
Recomendações de proporção de imagem de card
- Proporção renderizada: 4:3
- Tamanho máximo renderizado: 1110 × 832,5 px
- Todas as imagens são cortadas para a proporção de 4:3 (área personalizável na interface do usuário do Drupal)
- Pode fazer upload de imagens maiores que serão automaticamente reduzidas/cortadas
Exemplos de Cards com Bordas
Abaixo está uma linha de cards com bordas que demonstra a exibição de um card com uma imagem e texto, um card com uma imagem e um link e um card com texto e um link.
Within a card deck, you can also choose the number of cards displayed on a tablet or phone under Additional Options. Both these displays allow up to 4 cards per row, but it is recommended to leave the display settings at default.
Below are examples of the alternative card deck sizes and the different card colors. On the left is the mobile display, and on the right is the tablet display.
Image
Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Três
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Exemplos de Cards Sem Bordas
Abaixo está uma linha de cards sem bordas que demonstra a exibição de um card com uma imagem e texto, um card com uma imagem e um link e um card com texto e um link.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Três
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Exemplos de Cards Clicáveis e Estilos de Link
Abaixo está uma linha de cards clicáveis sem bordas que demonstra a exibição de um card com uma imagem e texto, um card com uma imagem e um link e um card com texto e um link. O segundo e o terceiro card mostram como os vínculos aparecem quando um Estilo de vínculo de card alternativo é selecionado.
Este card está definido para ser clicável, mas como nenhum link é especificado para este card, ele não pode ser clicado.
Card Três
Para o Link de Amostra 2 abaixo, o Estilo do Link do Card é definido como "Red outline button".
Cards de Exemplo Com Estilos de Título Aplicados
Abaixo está uma linha de cards com os estilos Tamanho de exibição do título e Alinhamento do título definidos como valores não padrão.