Estilizar os cartões.

Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design

Dê aos cartões um aspeto que combina com o site: um esquema de cores do Type do cartão, cantos arredondados e uma sombra do painel Style. No fim tem um cartão que pode repetir numa linha para funcionalidades, membros da equipa ou preços. Para colocar primeiro um cartão na página, consulte Adicionar um cartão.

O vídeo segue os passos abaixo: dá a um cartão um aspeto claro, cantos redondos e uma sombra suave.

Estilizar um cartão

  1. Paire sobre o cartão, abra More e escolha Settings.
  2. Em Type, escolha Light.
  3. Abra o painel Style.
  4. Defina Border radius como 8.
  5. Defina Drop shadow como 2.
  6. Clique em Save.

O que vê

O cartão tem um fundo claro, cantos arredondados e uma sombra suave. A barra Header fica no topo, o Title abre o corpo, e os elementos adicionados dentro seguem abaixo.

Um Type pinta o cartão inteiro, não apenas o cabeçalho. Primary, Secondary, Success, Info, Warning, Danger e Dark enchem o cartão com essa cor do tema e tornam o texto branco. Light dá um fundo claro com texto normal. Default deixa o cartão para o tema.

Definições

Setting Where What it does
Header General Texto numa barra no topo do cartão; deixe vazio para não haver barra
Title General Um título no topo do corpo do cartão
Type General O esquema de cores de todo o cartão; predefinição Default
Background, Font color Style As cores próprias, quando Type é Default
Border radius Style Cantos arredondados, em píxeis
Drop shadow Style Profundidade, de 1 a 5
Border (modelo de caixa), Border style, Border color Style Uma moldura num ou mais lados

Padrões de cartão

  • Flat card: Border style Solid, um Border color claro, Border radius 4, sem sombra.
  • Elevated card: Drop shadow 2, Border style None, Border radius 8.
  • Highlighted card: defina o lado esquerdo de Border no modelo de caixa como 4, Border style Solid e um Border color de destaque.
  • Card that lifts: Drop shadow 1 em Style e 4 em Hover style; consulte Tornar os elementos reativos ao pairar.

Cartões em linha

Para uma grelha de cartões de funcionalidades, membros da equipa ou preços:

  1. Adicione uma linha e escolha um esquema com três ou quatro colunas iguais.
  2. Adicione um cartão a cada coluna e dê a cada cartão os mesmos valores de Type e Style.
  3. Abra o menu More da linha, escolha Settings e ligue Equal-height columns.

As colunas alinham-se, mas cada cartão mantém a altura do conteúdo. Mantenha o texto de cada cartão com comprimento parecido, para os cartões terminarem à mesma altura. Numa tabela de preços, destaque o plano recomendado com outro Type ou um Drop shadow mais fundo.

Se o estilo não aparece

  • Background or Font color in the Style panel has no effect. Um Type diferente de Default define as cores do cartão com classes do tema que prevalecem sobre o painel Style. Defina Type como Default e escolha as cores próprias.
  • White text on a coloured card is hard to read. As cores Warning e Info de muitos temas são pálidas, e estes tipos definem sempre texto branco. Escolha um Type mais escuro, ou Light, que mantém a cor de texto normal.
  • The shadow does not show. Drop shadow é 0, o que significa sem sombra. Defina-o como 1 ou mais.

O que se segue?