syncfusion-react-cards

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing React Card Component

实现React Card组件

The Syncfusion React Card component is a lightweight, flexible container for displaying organized content with support for headers, images, dividers, action buttons, and integrated components.

Syncfusion React Card组件是一个轻量级、灵活的容器，用于展示结构化内容，支持标题、图片、分隔线、操作按钮以及组件集成。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create simple or complex card-based layouts
Build a card with header, image, and action sections
Display content in a card with separators or dividers
Add action buttons (horizontal or vertical) to cards
Create horizontal card layouts with stacked content
Embed other Syncfusion components (ListView, Charts, etc.) inside cards
Customize card appearance with images, titles, and positioning
Build responsive card-based user interfaces

当你需要以下操作时使用此技能：

创建简单或复杂的基于卡片的布局
构建包含标题、图片和操作区域的卡片
在带有分隔符的卡片中展示内容
为卡片添加操作按钮（横向或纵向）
创建带有堆叠内容的横向卡片布局
在卡片中嵌入其他Syncfusion组件（ListView、Charts等）
通过图片、标题和定位自定义卡片外观
构建响应式的基于卡片的用户界面

Navigation Guide

导航指南

Follow this guide based on what you're implementing:

根据你要实现的功能遵循以下指南：

Getting Started

入门指南

📄 Read: references/getting-started.md

Package installation and setup
Basic card structure and CSS imports
Simple card examples
Required dependencies

📄 阅读： references/getting-started.md

包安装与设置
基础卡片结构与CSS导入
简单卡片示例
所需依赖

Card Structure & Headers

卡片结构与标题

📄 Read: references/card-structure-headers.md

Card root element and classes
Header structure with title and subtitle
Header images and positioning
Content sections and organization

📄 阅读： references/card-structure-headers.md

卡片根元素与类
包含标题和副标题的标题结构
标题图片与定位
内容区域与组织方式

Images, Titles & Dividers

图片、标题与分隔线

📄 Read: references/images-titles-dividers.md

Adding images to cards
Image titles and overlay effects
Dividers for section separation
Title positioning and customization

📄 阅读： references/images-titles-dividers.md

为卡片添加图片
图片标题与叠加效果
用于区域分隔的分隔线
标题定位与自定义

Action Buttons

操作按钮

📄 Read: references/action-buttons.md

Adding buttons and links to cards
Horizontal button layout (default)
Vertical button alignment
Icon buttons and styling

📄 阅读： references/action-buttons.md

为卡片添加按钮与链接
横向按钮布局（默认）
纵向按钮对齐
图标按钮与样式

Layouts & Advanced

布局与进阶功能

📄 Read: references/layouts-customization.md

Horizontal card layout
Stacked sections within cards
Image title position classes
CSS positioning and styling

📄 阅读： references/layouts-customization.md

横向卡片布局
卡片内的堆叠区域
图片标题定位类
CSS定位与样式

Embedding Components

嵌入组件

📄 Read: references/embedding-components.md

Integrating ListView with cards
Embedding charts and data components
Dynamic content patterns
Practical use cases

📄 阅读： references/embedding-components.md

将ListView与卡片集成
嵌入图表与数据组件
动态内容模式
实际用例

Quick Start Example

快速入门示例

Basic Card with Header and Content:

jsx

import React from 'react';
import '@syncfusion/ej2-layouts/styles/tailwind3.css';

export default function BasicCard() {
  return (
    <div className="e-card">
      <div className="e-card-header">
        <div className="e-card-header-caption">
          <div className="e-card-header-title">Card Title</div>
          <div className="e-card-sub-title">Subtitle</div>
        </div>
      </div>
      <div className="e-card-content">
        This is the main content of the card. Add any HTML content here.
      </div>
    </div>
  );
}

Card with Action Buttons:

jsx

import React from 'react';

export default function CardWithButtons() {
  return (
    <div className="e-card">
      <div className="e-card-header-title">Product Card</div>
      <div className="e-card-content">
        High-quality product description goes here.
      </div>
      <div className="e-card-actions">
        <button className="e-card-btn">View</button>
        <button className="e-card-btn">Buy Now</button>
        <button className="e-card-btn">Share</button>
      </div>
    </div>
  );
}

Horizontal Layout Card:

jsx

import React from 'react';

export default function HorizontalCard() {
  return (
    <div className="e-card e-card-horizontal" style={{ width: '400px' }}>
      <img src="./image.png" alt="Card" style={{ height: '180px' }} />
      <div className="e-card-stacked">
        <div className="e-card-header">
          <div className="e-card-header-caption">
            <div className="e-card-header-title">Title</div>
          </div>
        </div>
        <div className="e-card-content">
          Content displayed vertically within horizontal layout
        </div>
      </div>
    </div>
  );
}

带有标题和内容的基础卡片：

jsx

import React from 'react';
import '@syncfusion/ej2-layouts/styles/tailwind3.css';

export default function BasicCard() {
  return (
    <div className="e-card">
      <div className="e-card-header">
        <div className="e-card-header-caption">
          <div className="e-card-header-title">Card Title</div>
          <div className="e-card-sub-title">Subtitle</div>
        </div>
      </div>
      <div className="e-card-content">
        This is the main content of the card. Add any HTML content here.
      </div>
    </div>
  );
}

带有操作按钮的卡片：

jsx

import React from 'react';

export default function CardWithButtons() {
  return (
    <div className="e-card">
      <div className="e-card-header-title">Product Card</div>
      <div className="e-card-content">
        High-quality product description goes here.
      </div>
      <div className="e-card-actions">
        <button className="e-card-btn">View</button>
        <button className="e-card-btn">Buy Now</button>
        <button className="e-card-btn">Share</button>
      </div>
    </div>
  );
}

横向布局卡片：

jsx

import React from 'react';

export default function HorizontalCard() {
  return (
    <div className="e-card e-card-horizontal" style={{ width: '400px' }}>
      <img src="./image.png" alt="Card" style={{ height: '180px' }} />
      <div className="e-card-stacked">
        <div className="e-card-header">
          <div className="e-card-header-caption">
            <div className="e-card-header-title">Title</div>
          </div>
        </div>
        <div className="e-card-content">
          Content displayed vertically within horizontal layout
        </div>
      </div>
    </div>
  );
}

Common Patterns

常见模式

Pattern 1: User Profile Card

模式1：用户资料卡片

Combine header images, titles, and action buttons to create profile cards for user listings or team pages.

jsx

<div className="e-card">
  <div className="e-card-header">
    <div className="e-card-header-image" style={{ backgroundImage: 'url(./profile.jpg)', width: '60px', height: '60px', borderRadius: '50%' }} />
    <div className="e-card-header-caption">
      <div className="e-card-header-title">John Doe</div>
      <div className="e-card-sub-title">Product Manager</div>
    </div>
  </div>
  <div className="e-card-content">
    Experienced in building user-centric products.
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Message</button>
    <button className="e-card-btn">Follow</button>
  </div>
</div>

结合标题图片、标题和操作按钮，为用户列表或团队页面创建资料卡片。

jsx

<div className="e-card">
  <div className="e-card-header">
    <div className="e-card-header-image" style={{ backgroundImage: 'url(./profile.jpg)', width: '60px', height: '60px', borderRadius: '50%' }} />
    <div className="e-card-header-caption">
      <div className="e-card-header-title">John Doe</div>
      <div className="e-card-sub-title">Product Manager</div>
    </div>
  </div>
  <div className="e-card-content">
    Experienced in building user-centric products.
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Message</button>
    <button className="e-card-btn">Follow</button>
  </div>
</div>

Pattern 2: Product Card with Image

模式2：带图片的产品卡片

Use card images and titles for product listings with pricing and action buttons.

jsx

<div className="e-card">
  <div className="e-card-image" style={{ backgroundImage: 'url(./product.jpg)', height: '200px' }}>
    <div className="e-card-title">Product Name</div>
  </div>
  <div className="e-card-content">
    <p>$99.99</p>
    <p>High-quality product with excellent features</p>
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Add to Cart</button>
    <button className="e-card-btn">Buy Now</button>
  </div>
</div>

使用卡片图片和标题创建包含价格和操作按钮的产品列表。

jsx

<div className="e-card">
  <div className="e-card-image" style={{ backgroundImage: 'url(./product.jpg)', height: '200px' }}>
    <div className="e-card-title">Product Name</div>
  </div>
  <div className="e-card-content">
    <p>$99.99</p>
    <p>High-quality product with excellent features</p>
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Add to Cart</button>
    <button className="e-card-btn">Buy Now</button>
  </div>
</div>

Pattern 3: Blog Post Card

模式3：博客文章卡片

Combine headers, dividers, and content sections to create blog post cards.

jsx

<div className="e-card">
  <div className="e-card-header-title">Blog Post Title</div>
  <div className="e-card-sub-title">Published on March 26, 2026</div>
  <div className="e-card-separator" />
  <div className="e-card-content">
    Blog post excerpt and content goes here...
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Read More</button>
    <button className="e-card-btn">Share</button>
  </div>
</div>

结合标题、分隔线和内容区域创建博客文章卡片。

jsx

<div className="e-card">
  <div className="e-card-header-title">Blog Post Title</div>
  <div className="e-card-sub-title">Published on March 26, 2026</div>
  <div className="e-card-separator" />
  <div className="e-card-content">
    Blog post excerpt and content goes here...
  </div>
  <div className="e-card-actions">
    <button className="e-card-btn">Read More</button>
    <button className="e-card-btn">Share</button>
  </div>
</div>

Key CSS Classes

关键CSS类

Class	Purpose
`e-card`	Root container for the card
`e-card-header`	Header section container
`e-card-header-caption`	Wrapper for title and subtitle
`e-card-header-title`	Main title text
`e-card-sub-title`	Subtitle text
`e-card-header-image`	Header image element
`e-card-image`	Full-width card image
`e-card-title`	Title overlay on image
`e-card-content`	Main content section
`e-card-actions`	Button container
`e-card-btn`	Individual button styling
`e-card-vertical`	Vertical button alignment
`e-card-separator`	Divider element
`e-card-horizontal`	Horizontal card layout
`e-card-stacked`	Vertical stack within horizontal
`e-card-corner`	Rounded corners on images

类名	用途
`e-card`	卡片的根容器
`e-card-header`	标题区域容器
`e-card-header-caption`	标题和副标题的包裹容器
`e-card-header-title`	主标题文本
`e-card-sub-title`	副标题文本
`e-card-header-image`	标题图片元素
`e-card-image`	全宽卡片图片
`e-card-title`	图片上的标题叠加层
`e-card-content`	主内容区域
`e-card-actions`	按钮容器
`e-card-btn`	单个按钮样式
`e-card-vertical`	纵向按钮对齐
`e-card-separator`	分隔线元素
`e-card-horizontal`	横向卡片布局
`e-card-stacked`	横向布局内的纵向堆叠
`e-card-corner`	图片圆角样式

Essential Setup

基础设置

Install package:
bash
```
npm install @syncfusion/ej2-layouts
```

Import CSS:

css

@import '@syncfusion/ej2-layouts/styles/tailwind3.css';

Create card element:
- Add
```
e-card
```
  class to root div
- Add header, content, images, or buttons as needed
- Apply additional classes for layout and styling

安装包：
bash
```
npm install @syncfusion/ej2-layouts
```

导入CSS：

css

@import '@syncfusion/ej2-layouts/styles/tailwind3.css';

创建卡片元素：
- 为根div添加
```
e-card
```
  类
- 根据需要添加标题、内容、图片或按钮
- 应用额外的类来设置布局和样式

Common Use Cases

常见用例

Dashboard cards: Display key metrics or data summaries
Product listings: Showcase products with images and prices
Team members: Display user profiles and contact info
Blog posts: Show article previews with meta information
Feature highlights: Present features with descriptions
Data reports: Organize tabular or list data in cards
Notification cards: Display alerts or messages
Settings cards: Group related settings together

Next Steps: Choose a reference based on your specific need, then implement your card layout following the examples and patterns provided.

仪表板卡片：展示关键指标或数据摘要
产品列表：通过图片和价格展示产品
团队成员：展示用户资料和联系信息
博客文章：展示文章预览和元信息
功能亮点：展示功能及描述
数据报告：在卡片中组织表格或列表数据
通知卡片：展示警报或消息
设置卡片：将相关设置分组在一起

下一步： 根据你的具体需求选择参考文档，然后按照提供的示例和模式实现你的卡片布局。