syncfusion Implementing Syncfusion Card Component
The Card is a lightweight, pure CSS layout component for creating flexible content containers. It provides a structured way to organize and display information with support for headers, images, action buttons, and custom styling.
When to Use This Skill
Use the Syncfusion Card component when you need to:
- Display content in organized, contained sections
- Build product cards, service offerings, or team member profiles
- Create dashboard or portfolio layouts with multiple card elements
- Combine headers, images, and action buttons in a single container
- Apply consistent styling across multiple content sections
- Integrate other Syncfusion components within card containers
Key Features
- Pure CSS Component: No JavaScript dependencies required for basic functionality
- Flexible Structure: Support for headers, content, images, and action buttons
- Multiple Layouts: Vertical (default) and horizontal alignment options
- Customizable: Extensive CSS customization for styling and responsive design
- Component Integration: Embed other Syncfusion controls (ListView, DropDownList, etc.) inside cards
- Accessibility: Semantic HTML structure with tabindex support
Component Overview
Core Structure
e-card (root)
├── e-card-header (optional)
│ ├── e-card-header-image (optional)
│ └── e-card-header-caption
│ ├── e-card-header-title
│ └── e-card-sub-title (optional)
├── e-card-image (optional)
│ └── e-card-title (optional caption)
├── e-card-content
├── e-card-separator (optional dividers)
└── e-card-actions (optional)
├── e-card-btn (buttons)
└── anchor elements
Key CSS Classes
| Class | Purpose | Usage |
|---|---|---|
e-card |
Root card element | Required |
e-card-header |
Header container | Optional |
e-card-header-caption |
Title/subtitle wrapper | Groups header text |
e-card-header-title |
Main header title | Primary heading |
e-card-sub-title |
Subtitle text | Secondary heading |
e-card-header-image |
Header image element | Header decoration |
e-card-image |
Full-width card image | Featured image |
e-card-title |
Image caption/title | Overlay on image |
e-card-content |
Main content area | Body text/elements |
e-card-separator |
Visual divider | Section separation |
e-card-actions |
Action buttons container | Button group |
e-card-btn |
Individual button | Actionable element |
e-card-vertical |
Vertical alignment | Button layout option |
e-card-horizontal |
Horizontal layout | Side-by-side elements |
e-card-stacked |
Stacked within horizontal | Vertical section in horizontal |
e-card-corner |
Rounded corners | Image styling |
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installation and package setup with @syncfusion/ej2-layouts
- Basic card markup structure
- CSS imports and theme configuration
- Dependencies and development environment
- First render with minimal example
Header and Content
📄 Read: references/header-and-content.md
- Header structure with title and subtitle
- Adding header images with positioning
- Subtitle support and styling
- Content sections and text areas
- Header-image alignment (before/after)
Action Buttons
📄 Read: references/action-buttons.md
- Action button structure and markup
- Horizontal alignment (default behavior)
- Vertical alignment with e-card-vertical
- Button styling with e-card-btn class
- Mixed buttons and anchor tags
Card Layouts and Images
📄 Read: references/card-layout.md
- Full-width card images (e-card-image)
- Image titles and captions with overlay
- Customizing image title position (4 corners)
- Separators and dividers for section separation
- Horizontal card layout (e-card-horizontal)
- Stacked content within horizontal layout
Customization and Styling
📄 Read: references/customization-and-styling.md
- CSS customization patterns and best practices
- Element-specific styling (card, header, content, buttons, images)
- Layout customization (margins, padding, spacing)
- Color, font, and typography changes
- Responsive design considerations
- Theme integration and CSS variables
Component Integration
📄 Read: references/component-integration.md
- Embedding other Syncfusion components inside cards
- ListView integration for list-based content
- DropDownList and other control integration
- Composite UI layouts and patterns
- To-Do list and advanced examples
Quick Start Example
Basic Card
<div class="e-card">
<div class="e-card-content">
Sample Card Content
</div>
</div>
Card with Header and Content
<div class="e-card">
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title">Card Title</div>
</div>
</div>
<div class="e-card-content">
Card content goes here
</div>
</div>
Card with Header Image and Actions
<div class="e-card">
<div class="e-card-header">
<div class="e-card-header-image"></div>
<div class="e-card-header-caption">
<div class="e-card-header-title">Title</div>
<div class="e-card-sub-title">Subtitle</div>
</div>
</div>
<div class="e-card-content">
Content here
</div>
<div class="e-card-actions">
<button class="e-card-btn">Button 1</button>
<button class="e-card-btn">Button 2</button>
</div>
</div>
Common Patterns
1. Product Card Pattern
Combine header image, title, description, and action buttons for e-commerce or marketplace interfaces:
<div class="e-card">
<div class="e-card-image"></div>
<div class="e-card-header-caption">
<div class="e-card-header-title">Product Name</div>
<div class="e-card-sub-title">Price/Category</div>
</div>
<div class="e-card-content">Product description</div>
<div class="e-card-actions">
<button class="e-card-btn">Add to Cart</button>
<button class="e-card-btn">Details</button>
</div>
</div>
2. Team Member Card Pattern
Display profile information with header image, name, role, and contact buttons:
<div class="e-card">
<div class="e-card-header">
<div class="e-card-header-image"></div>
<div class="e-card-header-caption">
<div class="e-card-header-title">Name</div>
<div class="e-card-sub-title">Role/Title</div>
</div>
</div>
<div class="e-card-content">Bio or description</div>
<div class="e-card-actions">
<button class="e-card-btn">Email</button>
<button class="e-card-btn">LinkedIn</button>
</div>
</div>
3. Multi-Section Card Pattern
Use separators to divide card into logical sections:
<div class="e-card">
<div class="e-card-title">Section 1</div>
<div class="e-card-separator"></div>
<div class="e-card-content">Content 1</div>
<div class="e-card-separator"></div>
<div class="e-card-content">Content 2</div>
</div>
4. Horizontal Card Pattern
Side-by-side layout with image and stacked content:
<div class="e-card e-card-horizontal">
<img src="image.png" alt="Sample">
<div class="e-card-stacked">
<div class="e-card-header-title">Title</div>
<div class="e-card-content">Description</div>
<div class="e-card-actions">
<button class="e-card-btn">Action</button>
</div>
</div>
</div>
Common Use Cases
- Product Listings: Build e-commerce product cards with images, names, prices, and purchase buttons
- Dashboard Widgets: Create self-contained card widgets for metrics, charts, and status displays
- Team Directories: Display employee or team member profiles with photos and contact information
- Content Cards: Present articles, blog posts, or news items with featured images and summaries
- Service Offerings: Showcase services with descriptions, icons, and call-to-action buttons
- Portfolio Items: Display project showcases with images, descriptions, and project links
- Settings Panels: Organize configuration or preference options in card-based layouts
- Data Cards: Present structured data with headers, content sections, and action buttons
Installation
The Card component requires the @syncfusion/ej2-layouts package. For detailed setup instructions, see Getting Started reference.
Next Steps
- Start: Read Getting Started for installation and basic setup
- Build: Choose a pattern from Common Patterns section above
- Enhance: Add headers, images, or buttons based on your needs
- Style: Use Customization and Styling guide to match your design
- Integrate: Embed other components if needed using Component Integration guide