---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-tarjeta'
title: 'Da estilo a tus tarjetas | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:17:46+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Dale a tus tarjetas un aspecto que encaja con tu sitio: un esquema de color desde el Type de la tarjeta, esquinas redondeadas y una sombra desde el panel Style. Al final tienes una tarjeta que puedes repetir en una fila para funciones, equipo o precios. Para poner primero una tarjeta en la página, consulta Añadir una tarjeta.
  El vídeo sigue los pasos de abajo: da a una tarjeta un aspecto claro, esquinas redondas y una 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: 'Da estilo a tus tarjetas'
      description: |-
        Dale a tus tarjetas un aspecto que encaja con tu sitio: un esquema de color desde el Type de la tarjeta, esquinas redondeadas y una sombra desde el panel Style. Al final tienes una tarjeta que puedes repetir en una fila para funciones, equipo o precios. Para poner primero una tarjeta en la página, consulta Añadir una tarjeta.
        El vídeo sigue los pasos de abajo: da a una tarjeta un aspecto claro, esquinas redondas y una 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:17:46+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/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-tarjeta'
      articleSection: 'Guías de diseño'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-tarjeta'
      description: |-
        Dale a tus tarjetas un aspecto que encaja con tu sitio: un esquema de color desde el Type de la tarjeta, esquinas redondeadas y una sombra desde el panel Style. Al final tienes una tarjeta que puedes repetir en una fila para funciones, equipo o precios. Para poner primero una tarjeta en la página, consulta Añadir una tarjeta.
        El vídeo sigue los pasos de abajo: da a una tarjeta un aspecto claro, esquinas redondas y una sombra suave.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) /[Guías de diseño](/es/hc/documentation/learn-dxpr-builder/design/overview) # Da estilo a tus tarjetas.

 Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño

   ## En esta guía

 Guías relacionadas

- [Añadir una tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta)
- [Haz que los elementos reaccionen en hover](/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover)
- [Usa los colores de tu marca](/es/hc/documentacion/aprender-dxpr-builder/diseno/colores-marca)

Dale a tus tarjetas un aspecto que encaja con tu sitio: un esquema de color desde el **Type** de la tarjeta, esquinas redondeadas y una sombra desde el panel **Style**. Al final tienes una tarjeta que puedes repetir en una fila para funciones, equipo o precios. Para poner primero una tarjeta en la página, consulta [Añadir una tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta).

El vídeo sigue los pasos de abajo: da a una tarjeta un aspecto claro, esquinas redondas y una sombra suave.

  ## Da estilo a una tarjeta

1. Pasa sobre la tarjeta, abre **More** y elige **Settings**.
2. En **Type**, elige **Light**.
3. Abre el panel **Style**.
4. Fija **Border radius** en 8.
5. Fija **Drop shadow** en 2.
6. Haz clic en **Save**.

## Lo que ves

La tarjeta tiene un fondo claro, esquinas redondeadas y una sombra suave. Su barra **Header** está arriba, su **Title** abre el cuerpo, y los elementos que añadiste dentro siguen debajo.

Un **Type** colorea toda la tarjeta, no solo la cabecera. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** y **Dark** rellenan la tarjeta con ese color del tema y ponen el texto en blanco. **Light** da un fondo claro con texto normal. **Default** deja la tarjeta a tu tema.

## Ajustes

| Ajuste | Dónde | Qué hace |
|---|---|---|
| **Header** | **General** | Texto en una barra arriba de la tarjeta; déjalo vacío para no tener barra |
| **Title** | **General** | Un encabezado arriba del cuerpo de la tarjeta |
| **Type** | **General** | El esquema de color de toda la tarjeta; predeterminado **Default** |
| **Background**, **Font color** | **Style** | Tus propios colores, cuando **Type** es **Default** |
| **Border radius** | **Style** | Esquinas redondeadas, en píxeles |
| **Drop shadow** | **Style** | Profundidad, de 1 a 5 |
| **Border** (box model), **Border style**, **Border color** | **Style** | Un marco en uno o más lados |

## Patrones de tarjeta

- **Flat card**: **Border style** **Solid**, un **Border color** claro, **Border radius** 4, sin sombra.
- **Elevated card**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8.
- **Highlighted card**: fija el lado izquierdo de **Border** en el box model en 4, **Border style** **Solid** y un **Border color** de acento.
- **Card that lifts**: **Drop shadow** 1 en **Style** y 4 en **Hover style**; consulta [Haz que los elementos reaccionen en hover](/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover).

## Tarjetas en una fila

Para una cuadrícula de tarjetas de funciones, equipo o precios:

1. Añade una fila y escoge un diseño con tres o cuatro columnas iguales.
2. Añade una tarjeta a cada columna y dale a cada tarjeta los mismos valores de **Type** y **Style**.
3. Abre el menú **More** de la fila, elige **Settings** y activa **Equal-height columns**.

Las columnas se alinean, pero cada tarjeta queda tan alta como su contenido. Mantén el texto de cada tarjeta con una longitud parecida, para que las tarjetas terminen a la misma altura. Para una tabla de precios, destaca el plan recomendado con otro **Type** o un **Drop shadow** más profundo.

## Si no ves el estilo

- **Background o Font color en el panel Style no tienen efecto.** Un **Type** distinto de **Default** fija los colores de la tarjeta con clases del tema que ganan al panel **Style**. Fija **Type** en **Default** y elige tus propios colores.
- **El texto blanco en una tarjeta de color es difícil de leer.** Los colores **Warning** e **Info** de muchos temas son pálidos, y estos tipos siempre ponen texto blanco. Elige un **Type** más oscuro, o **Light**, que conserva el color de texto normal.
- **The shadow does not show.** **Drop shadow** es 0, lo que significa sin sombra. Fíjalo en 1 o más.

## ¿Qué sigue?

- [Añadir una tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta): añade una tarjeta y llénala con elementos.
- [Haz que los elementos reaccionen en hover](/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover): deja que las tarjetas se eleven cuando las visitas las señalan.
- [Usa los colores de tu marca](/es/hc/documentacion/aprender-dxpr-builder/diseno/colores-marca): mantén los colores de tarjetas en línea con el resto del sitio.