Card Tarjeta
Introducción
Un contenedor de diseño altamente versátil diseñado para agrupar información, acciones, medios y metadatos relacionados en un único módulo visualmente estructurado. Incluye áreas designadas para encabezados, títulos, descripciones, texto del cuerpo, avatares, imágenes de portada, acciones y pies de página.
El componente Card está totalmente integrado como un bloque card en el Page Builder, lo que permite a los autores de contenido y desarrolladores configurar estructuras de diseño, variaciones de superficie y formato responsive directamente en el CMS.
Uso
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran componentes de tarjeta.
1. Tarjeta de descripción general de proyecto elevada
Una tarjeta de perfil elevada clásica, completa con título, descripción, texto del cuerpo y un botón de acción principal renderizado dentro del slot del pie de página.
{
"type": "card",
"title": "Project Launchpad",
"description": "Accelerate your workflow development",
"body": "Create, configure, and scale multi-platform applications seamlessly. Our cloud-native environment is optimized for high performance, serverless routing, and automatic localized static site generation.",
"variant": "elevated",
"boxShadow": "lg",
"children": [
{
"type": "button",
"text": "View Project",
"variant": "solid"
}
]
}
Project Launchpad
2. Tarjeta de portada con imagen superior
Renderiza una tarjeta con contorno que presenta una imagen de portada visual grande alineada en la parte superior del cuerpo del contenido. Perfecto para publicaciones de blog, cuadrículas de noticias o destacados de productos.
{
"type": "card",
"image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=600&auto=format&fit=crop",
"imagePosition": "top",
"title": "Design Systems in Production",
"body": "Explore optimal architectural patterns for managing multi-variant design tokens, static compilation, and robust hydration frameworks in large engineering organizations.",
"variant": "outline"
}
Design Systems in Production
Propiedades
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / Opciones admitidas |
|---|---|---|---|
Título de tarjeta (title) | string | - | Encabezado principal mostrado dentro del área de encabezado de la tarjeta. |
Descripción de tarjeta (description) | string | - | Línea de apoyo secundaria posicionada debajo del título. |
Texto del cuerpo (body) | string | - | Contenido principal del bloque de texto renderizado dentro del cuerpo de la tarjeta. |
Imagen de portada (image) | image | - | URL o ruta de medios para el gráfico o foto acompañante. |
Posición de imagen (imagePosition) | select | "top" | Alineación de diseño del gráfico de portada. • Opciones: "top", "bottom", "left", "right". |
Variante visual (variant) | select | "elevated" | Estilo de borde y sombra. • Opciones: "elevated", "outline", "subtle". |
Profundidad de sombra (boxShadow) | select | "sm" | Sombra del tema aplicada alrededor del contorno exterior del borde. • Opciones: "none", "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Límites de recorte (overflow) | select | "hidden" | Política de desbordamiento. Establézcalo en "visible" cuando la tarjeta anida elementos superpuestos sin portal (Dropdowns, Popovers, DatePickers) para evitar el recorte de diseño. |
Notas para desarrolladores y accesibilidad
- Isla de hidratación: De forma predeterminada, las tarjetas se compilan en elementos estáticos ligeros y solo de presentación. Sin embargo, si contienen bloques secundarios interactivos activos o activadores de estado explícitos, se hidratan como una isla condicional de Nivel 2 en el cliente.
- Cumplimiento WAI-ARIA: Las tarjetas están estructuradas para imponer órdenes de lectura de contenido lógicos. Use encabezados semánticos (
h2-h4) para los slots de título. Asegúrese de que cualquier gráfico de portada decorativo cuente con etiquetas alt en blanco apropiadas para que los lectores de pantalla los omitan sin problemas.