syncfusion-aspnetcore-cards

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion ASP.NET Core Card Component

Syncfusion ASP.NET Core Card组件实现指南

The Card component is a flexible layout container for displaying content with headers, images, actions, and more. It's perfect for creating product showcases, content summaries, user profiles, and dashboard widgets with a clean, modern appearance.

Card组件是一个灵活的布局容器，可用于展示包含页眉、图片、操作按钮等元素的内容。它非常适合创建产品展示、内容摘要、用户资料和仪表板小部件，外观简洁现代。

When to Use This Skill

适用场景

Use the Card component when you need to:

Display organized content — Group related information (titles, images, text, actions) in a visually cohesive container
Create dashboard widgets — Build reusable card layouts for dashboard panels and content cards
Showcase products or items — Present product images, descriptions, and action buttons in a structured format
Build responsive layouts — Enable horizontal/vertical stacking with responsive design
Add interactive elements — Include buttons, links, images, and other components within the card
Implement modern UI patterns — Follow Material Design and modern card-based interfaces

在以下场景中可使用Card组件：

展示结构化内容 — 将相关信息（标题、图片、文本、操作按钮）分组到视觉统一的容器中
创建仪表板小部件 — 为仪表板面板和内容卡片构建可复用的卡片布局
展示产品或项目 — 以结构化格式呈现产品图片、描述和操作按钮
搭建响应式布局 — 通过响应式设计实现横向/纵向堆叠
添加交互元素 — 在卡片内包含按钮、链接、图片及其他组件
实现现代UI模式 — 遵循Material Design和现代卡片式界面设计

Component Overview

组件概述

The Syncfusion ASP.NET Core Card (

e-card

class) provides:

Flexible structure — Headers, content, images, action buttons in any combination
Layout options — Vertical (default), horizontal, or stacked layouts
Rich content support — Text, images, headers with titles/subtitles, dividers
Action buttons — Horizontal or vertical button alignment for user interactions
Responsive design — Adapts to different screen sizes and containers
Easy customization — CSS classes for styling and positioning

Syncfusion ASP.NET Core Card（

e-card

类）具备以下特性：

灵活结构 — 可任意组合页眉、内容、图片、操作按钮
布局选项 — 纵向（默认）、横向或堆叠布局
丰富内容支持 — 文本、图片、带标题/副标题的页眉、分隔线
操作按钮 — 支持横向或纵向对齐的用户交互按钮
响应式设计 — 适配不同屏幕尺寸和容器
易于自定义 — 通过CSS类进行样式和定位调整

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

ASP.NET Core project setup and prerequisites
Adding Syncfusion stylesheets and scripts
Creating your first basic card
Running the application and viewing results

📄 阅读： references/getting-started.md

ASP.NET Core项目设置及前提条件
添加Syncfusion样式表和脚本
创建首个基础卡片
运行应用并查看结果

Header and Content

页眉与内容

📄 Read: references/header-and-content.md

Header structure with titles and subtitles
Adding header images with alignment options
Content areas for text and HTML elements
Complete examples with proper element structure

📄 阅读： references/header-and-content.md

包含标题和副标题的页眉结构
添加带对齐选项的页眉图片
用于文本和HTML元素的内容区域
包含正确元素结构的完整示例

Images and Dividers

图片与分隔线

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

Including full-width images in cards
Adding image titles and captions with overlays
Using dividers to separate content sections
Multiple images and advanced image layouts

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

在卡片中添加全屏宽度图片
为图片添加带覆盖层的标题和说明
使用分隔线区分内容区域
多图布局及高级图片布局

Action Buttons

操作按钮

📄 Read: references/action-buttons.md

Creating action button containers
Horizontal vs vertical button alignment
Button styling with e-card-btn class
Using buttons and anchor tags as actions

📄 阅读： references/action-buttons.md

创建操作按钮容器
横向与纵向按钮对齐对比
使用
```
e-card-btn
```
类设置按钮样式
将按钮和锚标签用作操作元素

Horizontal and Stacked Layouts

横向与堆叠布局

📄 Read: references/horizontal-layout.md

Creating horizontal card layouts with e-card-horizontal
Mixing horizontal and vertical with e-card-stacked
Content positioning in multi-column designs
Responsive considerations for horizontal layouts

📄 阅读： references/horizontal-layout.md

使用
```
e-card-horizontal
```
创建横向卡片布局
结合
```
e-card-stacked
```
实现横向与纵向混合布局
多列设计中的内容定位
横向布局的响应式注意事项

Advanced Customization

高级自定义

📄 Read: references/advanced-customization.md

Customizing image title positioning with CSS
Integrating other Syncfusion components inside cards
Styling and theming options
Real-world integration examples (ListViews, forms, etc.)

📄 阅读： references/advanced-customization.md

使用CSS自定义图片标题定位
在卡片内集成其他Syncfusion组件
样式与主题选项
实战集成示例（ListView、表单等）

Quick Start Example

快速入门示例

Basic card with header and content:

html

<div class="e-card">
    <div class="e-card-header">
        <p><strong>Card Title</strong></p>
        <p>Subtitle or description</p>
    </div>
    <div class="e-card-content">
        Your content goes here
    </div>
</div>

带页眉和内容的基础卡片：

html

<div class="e-card">
    <div class="e-card-header">
        <p><strong>Card Title</strong></p>
        <p>Subtitle or description</p>
    </div>
    <div class="e-card-content">
        Your content goes here
    </div>
</div>

Common Patterns

常见模式

Pattern 1: Card with Image and Header

模式1：带图片和页眉的卡片

Header (title/subtitle) + Image + Content + Actions

Use for product cards, profile cards, blog post previews.

页眉（标题/副标题） + 图片 + 内容 + 操作按钮

适用于产品卡片、资料卡片、博客文章预览。

Pattern 2: Horizontal Image + Content

模式2：横向图片+内容

Image (left) | Header + Content + Actions (right)

Use for horizontal layouts, list items, media cards.

图片（左侧） | 页眉 + 内容 + 操作按钮（右侧）

适用于横向布局、列表项、媒体卡片。

Pattern 3: Image with Title Overlay

模式3：带标题覆盖层的图片

Image + Title (overlay at bottom) + Actions

Use for gallery cards, featured content, visual showcases.

图片 + 标题（底部覆盖层） + 操作按钮

适用于图库卡片、特色内容、视觉展示。

Pattern 4: Content-Only Card

模式4：仅含内容的卡片

Header + Content + Divider + Actions

Use for simple information cards, summary cards, action items.

页眉 + 内容 + 分隔线 + 操作按钮

适用于简单信息卡片、摘要卡片、操作项。

Key CSS Classes

关键CSS类

Class	Purpose
`e-card`	Root card container
`e-card-header`	Header wrapper element

e-card-content

| Content area | |

e-card-image

| Full-width card image | |

e-card-title

| Image overlay title | |

e-card-actions

| Action button container | |

e-card-btn

| Action button styling | |

e-card-separator

| Divider between sections | |

e-card-horizontal

| Horizontal layout | |

e-card-stacked

| Vertical section in horizontal layout | |

e-card-vertical

| Vertical action button alignment | |

e-card-corner

| Rounded corners on images |

类名	用途
`e-card`	卡片根容器
`e-card-header`	页眉包裹元素
`e-card-content`	内容区域
`e-card-image`	全屏宽度卡片图片
`e-card-title`	图片覆盖层标题
`e-card-actions`	操作按钮容器
`e-card-btn`	操作按钮样式
`e-card-separator`	区域间分隔线
`e-card-horizontal`	横向布局
`e-card-stacked`	横向布局中的纵向区域
`e-card-vertical`	操作按钮纵向对齐
`e-card-corner`	图片圆角

Before You Begin

准备工作

Ensure your ASP.NET Core project has:

Syncfusion NuGet packages installed
TagHelpers registered in
```
_ViewImports.cshtml
```
Syncfusion CSS stylesheets referenced in
```
_Layout.cshtml
```
Required JavaScript files included

For a complete setup walkthrough, see Getting Started.

确保你的ASP.NET Core项目已具备：

已安装Syncfusion NuGet包
在
```
_ViewImports.cshtml
```
中注册TagHelpers
在
```
_Layout.cshtml
```
中引用Syncfusion CSS样式表
已包含所需JavaScript文件

如需完整设置步骤，请查看快速入门。