---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/card-styles'
title: 'Style your cards | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Give cards a colour scheme, rounded corners, shadows and borders that match your brand'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Style your cards'
      description: 'Give cards a colour scheme, rounded corners, shadows and borders that match your brand'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/design/card-styles'
      articleSection: 'Design guides'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/card-styles'
      description: 'Give cards a colour scheme, rounded corners, shadows and borders that match your brand'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Style your cards.

Give cards a colour scheme, rounded corners, shadows and borders that match your brand

 Learn DXPR BuilderBuild pagesStyle your elementsDesign guides

   ## In this guide

 Related guides

- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects)
- [Colour and branding](/hc/documentation/learn-dxpr-builder/design/colour-and-branding)

Give your cards a look that fits your site: a colour scheme from the card's **Type**, rounded corners and a shadow from the **Style** panel. At the end you have a card you can repeat across a row for features, team members or prices. To place a card on the page first, see [Adding a Card](/hc/documentation/learn-dxpr-builder/elements/card).

The video follows the steps below: it gives a card a light look, round corners and a soft shadow.

  ## Style a card

1. Hover the card, open **More** and choose **Settings**.
2. Under **Type**, choose **Light**.
3. Open the **Style** panel.
4. Set **Border radius** to 8.
5. Set **Drop shadow** to 2.
6. Click **Save**.

## What you see

The card has a light background, rounded corners and a soft shadow. Its **Header** bar sits at the top, its **Title** opens the body, and the elements you added inside follow below.

A **Type** colours the whole card, not only the header. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** and **Dark** fill the card with that theme colour and make the text white. **Light** gives a light background with normal text. **Default** leaves the card to your theme.

## Settings

| Setting | Where | What it does |
|---|---|---|
| **Header** | **General** | Text in a bar at the top of the card; leave it empty for no bar |
| **Title** | **General** | A heading at the top of the card body |
| **Type** | **General** | The colour scheme of the whole card; default **Default** |
| **Background**, **Font color** | **Style** | Your own colours, when **Type** is **Default** |
| **Border radius** | **Style** | Rounded corners, in pixels |
| **Drop shadow** | **Style** | Depth, from 1 to 5 |
| **Border** (box model), **Border style**, **Border color** | **Style** | A frame on one or more sides |

## Card patterns

- **Flat card**: **Border style** **Solid**, a light **Border color**, **Border radius** 4, no shadow.
- **Elevated card**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8.
- **Highlighted card**: set the left side of **Border** in the box model to 4, **Border style** **Solid** and an accent **Border color**.
- **Card that lifts**: **Drop shadow** 1 in **Style** and 4 in **Hover style**; see [Make elements react on hover](/hc/documentation/learn-dxpr-builder/design/hover-effects).

## Cards in a row

For a grid of feature cards, team members or prices:

1. Add a row and pick a layout with three or four equal columns.
2. Add a card to each column and give every card the same **Type** and **Style** values.
3. Open the row's **More** menu, choose **Settings** and switch on **Equal-height columns**.

The columns line up, but each card stays as tall as its content. Keep the text of each card about the same length, so the cards end at the same height. For a pricing table, highlight the recommended plan with another **Type** or a deeper **Drop shadow**.

## If you don't see the style

- **Background or Font color in the Style panel has no effect.** A **Type** other than **Default** sets the card's colours with theme classes that win over the **Style** panel. Set **Type** to **Default** and choose your own colours.
- **White text on a coloured card is hard to read.** The **Warning** and **Info** colours of many themes are pale, and these types always set white text. Choose a darker **Type**, or **Light**, which keeps the normal text colour.
- **The shadow does not show.** **Drop shadow** is 0, which means no shadow. Set it to 1 or higher.

## What's next?

- [Adding a Card](/hc/documentation/learn-dxpr-builder/elements/card): add a card and fill it with elements.
- [Make elements react on hover](/hc/documentation/learn-dxpr-builder/design/hover-effects): let cards lift when visitors point at them.
- [Use your brand colours](/hc/documentation/learn-dxpr-builder/design/colour-and-branding): keep card colours in line with the rest of the site.