---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/card'
title: 'Adding a Card | 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: 'Image, title, text card'
tags:
  - Marketing
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: 'Adding a Card'
      description: 'Image, title, text card'
      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/elements/card'
      articleSection: Marketing
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/card'
      description: 'Image, title, text card'
      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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/hc/documentation/learn-dxpr-builder/elements/marketing) # Adding a Card.

Image, title, text card

 Learn DXPR BuilderBuild pagesAdd contentMarketing

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a framed box with a header and a title that holds other elements, such as text or a button. Use cards to group related content like services, team profiles or price plans.

## Add a card

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Card**. It lands at the top of the column, without a dialog.
2. Hover it, click **More** in its control bar and choose **Settings**. Type a **Header**, for example Investor Relations.
3. Type the card **Title**, for example Q3 Results Published.
4. Choose a **Type** for the card style. Here we pick **Primary**. The text turns white automatically.
5. Click **Save** in the dialog.
6. Hover the card and click **+** in its own control bar, not the column's. The **+** in the empty card body works too. Add a **Button**, because a card is a container. Set its label and link as in [Button](/hc/documentation/learn-dxpr-builder/elements/button). Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

Your header and title sit on a card in the colour you picked, with the button inside. In the video, they read Investor Relations and Q3 Results Published on a Primary card. The button is a normal Button element, so you edit and style it on its own. Visitors see it once you save the page and it is published.

## Set up your card

Hover the element and open **More > Settings** in its control bar. Options:

- **Header:** text in the bar at the top of the card. Leave it empty to hide the bar.
- **Title:** the heading at the top of the card body.
- **Type:** the card colour: Default, Primary, Secondary, Success, Info, Warning, Danger, Dark or Light. All but Default and Light use white text.

A card is a container. Add or drag other elements into its body, such as text, an image or a button.

## If you don't see it

- **Card is not in the Content tab.** Your user profile hides it. Ask an administrator to tick **Card (Bootstrap 4/5)** under **Elements** in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The card shows only a border and nothing inside.** No elements are inside it yet. Hover the card, click **+** in its control bar and add a Text, Image or Button.
- **The header bar is missing.** The **Header** field is empty. Hover the element and open **More > Settings**, then type a header.
- **Text on the card is hard to read.** Most **Type** options use white text, which fades on a light colour such as Warning. Pick a darker Type, or Light.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your card.