Card 卡片
Data Display
智能自动检测
简介
一个高度通用的布局容器，旨在将相关信息、操作、媒体和元数据分组成一个视觉结构化的模块。它包含用于页眉、标题、描述、正文文本、头像、封面图、操作区和页脚区域的指定区域。
Card 组件已作为 card 区块完整集成到 Page Builder 中，内容作者和开发者可以直接在 CMS 内配置布局结构、表面变体和响应式格式。
用法
以下示例展示了内容编辑者如何绑定并构建卡片组件。
1. 带浮起效果的的项目概览卡片
一张经典的高浮起样式档案卡片，包含标题、描述、正文文本，以及渲染在页脚插槽中的主要操作按钮。
{
"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
Accelerate your workflow development
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.
2. 顶部图片的富媒体封面卡片
渲染一张描边样式卡片，在内容主体顶部对齐一张大尺寸视觉封面图。非常适合博客文章、新闻网格或产品特性展示。
{
"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
Explore optimal architectural patterns for managing multi-variant design tokens, static compilation, and robust hydration frameworks in large engineering organizations.
属性
| 属性 | CMS 字段类型 | 默认值 | 说明 / 可选项 |
|---|---|---|---|
卡片标题 (title) | string | - | 显示在卡片页眉区域的主标题。 |
卡片描述 (description) | string | - | 位于标题下方的次级辅助标语。 |
正文文本 (body) | string | - | 渲染在卡片主体内部的主要文本块内容。 |
封面图片 (image) | image | - | 配套图形或照片的 URL 或媒体路径。 |
图片位置 (imagePosition) | select | "top" | 封面图的布局对齐方式。 • 选项： "top"、"bottom"、"left"、"right"。 |
视觉变体 (variant) | select | "elevated" | 边框与阴影样式。 • 选项： "elevated"、"outline"、"subtle"。 |
阴影深度 (boxShadow) | select | "sm" | 应用于边框外轮廓的主题阴影。 • 选项： "none"、"2xs"、"xs"、"sm"、"md"、"lg"、"xl"、"2xl"。 |
裁剪边界 (overflow) | select | "hidden" | 溢出策略。当卡片嵌套未使用 portal 的叠加元素（下拉框、弹出层、日期选择器）时，设置为 "visible" 以防止布局被裁切。 |
开发者说明与无障碍
- 水合岛屿： 默认情况下，卡片会编译为轻量的、仅展示的纯静态元素。然而，如果它们包含活动的交互式子区块或显式的状态触发器，则会在客户端作为条件性的 Tier-2 岛屿进行水合。
- WAI-ARIA 合规： 卡片经过结构化设计以强制实施符合逻辑的内容阅读顺序。为标题插槽使用语义化标题（
h2-h4）。确保任何装饰性封面图都配备适当的空 alt 标签，以便屏幕阅读器优雅地跳过它们。