--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/estilos-de-cartao' title: 'Estilizar os cartões | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:47:13+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Estilizar os cartões' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:47:13+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/estilos-de-cartao' articleSection: 'Guias de design' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/estilos-de-cartao' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) /[Guias de design](/pt-pt/hc/documentation/learn-dxpr-builder/design/overview) # Estilizar os cartões. Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design ## Neste guia Guias relacionados - [Adicionar um cartão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/cartao) - [Tornar os elementos reativos ao pairar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-ao-pairar) - [Utilizar as cores da marca](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/cores-e-marca) 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/cartao). 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](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-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? - [Adicionar um cartão](/pt-pt/hc/documentacao/aprender-dxpr-builder/elementos/cartao): adicione um cartão e encha-o com elementos. - [Tornar os elementos reativos ao pairar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/efeitos-ao-pairar): deixe os cartões levantar quando os visitantes apontam para eles. - [Utilizar as cores da marca](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/cores-e-marca): mantenha as cores dos cartões alinhadas com o resto do site.