使い方
- インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
- 必要なツール、認証情報、対応環境を原文で確認します。
- 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-cards開始前の確認
- 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
- スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文
見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
Implementing React Card Component
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.
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
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
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
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
Action Buttons
📄 Read: references/action-buttons.md
- Adding buttons and links to cards
- Horizontal button layout (default)
- Vertical button alignment
- Icon buttons and styling
Layouts & Advanced
📄 Read: references/layouts-customization.md
- Horizontal card layout
- Stacked sections within cards
- Image title position classes
- CSS positioning and styling
Embedding Components
📄 Read: references/embedding-components.md
- Integrating ListView with cards
- Embedding charts and data components
- Dynamic content patterns
- Practical use cases
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>
);
}Common Patterns
Pattern 1: User Profile Card
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>Pattern 2: Product Card with Image
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>Pattern 3: Blog Post Card
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>Key CSS Classes
| 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 |
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-cardclass to root div - Add header, content, images, or buttons as needed
- Apply additional classes for layout and styling
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.
