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

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

syncfusion-blazor-card

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion Blazor Card Component

When to Use This Skill

Component Overview

Documentation and Navigation Guide

Getting Started with Card Setup

Building Card Structure

Card Layouts and Orientation

Action Buttons and Footers

Styling and Customization

API Reference

Quick Start Example

Basic Card with Header and Content

Card with Image and Action Buttons

Horizontal Card with Stacked Section

Common Patterns

Pattern 1: Product Card

Pattern 2: Profile Card

Pattern 3: Multi-Section Card

Key Components

Key Properties

Quick Decision Tree

Integration Points

References