Card 卡片 - Docs - Artefact

Card 卡片

Data Display

智能自动检测

简介

一个用于分组相关内容的灵活容器，带有可选的头部、主体、底部、图片和头像插槽。

用法

基础卡片

Main content of the card goes here.

import { Card, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      variant="elevated"
      title="Project title"
      description="A short description of the project."
      body="Main content of the card goes here."
      footer={<Button>View</Button>}
    />
  );
}

带图片的卡片

import { Card } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      image="/cover.png"
      imagePosition="top"
      title="Card with image"
      body="Content beneath the image."
    />
  );
}

CMS 页面构建器

该组件在页面构建器 (content/pages/*.json) 中作为 card 区块提供：

{
  "type": "card",
  "title": "Project title",
  "description": "A short description of the project.",
  "body": "Main content of the card goes here.",
  "variant": "elevated"
}

属性

Card

属性	类型	说明