syncfusion-blazor-card

name	syncfusion-blazor-card
description	Build responsive card layouts with Syncfusion Blazor Card component. Use this when creating reusable card containers with headers, images, content, action buttons, and custom styling. This skill covers setup, structure, layouts, interactivity, and advanced customization.
metadata	{"author":"Syncfusion Inc","version":"33.1.44","category":"Components"}

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

• 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

• 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

• 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

• 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

• 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

• 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

@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

@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

@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.

<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.

<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.

<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
• System Requirements
• NuGet Packages