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

Key Properties

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