syncfusion-blazor-card

# Implementing Syncfusion Blazor Card Component The Syncfusion Blazor Card component is a lightweight, flexible container for organizing content with headers, images, text, action buttons, and custom styling. Cards are ideal for displaying grouped information in a visually appealing format. ## When to Use This Skill Use this skill when you need to: - Create reusable card containers for displaying organized content - Display content with headers, subtitles, and images - Add action buttons and footers to cards - Arrange cards in horizontal or vertical layouts - Apply custom styling and theming to cards - Build responsive card-based UI layouts - Organize related content into discrete, visually distinct containers - Implement dividers to separate card sections ## Component Overview The **SfCard** component provides: - **Flexible Structure**: Compose cards with headers, images, content, and footers - **Multiple Layouts**: Vertical (default) and horizontal orientations - **Rich Content Support**: Text, images, buttons, and HTML elements - **Styling**: Built-in CSS classes and custom styling options - **Component-Based Architecture**: Use Blazor components like `CardHeader`, `CardContent`, `CardImage`, `CardFooter` ## Documentation and Navigation Guide ### Getting Started with Card Setup 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and NuGet packages - Project setup (WASM, Web App, Server App variations) - Import namespaces and register services - Basic card component creation - Minimal working example with first render ### Building Card Structure 📄 **Read:** [references/building-card-structure.md](references/building-card-structure.md) - Header elements (Title, SubTitle, ImageUrl) - Content sections and text placement - CardImage component for visual elements - Dividers to separate sections - Multiple content sections in single card - Complex card layouts with nested elements ### Card Layouts and Orientation 📄 **Read:** [references/card-layouts-and-orientation.md](references/card-layouts-and-orientation.md) - Default vertical card layout - Horizontal orientation (CardOrientation.Horizontal) - CardStacked component for vertical sections - Combining multiple orientations - Responsive layouts and alignment ### Action Buttons and Footers 📄 **Read:** [references/action-buttons-and-footers.md](references/action-buttons-and-footers.md) - CardFooter and CardFooterContent components - Adding buttons to card footers - Vertical button orientation - Button styling and integration - Click handlers and interactivity ### Styling and Customization 📄 **Read:** [references/styling-and-customization.md](references/styling-and-customization.md) - CSS class customization (.e-card, .e-card-header, etc.) - Styling header elements and titles - Content and divider styling - Image styling and backgrounds - Button footer styling - Theme customization and advanced styling ### API Reference 📄 **Read:** [references/api-reference.md](references/api-reference.md) - Complete property reference for all components - Enumeration values and accepted parameters - CSS class listings for styling - Component hierarchy and integration - Quick reference examples ## Quick Start Example ### Basic Card with Header and Content ```razor @using Syncfusion.Blazor.Cards <SfCard> <CardHeader Title="Welcome" SubTitle="Getting Started"></CardHeader> <CardContent Content="This is a basic Syncfusion Blazor Card component with header and content."></CardContent> </SfCard> ``` ### Card with Image and Action Buttons ```razor @using Syncfusion.Blazor.Cards @using Syncfusion.Blazor.Buttons <SfCard> <CardImage Image="images/card.png"/> <CardHeader Title="Product Title" SubTitle="by Company"></CardHeader> <CardContent Content="Description of the product goes here with key features and benefits."></CardContent> <CardFooter> <CardFooterContent> <SfButton CssClass="e-btn e-outline e-primary">BUY NOW</SfButton> <SfButton CssClass="e-btn e-outline">DETAILS</SfButton> </CardFooterContent> </CardFooter> </SfCard> ``` ### Horizontal Card with Stacked Section ```razor @using Syncfusion.Blazor.Cards <SfCard Orientation="CardOrientation.Horizontal"> <CardStacked> <CardHeader Title="Syncfusion Card" /> <CardContent Content="The Syncfusion Blazor Card component is used to display content in organized containers." /> </CardStacked> <img src="images/card-image.png" alt="Card" /> </SfCard> ``` ## Common Patterns ### Pattern 1: Product Card Combine image, header, description, and action buttons for product listings. ```razor <SfCard> <CardImage Image="product.png"/> <CardHeader Title="Product Name" SubTitle="$49.99"/> <CardContent Content="High-quality product description with key features."/> <CardFooter> <CardFooterContent> <SfButton CssClass="e-btn e-primary">ADD TO CART</SfButton> </CardFooterContent> </CardFooter> </SfCard> ``` ### Pattern 2: Profile Card Display user information with avatar and action buttons. ```razor <SfCard> <CardHeader Title="John Doe" SubTitle="UI Designer" ImageUrl="avatar.png"/> <CardContent Content="Creative designer with 5+ years experience in web and mobile design."/> <CardFooter> <CardFooterContent> <SfButton CssClass="e-btn e-outline">FOLLOW</SfButton> <SfButton CssClass="e-btn e-outline">MESSAGE</SfButton> </CardFooterContent> </CardFooter> </SfCard> ``` ### Pattern 3: Multi-Section Card Use multiple CardContent elements with dividers to organize information. ```razor <SfCard> <CardHeader Title="City Information" /> <CardContent EnableSeparator="true"> <strong>Sydney</strong><br/> Capital of New South Wales, Australia </CardContent> <CardContent EnableSeparator="true"> <strong>Location</strong><br/> East coast of Australia </CardContent> <CardContent EnableSeparator="true"> <strong>Population</strong><br/> Approximately 4 million residents </CardContent> </SfCard> ``` ## Key Components | Component | Purpose | |-----------|---------| | `SfCard` | Root card container with optional Orientation property | | `CardHeader` | Displays Title, SubTitle, and optional ImageUrl | | `CardImage` | Renders image elements within card | | `CardContent` | Contains text and HTML content with optional EnableSeparator | | `CardFooter` | Footer section for action buttons | | `CardFooterContent` | Container for footer content (buttons) | | `CardStacked` | Creates vertical section in horizontal cards | ## Key Properties | Property | Values | Purpose | |----------|--------|---------| | `Orientation` | `Vertical` (default), `Horizontal` | Arranges card elements | | `ID` | string | Unique identifier for card | | `Title` | string | Card header main title | | `SubTitle` | string | Card header subtitle | | `ImageUrl` | string | Path to header image | | `Content` | string | Card content text | | `EnableSeparator` | true/false | Adds divider between sections | | `Image` | string | CardImage source path | ## Quick Decision Tree **When choosing card layout:** - **Vertical cards**: Default, use for product listings, profiles, information cards - **Horizontal cards**: Use for featured items with large images - **Multiple sections**: Use CardContent with EnableSeparator for organized data - **Action buttons**: Always use CardFooter + CardFooterContent for interactive cards ## Integration Points - **With SfButton**: Use for interactive action buttons in card footers - **With CSS Classes**: Apply .e-card, .e-card-header, .e-card-content for styling - **With HTML**: Embed custom HTML directly in CardContent - **With Images**: Use CardImage or img tags for visual content --- ## References - [Syncfusion Blazor Card Documentation](url) - [System Requirements](url) - [NuGet Packages](url)