Implementing Syncfusion ASP.NET Core Card Component
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.
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
Component Overview
The Syncfusion ASP.NET Core 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
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
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
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
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
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
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.)
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>
Common Patterns
Pattern 1: Card with Image and Header
Header (title/subtitle) + Image + Content + Actions
Use for product cards, profile cards, blog post previews.
Pattern 2: Horizontal Image + Content
Image (left) | Header + Content + Actions (right)
Use for horizontal layouts, list items, media cards.
Pattern 3: Image with Title Overlay
Image + Title (overlay at bottom) + Actions
Use for gallery cards, featured content, visual showcases.
Pattern 4: Content-Only Card
Header + Content + Divider + Actions
Use for simple information cards, summary cards, action items.
Key CSS Classes
| Class | Purpose |
|---|
| Root card container |
| Header wrapper element |
|
| Content area |
|
| Full-width card image |
|
| Image overlay title |
|
| Action button container |
|
| Action button styling |
|
| Divider between sections |
|
| Horizontal layout |
|
| Vertical section in horizontal layout |
|
| Vertical action button alignment |
|
| Rounded corners on images |
Before You Begin
Ensure your ASP.NET Core project has:
- Syncfusion NuGet packages installed
- TagHelpers registered in
- Syncfusion CSS stylesheets referenced in
- Required JavaScript files included
For a complete setup walkthrough, see Getting Started.