# 构建卡片内容

本文档介绍如何使用可视化搭建工具构建卡片内容。你也可选择直接撰写卡片 JSON 代码构建卡片。详情参考[卡片 JSON 2.0 结构](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/card-json-v2-structure)。

## 步骤一：创建卡片

你可以基于搭建工具提供的参考案例快速构建一张卡片，也可以创建空白卡片自行构建内容。

### 方式一：通过参考案例库创建卡片

1. 登录[飞书卡片搭建工具](https://open.feishu.cn/cardkit?from=open_docs_build_card_content)。
1. 在 **我的卡片** 页面，点击 **参考案例库**。
1. 在 **参考案例库** 对话框，选择左侧案例分类。
   推荐你选择 **新版专区** 的卡片案例，可体验局部多语言设置、流式输出、精细化配置布局等新版卡片特性。了解新版卡片与旧版卡片区别，参考[飞书卡片搭建工具概述](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/feishu-card-cardkit/feishu-cardkit-overview)。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/91a86996e9e2ad526060ea95e169a2e9_cZ92yJ5SVg.png?height=792&lazyload=true&maxWidth=500&width=1443)

1. 在 **从参考案例创建卡片** 对话框内，输入卡片名称，并点击 **创建**。

你将进入卡片的编辑页面。

### 方式二：创建空白卡片

1. 登录[飞书卡片搭建工具](https://open.feishu.cn/cardkit?from=open_docs_build_card_content)。
1. 在 **我的卡片** 页面，点击 **创建空白卡片**。
1. 在 **创建空白卡片** 对话框，填写卡片名称，选择卡片版本，并点击 **创建**。
   推荐你选择 **新版卡片**，可体验局部多语言设置、流式输出、精细化配置布局等新版卡片特性。了解新版卡片与旧版卡片区别，参考[飞书卡片搭建工具概述](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/feishu-card-cardkit/feishu-cardkit-overview)。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/67d8e185291a6b894fb6fdab1dbb361e_55KozDEQAv.png?height=718&lazyload=true&maxWidth=500&width=1121)

你将进入卡片的编辑页面。

## 步骤二：添加卡片组件

本小节介绍如何在飞书卡片搭建工具中搭配合适的组件，构建卡片内容。要了解各个组件的描述和组件的 JSON 结构，参考[组件概述](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/card-components/component-overview)。

1. 进入卡片编辑页面。
1. 添加 **标题** 组件，并填写标题内容。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ce049c1e2759136da0d3e96832d0d848_qNHfOIUkGM.png?height=1430&lazyload=true&maxWidth=500&width=2882)
1. 添加 **分栏** 组件，将卡片内容分割为左右两列，并设置列宽比例。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/bc3e7e2abf757e03b770b6f2b95984e2_TyibjdRVLg.png?height=1422&lazyload=true&maxWidth=500&width=2882)
1. 选中 **分栏** 组件的第一列，添加 **普通文本** 组件，并填写文本内容。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/9d852eebc9f0b210bee5d23410f84184_qwo03vMdV4.png?height=1428&lazyload=true&maxWidth=500&width=2882)
1. 选中 **分栏** 组件的第二列，添加 **图片** 组件，并通过点击 **上传图片** 的方式，直接上传一张示例图片。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f3723d28eabe6152fedfcc1e2b4f7f77_qoxGGQaw2F.png?height=1420&lazyload=true&maxWidth=500&width=2882)
1. 在 **分栏** 组件下方，添加 **分割线** 组件。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5a0c39c723c656bdeaccb7444c4bbd4f_FkiwqqbjML.png?height=1430&lazyload=true&maxWidth=500&width=2882)
1. 在 **分割线** 组件下方，添加另一个 **分栏** 组件（保持默认配置），并在第一列中添加 **按钮** 组件。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/245ef5f99408a4f8a211107fac517f22_CtDLFe9dUu.png?height=1422&lazyload=true&maxWidth=500&width=2882)
1. 为 **按钮** 组件设置 **打开链接** 的交互能力，并通过拖拽的方式调整按钮位置。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5143db14e49cb556b1e9b4de5a38f37f_FyLQSpi4tg.gif?height=1014&lazyload=true&maxWidth=500&width=2046)
1. 在搭建工具顶部菜单栏，点击 **向我发送预览**，预览卡片内容。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/14c97b507e5e42178846423635c6b557_JRWrVCt140.png?height=352&lazyload=true&maxWidth=500&width=2874)

预览效果如下图所示。你已成功搭建一张卡片并为其添加了内容。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/cbc25039eb43f57aacc342dcbd5c2a05_2jE47Er9H6.png?height=556&lazyload=true&maxWidth=500&width=1352)

## 常见问题

### Q：如何在搭建工具中删除某个组件？

如下图，你可以在搭建工具左侧导航栏中，切换至 **大纲树** 一栏，在卡片的大纲树中选中指定组件删除。

![20240703135447_rec_.gif](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/2b5f547fbc721dc00a583bc26ca58210_8MwI2f9MRN.gif?height=786&lazyload=true&maxWidth=614&width=1914)

## 后续操作

- 你可以在卡片组件内绑定卡片变量，后续在同类型业务场景中只需要为卡片变量赋值，便可得到不同内容的飞书卡片。详情参考[配置卡片变量](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/feishu-card-cardkit/configure-card-variables)。
- 你可为卡片添加协作者，邀请他人共同编辑卡片；也可为卡片添加应用或自定义机器人，为其开通发送卡片权限。详情参考[管理卡片权限](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/feishu-card-cardkit/manage-card-template)。
- 如何预览与发布卡片，参考[预览与发布卡片](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/feishu-card-cardkit/preview-and-publish-cards)。
- 如何导入导出卡片实现跨租户同步卡片数据，参考[导入导出卡片](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/feishu-card-cardkit/import-and-export-cards)。
- 交互组件的交互方式分为 **打开链接**、**请求回调**，了解如何配置不同的卡片交互方式，参考[配置卡片交互](https://open.feishu.cn/document/uAjLw4CM/ukzMukzMukzM/feishu-cards/configuring-card-interactions)。