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

• 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

Action Buttons and Footers

Table of Contents

• Overview
• CardFooter Component
• Adding Buttons
• Button Styling
• Vertical Button Orientation
• Multiple Buttons
• Button Events
• Interactive Patterns
• Troubleshooting

Overview

Card footers are used to display action buttons and interactive elements at the bottom of cards. The CardFooter and CardFooterContent components provide the container for buttons. Buttons can be styled, oriented vertically or horizontally, and respond to user clicks with event handlers.

CardFooter Component

Basic CardFooter Structure

The CardFooter component creates a footer section at the bottom of the card:

@using Syncfusion.Blazor.Cards

<SfCard>
    <CardHeader Title="Product"></CardHeader>
    <CardContent Content="Description"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <!-- Buttons go here -->
        </CardFooterContent>
    </CardFooter>
</SfCard>

CardFooter with Simple Content

Use CardFooter for text or HTML content without buttons:

<SfCard>
    <CardHeader Title="Article"></CardHeader>
    <CardContent Content="Article content here."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <small>Published on March 15, 2026</small>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Adding Buttons

Single Action Button

Add a single button to the card footer:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardHeader Title="Call to Action"></CardHeader>
    <CardContent Content="Click the button below to proceed."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">CLICK ME</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Multiple Buttons

Add multiple buttons in the footer:

<SfCard>
    <CardHeader Title="Decision"></CardHeader>
    <CardContent Content="Make your choice:"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">ACCEPT</SfButton>
            <SfButton CssClass="e-btn e-outline">DECLINE</SfButton>
            <SfButton CssClass="e-btn e-outline">MAYBE</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Button Spacing

Control spacing between buttons with CSS:

.e-card .e-card-actions .e-card-btn {
    margin-right: 10px;
}

.e-card .e-card-actions .e-card-btn:last-child {
    margin-right: 0;
}

Button Styling

Button Types

Syncfusion buttons support different CSS classes for styling:

<SfCard>
    <CardContent Content="Button Styles:"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">Primary</SfButton>
            <SfButton CssClass="e-btn e-success">Success</SfButton>
            <SfButton CssClass="e-btn e-info">Info</SfButton>
            <SfButton CssClass="e-btn e-warning">Warning</SfButton>
            <SfButton CssClass="e-btn e-danger">Danger</SfButton>
            <SfButton CssClass="e-btn e-outline">Outline</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Button Sizes

Create buttons of different sizes:

<SfCard>
    <CardContent Content="Button Sizes:"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-small e-primary">Small</SfButton>
            <SfButton CssClass="e-btn e-primary">Normal</SfButton>
            <SfButton CssClass="e-btn e-large e-primary">Large</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Custom Button Styling

Apply custom CSS to buttons:

.card-action-btn {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.card-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Use in button:

<SfButton CssClass="e-btn e-primary card-action-btn">Custom Style</SfButton>

Vertical Button Orientation

Card with Vertical Orientation

Set the Card's Orientation property to display buttons vertically:

<SfCard Orientation="CardOrientation.Vertical">
    <CardHeader Title="Vertical Layout"></CardHeader>
    <CardContent Content="Content with vertical buttons."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">BUTTON 1</SfButton>
            <SfButton CssClass="e-btn e-outline">BUTTON 2</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

CSS for Vertical Button Alignment

Force vertical alignment with CSS flexbox:

.vertical-button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vertical-button-group .e-btn {
    width: 100%;
}

Use in component:

<CardFooter>
    <CardFooterContent>
        <div class="vertical-button-group">
            <SfButton CssClass="e-btn e-primary">BUTTON 1</SfButton>
            <SfButton CssClass="e-btn e-outline">BUTTON 2</SfButton>
        </div>
    </CardFooterContent>
</CardFooter>

Multiple Buttons

Button Groups

Organize buttons logically:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardHeader Title="Product Actions"></CardHeader>
    <CardContent Content="Select an action:"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <!-- Primary Action -->
            <SfButton CssClass="e-btn e-primary">BUY NOW</SfButton>
            
            <!-- Secondary Actions -->
            <SfButton CssClass="e-btn e-outline">WISHLIST</SfButton>
            <SfButton CssClass="e-btn e-outline">SHARE</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Justified Buttons

Make buttons equal width across the footer:

.button-group-justified {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.button-group-justified .e-btn {
    width: 100%;
}

Button Events

Click Event Handling

Handle button clicks with Blazor event handlers:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

@page "/card-events"

<SfCard>
    <CardHeader Title="Interactive Card"></CardHeader>
    <CardContent Content="Click a button to see the result."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary" OnClick="HandlePrimaryClick">CONFIRM</SfButton>
            <SfButton CssClass="e-btn e-outline" OnClick="HandleSecondaryClick">CANCEL</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

<p>@Message</p>

@code {
    private string Message = "";

    private void HandlePrimaryClick()
    {
        Message = "You confirmed the action!";
    }

    private void HandleSecondaryClick()
    {
        Message = "You cancelled the action.";
    }
}

Event with Parameters

Pass data with button clicks:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

@page "/card-with-data"

<SfCard>
    <CardHeader Title="Product @ProductId"></CardHeader>
    <CardContent Content="Product details here."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary" OnClick="() => HandleAction('BUY', ProductId)">BUY</SfButton>
            <SfButton CssClass="e-btn e-outline" OnClick="() => HandleAction('DETAILS', ProductId)">DETAILS</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

@code {
    private int ProductId = 123;

    private void HandleAction(string action, int id)
    {
        Console.WriteLine($"{action} - Product {id}");
    }
}

Interactive Patterns

Pattern 1: E-commerce Card

Product card with buy and wishlist buttons:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardImage Image="images/product.jpg" />
    <CardHeader Title="Premium Headphones" SubTitle="$199.99"></CardHeader>
    <CardContent EnableSeparator="true">
        High-quality audio with noise cancellation
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>In Stock:</strong> 15 units available
    </CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary" OnClick="AddToCart">ADD TO CART</SfButton>
            <SfButton CssClass="e-btn e-outline" OnClick="AddToWishlist">❤️ WISHLIST</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

@code {
    private void AddToCart()
    {
        // Handle add to cart
    }

    private void AddToWishlist()
    {
        // Handle wishlist
    }
}

Pattern 2: Confirmation Card

Request user confirmation with Yes/No buttons:

<SfCard>
    <CardHeader Title="Confirm Action"></CardHeader>
    <CardContent Content="Are you sure you want to delete this item? This action cannot be undone."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-danger" OnClick="ConfirmDelete">DELETE</SfButton>
            <SfButton CssClass="e-btn e-outline" OnClick="Cancel">CANCEL</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Pattern 3: Call-to-Action Card

Single prominent button with secondary link:

<SfCard>
    <CardHeader Title="Limited Time Offer"></CardHeader>
    <CardContent Content="Get 50% off on all items for the next 24 hours!"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary" Style="width: 100%; padding: 12px;">SHOP NOW</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Best Practices

Do's

• ✓ Use clear, action-oriented button text (CONFIRM, DELETE, SAVE)
• ✓ Highlight primary actions with primary button color
• ✓ Group related actions together
• ✓ Provide feedback after button clicks
• ✓ Use disabled state for unavailable actions

Don'ts

• ✗ Don't use too many buttons per card (max 3-4)
• ✗ Don't make button text too long
• ✗ Don't use confusing button labels
• ✗ Don't forget event handlers
• ✗ Don't mix too many button styles

Troubleshooting

Buttons Not Appearing

• Verify SfButton component is imported
• Check that CardFooter wraps CardFooterContent
• Ensure buttons are inside CardFooterContent

Click Events Not Firing

• Verify OnClick handler is properly bound
• Check component is interactive (not static render mode)
• Ensure handler method signature is correct

Button Styling Not Applied

• Verify CssClass attribute is set correctly
• Check CSS classes exist (e-btn, e-primary, etc.)
• Clear browser cache and rebuild

Buttons Overflow

• Use CSS Grid or Flexbox for layout
• Set width explicitly if needed
• Add media queries for responsive button arrangement

Syncfusion Blazor Card Component - API Reference

Overview

The Syncfusion Blazor Card component is a flexible container for organizing and displaying content with structured sections including headers, images, content, and action buttons. This API reference documents all properties, methods, and events for the Card component family, with comprehensive examples for each feature.

Quick Navigation

• Components: SfCard | CardHeader | CardContent | CardImage | CardFooter | CardFooterContent | CardStacked
• Enumerations: CardOrientation | ImagePosition | TitlePositions
• Styling: CSS Classes | Examples
• Integration: Component Hierarchy | Syncfusion Components

---

SfCard Component

The main Card container component that serves as the root element for all card content.

Properties

SfCard ChildContent

@using Syncfusion.Blazor.Cards

<SfCard>
    <ChildContent>
        <CardHeader Title="Header"></CardHeader>
        <CardContent Content="Content"></CardContent>
        <CardFooter>
            <CardFooterContent>
                <!-- Footer content -->
            </CardFooterContent>
        </CardFooter>
    </ChildContent>
</SfCard>

SfCard CssClass

<SfCard CssClass="primary-card elevated-shadow">
    <CardHeader Title="Styled Card"></CardHeader>
    <CardContent Content="Card with custom CSS classes"></CardContent>
</SfCard>

<style>
    .primary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .elevated-shadow {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
</style>

SfCard EnableRtl

<!-- For RTL languages like Arabic, Hebrew -->
<SfCard EnableRtl="true">
    <CardHeader Title="مرحبا بالعالم"></CardHeader>
    <CardContent Content="محتوى البطاقة"></CardContent>
</SfCard>

SfCard ID

<SfCard ID="UniqueCardId">
    <CardHeader Title="Card with ID"></CardHeader>
</SfCard>

<style>
    #UniqueCardId {
        border: 2px solid #2196f3;
        border-radius: 8px;
    }
</style>

SfCard Orientation

<!-- Vertical (Default) -->
<SfCard Orientation="CardOrientation.Vertical">
    <CardImage Image="image.jpg"/>
    <CardHeader Title="Title"></CardHeader>
    <CardContent Content="Content"></CardContent>
</SfCard>

<!-- Horizontal -->
<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Title"></CardHeader>
        <CardContent Content="Content"></CardContent>
    </CardStacked>
    <img src="image.jpg" />
</SfCard>

---

CardHeader Component

Displays header information at the top of the card with optional title, subtitle, and image.

Properties

CardHeader ChildContent

<SfCard>
    <CardHeader>
        <ChildContent>
            <div>
                <h3>Custom Header</h3>
                <p>With custom HTML structure</p>
            </div>
        </ChildContent>
    </CardHeader>
</SfCard>

CardHeader Title

<SfCard>
    <CardHeader Title="Card Title">
    </CardHeader>
</SfCard>

CardHeader SubTitle

<SfCard>
    <CardHeader 
        Title="John Doe"
        SubTitle="Senior Developer">
    </CardHeader>
</SfCard>

CardHeader ImageUrl

<SfCard>
    <CardHeader 
        Title="User Profile"
        ImageUrl="images/avatar.png">
    </CardHeader>
</SfCard>

CardHeader ImagePosition

<!-- Image at Left -->
<SfCard>
    <CardHeader 
        Title="With Avatar"
        ImageUrl="images/avatar.png"
        ImagePosition="ImagePosition.Left">
    </CardHeader>
</SfCard>

<!-- Image at Right -->
<SfCard>
    <CardHeader 
        Title="With Icon"
        ImageUrl="images/icon.png"
        ImagePosition="ImagePosition.Right">
    </CardHeader>
</SfCard>

---

CardContent Component

Displays text, HTML, and other content sections within the card body.

Properties

CardContent ChildContent

<SfCard>
    <CardContent>
        <ChildContent>
            <div class="custom-content">
                <h4>Custom Content Section</h4>
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                </ul>
            </div>
        </ChildContent>
    </CardContent>
</SfCard>

CardContent Content

<SfCard>
    <CardHeader Title="Description"></CardHeader>
    <CardContent Content="This is simple text content displayed in the card."></CardContent>
</SfCard>

CardContent EnableSeparator

<SfCard>
    <CardHeader Title="Information"></CardHeader>
    
    <CardContent EnableSeparator="true">
        <strong>Section 1:</strong> First section with a divider below
    </CardContent>
    
    <CardContent EnableSeparator="true">
        <strong>Section 2:</strong> Second section with a divider below
    </CardContent>
    
    <CardContent EnableSeparator="false">
        <strong>Section 3:</strong> Last section without divider
    </CardContent>
</SfCard>

---

CardImage Component

Displays images within the card as visual elements or overlays with optional titles.

Properties

CardImage ChildContent

<SfCard>
    <CardImage>
        <ChildContent>
            <div class="image-overlay">
                <span class="badge">Featured</span>
            </div>
        </ChildContent>
    </CardImage>
</SfCard>

CardImage Image

<SfCard>
    <CardImage Image="images/photo.jpg"></CardImage>
    <CardHeader Title="Photo Gallery"></CardHeader>
</SfCard>

CardImage Title

<SfCard>
    <CardImage 
        Image="images/mountain.jpg"
        Title="Mountain Peak">
    </CardImage>
</SfCard>

CardImage TitlePosition

<!-- Top Left -->
<SfCard>
    <CardImage 
        Image="images/photo.jpg"
        Title="Top Left"
        TitlePosition="TitlePositions.TopLeft">
    </CardImage>
</SfCard>

<!-- Top Right -->
<SfCard>
    <CardImage 
        Image="images/photo.jpg"
        Title="Top Right"
        TitlePosition="TitlePositions.TopRight">
    </CardImage>
</SfCard>

<!-- Bottom Left -->
<SfCard>
    <CardImage 
        Image="images/photo.jpg"
        Title="Bottom Left"
        TitlePosition="TitlePositions.BottomLeft">
    </CardImage>
</SfCard>

<!-- Bottom Right (Default) -->
<SfCard>
    <CardImage 
        Image="images/photo.jpg"
        Title="Bottom Right"
        TitlePosition="TitlePositions.BottomRight">
    </CardImage>
</SfCard>

---

CardFooter Component

Footer section for displaying action buttons or footer content.

Properties

CardFooter ChildContent

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardHeader Title="Actions"></CardHeader>
    <CardContent Content="Select an action below."></CardContent>
    <CardFooter>
        <ChildContent>
            <CardFooterContent>
                <SfButton CssClass="e-btn e-primary">Save</SfButton>
                <SfButton CssClass="e-btn e-outline">Cancel</SfButton>
            </CardFooterContent>
        </ChildContent>
    </CardFooter>
</SfCard>

CardFooter Orientation

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<!-- Horizontal Buttons (Default) -->
<SfCard>
    <CardHeader Title="Horizontal Buttons"></CardHeader>
    <CardFooter Orientation="CardOrientation.Horizontal">
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">Button 1</SfButton>
            <SfButton CssClass="e-btn e-outline">Button 2</SfButton>
            <SfButton CssClass="e-btn e-outline">Button 3</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

<!-- Vertical Buttons -->
<SfCard>
    <CardHeader Title="Vertical Buttons"></CardHeader>
    <CardFooter Orientation="CardOrientation.Vertical">
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary" Style="width: 100%;">Button 1</SfButton>
            <SfButton CssClass="e-btn e-outline" Style="width: 100%;">Button 2</SfButton>
            <SfButton CssClass="e-btn e-outline" Style="width: 100%;">Button 3</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

---

CardFooterContent Component

Container for footer content, typically used to wrap action buttons.

Properties

CardFooterContent ChildContent

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardHeader Title="With Buttons"></CardHeader>
    <CardContent Content="This card has action buttons."></CardContent>
    <CardFooter>
        <CardFooterContent>
            <ChildContent>
                <SfButton CssClass="e-btn e-primary">SAVE</SfButton>
                <SfButton CssClass="e-btn e-outline">CLOSE</SfButton>
            </ChildContent>
        </CardFooterContent>
    </CardFooter>
</SfCard>

CardFooterContent Text

@using Syncfusion.Blazor.Cards

<SfCard>
    <CardHeader Title="Footer Text"></CardHeader>
    <CardContent Content="Card with text in footer."></CardContent>
    <CardFooter>
        <CardFooterContent Text="Footer text content here">
        </CardFooterContent>
    </CardFooter>
</SfCard>

---

CardStacked Component

Used within horizontal cards to create vertically stacked sections while maintaining horizontal layout.

Properties

CardStacked ChildContent

@using Syncfusion.Blazor.Cards

<!-- Horizontal layout with vertically stacked content -->
<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <ChildContent>
            <CardHeader Title="Product Name"></CardHeader>
            <CardContent Content="Product description goes here."></CardContent>
        </ChildContent>
    </CardStacked>
    <img src="product-image.jpg" alt="Product" />
</SfCard>

---

Enumeration Values

CardOrientation

Defines the layout direction of card elements.

ImagePosition

Defines the position of header images relative to title/subtitle.

TitlePositions

Defines the position of title overlay on card images.

---

Component Hierarchy

<SfCard>
    ├── <CardImage />
    ├── <CardHeader />
    │   └── Supports Title, SubTitle, ImageUrl
    ├── <CardContent /> (Multiple supported)
    │   └── Supports EnableSeparator for dividers
    ├── <CardFooter>
    │   └── <CardFooterContent>
    │       └── <SfButton /> or other controls
    └── <CardStacked /> (For horizontal layout)
        └── Wraps elements to keep vertically aligned

---

CSS Styling Examples

Basic Card Styling

<SfCard CssClass="e-card" ID="BasicCard">
    <CardHeader Title="Styled Card"></CardHeader>
    <CardContent Content="Content with CSS classes applied"></CardContent>
</SfCard>

<style>
    .e-card {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
</style>

Header Styling

<SfCard>
    <CardHeader Title="Custom Header" SubTitle="With styling">
    </CardHeader>
</SfCard>

<style>
    .e-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 16px;
    }
    
    .e-card-header-title {
        font-size: 18px;
        font-weight: 600;
    }
    
    .e-card-sub-title {
        font-size: 14px;
        opacity: 0.9;
    }
</style>

Content Section Styling

<SfCard>
    <CardContent EnableSeparator="true">
        <p>First section</p>
    </CardContent>
    <CardContent EnableSeparator="true">
        <p>Second section</p>
    </CardContent>
</SfCard>

<style>
    .e-card-content {
        padding: 16px;
        font-size: 14px;
        line-height: 1.6;
    }
    
    .e-card-separator {
        border-bottom: 1px solid #e0e0e0;
    }
</style>

Action Buttons Styling

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardContent Content="Action buttons"></CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-card-btn e-primary">Save</SfButton>
            <SfButton CssClass="e-card-btn e-outline">Cancel</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

<style>
    .e-card-actions {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        justify-content: flex-end;
    }
    
    .e-card-btn {
        padding: 8px 16px;
        border-radius: 4px;
        font-weight: 500;
    }
</style>

Horizontal Layout Styling

<SfCard Orientation="CardOrientation.Horizontal" CssClass="e-card-horizontal">
    <CardStacked CssClass="e-card-stacked">
        <CardHeader Title="Product"></CardHeader>
        <CardContent Content="Description"></CardContent>
    </CardStacked>
    <img src="image.jpg" />
</SfCard>

<style>
    .e-card-horizontal {
        display: flex;
        align-items: stretch;
    }
    
    .e-card-horizontal img {
        width: 200px;
        object-fit: cover;
    }
    
    .e-card-stacked {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
</style>

---

CSS Classes Reference

Main Elements

Usage Example:

/* Style all cards */
.e-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style card headers */
.e-card-header {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

/* Style action buttons */
.e-card-btn {
    padding: 8px 16px;
    margin-right: 8px;
}

Header-Specific

Usage Example:

/* Customize header title */
.e-card-header-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Customize subtitle */
.e-card-sub-title {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

/* Style header image */
.e-card-header-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

Layout

Usage Example:

/* Horizontal card styling */
.e-card-horizontal {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.e-card-horizontal img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

/* Stacked section in horizontal layout */
.e-card-stacked {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

---

Quick Reference Examples

Basic Card

<SfCard>
    <CardHeader Title="Welcome"></CardHeader>
    <CardContent Content="This is a basic card."></CardContent>
</SfCard>

Card with All Elements

<SfCard>
    <CardImage Image="images/card.jpg"/>
    <CardHeader Title="Title" SubTitle="Subtitle" ImageUrl="images/avatar.png"/>
    <CardContent EnableSeparator="true">First section</CardContent>
    <CardContent EnableSeparator="true">Second section</CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">Action</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Horizontal Card

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Product"></CardHeader>
        <CardContent Content="Description"></CardContent>
    </CardStacked>
    <img src="image.jpg" />
</SfCard>

Styled Card

<SfCard CssClass="primary-card" ID="StyledCard">
    <CardHeader Title="Styled Card"></CardHeader>
    <CardContent Content="With custom styling"></CardContent>
</SfCard>

---

Integration with Syncfusion Components

The Card component works seamlessly with other Syncfusion Blazor components:

• SfButton - Use in CardFooter and CardFooterContent for action buttons
• Syncfusion Themes - Apply bootstrap5, material, fabric, or highcontrast themes via CSS
• Event Handlers - Attach OnClick events to buttons within card footers
• Data Binding - Use foreach loops to generate multiple cards dynamically

---

Accessibility

• The Card component supports RTL mode via EnableRtl="true" on SfCard
• Headers support semantic HTML with proper heading hierarchy
• Images support alt text via HTML img attributes
• Buttons within footers maintain keyboard navigation

---

Related Documentation

All property examples are included in this API Reference document above.

For deeper conceptual understanding and advanced patterns, refer to these guides:

• Getting Started - Installation, setup, and first steps
• Building Card Structure - Advanced header, content, and image patterns
• Card Layouts and Orientation - Complex layouts and responsive design
• Action Buttons and Footers - Interactive button patterns and events
• Styling and Customization - Theme customization and advanced CSS

---

Official Syncfusion References

• SfCard API
• CardHeader API
• CardContent API
• CardFooter API
• CardImage API
• Blazor Card Component

Building Card Structure

Table of Contents

• Overview
• Header Elements
• Content Sections
• Card Images
• Dividers and Separators
• Multiple Content Sections
• Complex Layouts
• Troubleshooting

Overview

The Card structure is built using Blazor components that nest together to create flexible, organized layouts. The main components are CardHeader, CardContent, CardImage, and CardFooter, which can be combined in various ways to create different card designs.

Header Elements

Basic Header with Title and Subtitle

Use CardHeader component to display title and subtitle:

@using Syncfusion.Blazor.Cards

<SfCard>
    <CardHeader Title="Product Name" SubTitle="Category - Price"></CardHeader>
</SfCard>

Header with Image

Add an image to the header using ImageUrl property:

<SfCard>
    <CardHeader 
        Title="John Doe" 
        SubTitle="Senior Developer" 
        ImageUrl="images/john-profile.png" />
</SfCard>

The image appears alongside the title and subtitle, creating a profile-like header.

Header Image Styling

By default, header images are small (48px). Customize with CSS:

.e-card .e-card-header .e-card-header-image {
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

Content Sections

Single Content Section

Add primary content using CardContent:

<SfCard>
    <CardHeader Title="Article Title"></CardHeader>
    <CardContent Content="This is the main content of the article. It can be plain text or HTML."></CardContent>
</SfCard>

Content with HTML Elements

Embed HTML directly in CardContent:

<SfCard>
    <CardHeader Title="Blog Post"></CardHeader>
    <CardContent>
        <p>This paragraph contains <strong>formatted text</strong> with various <em>styling options</em>.</p>
        <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
        </ul>
    </CardContent>
</SfCard>

Content Styling

Customize content appearance with CSS:

.e-card .e-card-content {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

Card Images

Basic Card Image

Use CardImage component to display images:

<SfCard>
    <CardImage Image="images/nature.jpg" />
    <CardHeader Title="Nature" SubTitle="Beautiful Landscape"></CardHeader>
</SfCard>

By default, card images occupy the full width of the card.

Image with Title

Add a title overlay on the image:

<SfCard>
    <CardImage Image="images/mountain.jpg" />
    <CardHeader Title="Mountain Peak"></CardHeader>
</SfCard>

The header title appears as an overlay on the image.

Image Sizing and Styling

Control image dimensions with CSS:

.e-card .e-card-image {
    background-image: url('images/cards/camera.jpg');
    background-size: cover;
    background-position: center;
    height: 200px;
    width: 100%;
}

Inline Images in Content

Include images within CardContent:

<SfCard>
    <CardHeader Title="Product Photo"></CardHeader>
    <CardContent>
        <img src="images/product.png" alt="Product" style="width: 100%; height: auto;" />
        <p>High-resolution product image with details.</p>
    </CardContent>
</SfCard>

Dividers and Separators

Single Content with Divider

Use EnableSeparator property to add a visual divider:

<SfCard>
    <CardHeader Title="Information"></CardHeader>
    <CardContent EnableSeparator="true">
        First section of content here.
    </CardContent>
</SfCard>

Multiple Sections with Dividers

Create multi-section cards using multiple CardContent components:

<SfCard>
    <CardHeader Title="Multi-Section Card"></CardHeader>
    <CardContent EnableSeparator="true">
        <strong>Section 1</strong><br/>
        Content for the first section with details.
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Section 2</strong><br/>
        Content for the second section with more details.
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Section 3</strong><br/>
        Final section of the card with concluding information.
    </CardContent>
</SfCard>

Customizing Divider Styling

Modify divider appearance with CSS:

.e-card .e-card-separator {
    padding-bottom: 30px;
    border-bottom: 2px solid #ddd;
}

Multiple Content Sections

Information Card Example

Display structured information with multiple sections:

<SfCard>
    <CardHeader Title="Employee Profile"></CardHeader>
    <CardContent EnableSeparator="true">
        <strong>Name:</strong> Jane Smith
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Department:</strong> Engineering
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Experience:</strong> 5 years
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Email:</strong> jane.smith@company.com
    </CardContent>
</SfCard>

City Information Example

Display location-based information:

<SfCard>
    <CardHeader Title="City Guide"></CardHeader>
    <CardContent EnableSeparator="true">
        <h4>Sydney</h4>
        Sydney is a city on the east coast of Australia. It is the capital city of New South Wales.
    </CardContent>
    <CardContent EnableSeparator="true">
        <h4>New York</h4>
        New York City has been described as the cultural, financial, and media capital of the world.
    </CardContent>
    <CardContent EnableSeparator="true">
        <h4>London</h4>
        London is the capital and largest city of the United Kingdom.
    </CardContent>
</SfCard>

Complex Layouts

Card with Image, Header, Multiple Content, and Footer

Combine all card elements:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard>
    <CardImage Image="images/product.jpg"/>
    <CardHeader Title="Premium Product" SubTitle="by TechCorp"></CardHeader>
    <CardContent EnableSeparator="true">
        <strong>Features:</strong>
        <ul>
            <li>High performance</li>
            <li>Durable design</li>
            <li>Eco-friendly</li>
        </ul>
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Specifications:</strong><br/>
        Weight: 500g | Size: 25x15x10cm
    </CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">Buy Now</SfButton>
            <SfButton CssClass="e-btn e-outline">Add to Cart</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

Nested Content with Lists

Create structured cards with complex content:

<SfCard>
    <CardHeader Title="Project Details"></CardHeader>
    <CardContent EnableSeparator="true">
        <h5>Team Members</h5>
        <ol>
            <li>Project Manager - Alice Johnson</li>
            <li>Lead Developer - Bob Smith</li>
            <li>Designer - Carol Davis</li>
        </ol>
    </CardContent>
    <CardContent EnableSeparator="true">
        <h5>Timeline</h5>
        <strong>Phase 1:</strong> Planning (Week 1-2)<br/>
        <strong>Phase 2:</strong> Development (Week 3-6)<br/>
        <strong>Phase 3:</strong> Testing (Week 7-8)<br/>
    </CardContent>
</SfCard>

Best Practices

Do's

• ✓ Use clear, descriptive titles
• ✓ Keep content concise and well-organized
• ✓ Use dividers to separate logical sections
• ✓ Include images for visual interest
• ✓ Use consistent spacing and alignment

Don'ts

• ✗ Overcrowd cards with too much content
• ✗ Use images without optimization (watch file sizes)
• ✗ Mix too many text sizes and colors
• ✗ Create cards without clear hierarchy
• ✗ Nest cards infinitely deep

Troubleshooting

Content Not Displaying

• Verify CardContent is nested within SfCard
• Check that Content property value is not empty or null
• Ensure correct Blazor component syntax

Images Not Loading

• Verify image path is correct and relative to wwwroot
• Check browser console for 404 errors
• Ensure image file exists at specified location

Dividers Not Showing

• Set EnableSeparator="true" on CardContent
• Verify CSS for .e-card-separator is not hidden
• Check that multiple CardContent components are used

Layout Issues

• Validate component hierarchy is correct
• Check CSS for conflicting styles
• Clear browser cache and rebuild

Card Layouts and Orientation

Table of Contents

• Overview
• Vertical Layout (Default)
• Horizontal Layout
• CardStacked Component
• Mixed Orientations
• Responsive Layouts
• Layout Patterns
• Troubleshooting

Overview

Card layout controls how card elements are arranged and displayed. By default, cards use a vertical layout where elements stack from top to bottom. The Orientation property allows you to change this behavior and create more dynamic layouts using horizontal alignment and the CardStacked component.

Vertical Layout (Default)

Basic Vertical Card

By default, all card elements are aligned vertically one after another:

@using Syncfusion.Blazor.Cards

<SfCard>
    <CardImage Image="images/card.jpg" />
    <CardHeader Title="Product Title"></CardHeader>
    <CardContent Content="Product description goes here."></CardContent>
</SfCard>

Visual Stack:

┌─────────────┐
│   Image     │
├─────────────┤
│   Header    │
├─────────────┤
│  Content    │
└─────────────┘

Vertical Card with Multiple Sections

Use multiple CardContent components for vertical stacking:

<SfCard>
    <CardHeader Title="Multi-Section"></CardHeader>
    <CardContent EnableSeparator="true">
        Section 1 content
    </CardContent>
    <CardContent EnableSeparator="true">
        Section 2 content
    </CardContent>
</SfCard>

Horizontal Layout

Basic Horizontal Card

Set Orientation="CardOrientation.Horizontal" to align elements horizontally:

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Product"></CardHeader>
        <CardContent Content="Description"></CardContent>
    </CardStacked>
    <img src="images/product.png" />
</SfCard>

Visual Layout:

┌──────────────────────────────┐
│ Header    │                  │
│ Content   │    Image         │
│ Content   │                  │
└──────────────────────────────┘

Horizontal Card Example

Create a featured product card with image on the right:

@using Syncfusion.Blazor.Cards

<SfCard Orientation="CardOrientation.Horizontal" ID="HorizontalCard">
    <CardStacked>
        <CardHeader Title="Philips Trimmer" SubTitle="Premium Grooming Tool"></CardHeader>
        <CardContent Content="Philips trimmers are designed to last longer than ordinary trimmers with DuraPower Technology for optimized performance."></CardContent>
    </CardStacked>
    <img src="images/trimmer.png" alt="Trimmer" style="height: 200px; width: 200px; object-fit: cover;" />
</SfCard>

<style>
    #HorizontalCard {
        width: 500px;
    }
</style>

Horizontal Card with Buttons

Add footer buttons to horizontal layout:

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Item" SubTitle="Price: $29.99"></CardHeader>
        <CardContent Content="High-quality item with great features."></CardContent>
        <CardFooter>
            <CardFooterContent>
                <SfButton CssClass="e-btn e-primary">Buy</SfButton>
            </CardFooterContent>
        </CardFooter>
    </CardStacked>
    <img src="images/item.png" />
</SfCard>

CardStacked Component

Purpose of CardStacked

CardStacked creates a vertically aligned section within a horizontal card. It's essential for horizontal layouts as it groups elements that should remain stacked.

Basic CardStacked Usage

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <!-- These elements stack vertically -->
        <CardHeader Title="Title"></CardHeader>
        <CardContent Content="Content"></CardContent>
    </CardStacked>
    <!-- This element appears beside the stacked section -->
    <img src="image.jpg" />
</SfCard>

Multiple CardStacked Sections

Create more complex layouts with multiple stacked sections:

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Left Section"></CardHeader>
        <CardContent Content="Content for left side."></CardContent>
    </CardStacked>
    <img src="center-image.jpg" />
    <CardStacked>
        <CardContent Content="Right side content."></CardContent>
    </CardStacked>
</SfCard>

CardStacked with Multiple Content

<SfCard Orientation="CardOrientation.Horizontal">
    <CardStacked>
        <CardHeader Title="Details"></CardHeader>
        <CardContent EnableSeparator="true">
            <strong>Feature 1:</strong> Description
        </CardContent>
        <CardContent EnableSeparator="true">
            <strong>Feature 2:</strong> Description
        </CardContent>
    </CardStacked>
    <img src="images/product.jpg" style="height: 300px;" />
</SfCard>

Mixed Orientations

Combining Vertical and Horizontal

Create complex layouts by nesting cards with different orientations:

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
    <!-- Vertical Card -->
    <SfCard>
        <CardImage Image="images/vertical.jpg" />
        <CardHeader Title="Vertical Layout"></CardHeader>
        <CardContent Content="Standard vertical arrangement."></CardContent>
    </SfCard>
    
    <!-- Horizontal Card -->
    <SfCard Orientation="CardOrientation.Horizontal">
        <CardStacked>
            <CardHeader Title="Horizontal Layout"></CardHeader>
            <CardContent Content="Image beside content."></CardContent>
        </CardStacked>
        <img src="images/horizontal.jpg" />
    </SfCard>
</div>

Responsive Layouts

CSS Grid Layout

Create responsive card grids:

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
    @foreach(var item in Items)
    {
        <SfCard>
            <CardImage Image="@item.ImageUrl" />
            <CardHeader Title="@item.Title"></CardHeader>
            <CardContent Content="@item.Description"></CardContent>
        </SfCard>
    }
</div>

Flexbox Layout

Use flexbox for flexible card arrangements:

<div style="display: flex; flex-wrap: wrap; gap: 20px;">
    @foreach(var item in Items)
    {
        <div style="flex: 1 1 300px;">
            <SfCard>
                <CardImage Image="@item.ImageUrl" />
                <CardHeader Title="@item.Title"></CardHeader>
                <CardContent Content="@item.Description"></CardContent>
            </SfCard>
        </div>
    }
</div>

Media Queries for Responsive Design

Adapt card layouts based on screen size:

/* Desktop */
@media (min-width: 1024px) {
    .card-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .card-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .card-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

Layout Patterns

Pattern 1: Featured Product Card

Horizontal layout with image and details:

<SfCard Orientation="CardOrientation.Horizontal" ID="FeaturedProduct">
    <CardStacked>
        <CardHeader Title="Featured Product" SubTitle="Limited Time Offer"></CardHeader>
        <CardContent Content="Get the latest model with advanced features at an unbeatable price."></CardContent>
        <CardFooter>
            <CardFooterContent>
                <SfButton CssClass="e-btn e-primary">Shop Now</SfButton>
            </CardFooterContent>
        </CardFooter>
    </CardStacked>
    <img src="images/featured.jpg" style="width: 300px; height: 300px; object-fit: cover;" />
</SfCard>

<style>
    #FeaturedProduct {
        width: 600px;
    }
</style>

Pattern 2: Card Grid

Display multiple vertical cards in a responsive grid:

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px;">
    @foreach(var item in ProductList)
    {
        <SfCard>
            <CardImage Image="@item.Image" />
            <CardHeader Title="@item.Name" SubTitle="@item.Price"></CardHeader>
            <CardContent Content="@item.Description"></CardContent>
        </SfCard>
    }
</div>

Pattern 3: Dashboard Cards

Mix of horizontal and vertical cards for dashboard:

<!-- Wide Card -->
<SfCard Orientation="CardOrientation.Horizontal" style="margin-bottom: 20px;">
    <CardStacked>
        <CardHeader Title="Sales Overview"></CardHeader>
        <CardContent Content="Total: $50,000 | Growth: +15%"></CardContent>
    </CardStacked>
    <img src="chart.jpg" style="width: 200px;" />
</SfCard>

<!-- Vertical Cards Grid -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
    <SfCard>
        <CardHeader Title="Metric 1"></CardHeader>
        <CardContent Content="Value: 1,234"></CardContent>
    </SfCard>
    <!-- More cards -->
</div>

Best Practices

Do's

• ✓ Use vertical layout for simple content (default)
• ✓ Use horizontal layout for featured items with images
• ✓ Always wrap stacked content in CardStacked for horizontal cards
• ✓ Use responsive grid layouts for multiple cards
• ✓ Test layouts on different screen sizes

Don'ts

• ✗ Don't use CardStacked in vertical layouts
• ✗ Don't create overly complex nested layouts
• ✗ Don't assume card dimensions on responsive layouts
• ✗ Don't mix many card orientations without clear purpose

Troubleshooting

Horizontal Card Layout Not Working

• Verify Orientation="CardOrientation.Horizontal" is set
• Ensure content is wrapped in CardStacked
• Check image is placed after CardStacked

Elements Not Aligning Properly

• Use CSS for precise alignment and spacing
• Check parent container CSS for conflicts
• Verify card width is explicitly set if needed

Responsive Layout Issues

• Use CSS Grid or Flexbox for containers, not cards
• Set proper responsive breakpoints
• Test on actual devices or browser dev tools

Image Sizing Problems

• Set explicit width/height on img elements
• Use CSS object-fit for proper scaling
• Ensure image source path is correct

Getting Started with Syncfusion Blazor Card

Learn how to install the Syncfusion Blazor Card component and create your first card in different Blazor project types.

Table of Contents

• Prerequisites
• Project Setup - Choose Your Blazor Type
• Blazor WebAssembly App
• Blazor Web App
• Blazor Server App
• Install NuGet Packages
• Configure Imports
• Register Syncfusion Service
• Add Theme
• Create Your First Card
• Run Your Application
• Verify Installation
• Next Steps
• Troubleshooting

Prerequisites

Before getting started, ensure your system meets the following requirements:

• System requirements for Blazor components
• Visual Studio, Visual Studio Code, or .NET CLI installed
• .NET SDK (latest version recommended)

Project Setup - Choose Your Blazor Type

Blazor WebAssembly App

Create a Blazor WASM App

Using Visual Studio: 1. Create a new Blazor WebAssembly App project 2. Select appropriate target framework

Using .NET CLI:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Blazor Web App

Create a Blazor Web App

Using Visual Studio: 1. Create a new Blazor Web App project 2. Configure interactive render mode (Auto, Server, or WebAssembly)

Using .NET CLI:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

Blazor Server App

Create a Blazor Server App

Using Visual Studio: 1. Use the Blazor Web App template 2. Select Server App configuration

Using .NET CLI:

dotnet new blazor -o BlazorApp -int Server
cd BlazorApp

Install NuGet Packages

Install the required Syncfusion packages using NuGet Package Manager or CLI.

Using Package Manager Console

Install-Package Syncfusion.Blazor.Cards -Version 24.2.0
Install-Package Syncfusion.Blazor.Themes -Version 24.2.0

Using dotnet CLI

dotnet add package Syncfusion.Blazor.Cards
dotnet add package Syncfusion.Blazor.Themes

Configure Imports

Add namespaces to your _Imports.razor file:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Cards

Register Syncfusion Service

Register the Syncfusion Blazor service in your application startup.

For Blazor WebAssembly/Web App

In Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

For Blazor Server App

In Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Add Theme

Include a Syncfusion theme in your index.html (WebAssembly/Web App) or Pages/_Host.cshtml (Server App):

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Available themes: bootstrap5, material, fabric, highcontrast.

Create Your First Card

In a Blazor component (e.g., Index.razor or Card.razor):

@page "/"

<SfCard>
    <CardHeader Title="Welcome to Syncfusion Card"></CardHeader>
    <CardContent Content="This is your first Syncfusion Blazor Card component!"></CardContent>
</SfCard>

Run Your Application

Build and run your application:

dotnet build
dotnet run

Navigate to http://localhost:5000 (or your configured port) to see your card rendered.

Verify Installation

You should see:

• A card container with header text "Welcome to Syncfusion Card"
• Content text displayed below the header
• Default styling applied from the theme

Next Steps

• Building Card Structure - Add images, multiple sections, and dividers
• Card Layouts and Orientation - Create horizontal and stacked layouts
• Action Buttons and Footers - Add interactive buttons
• Styling and Customization - Customize appearance with CSS

Troubleshooting

Card not rendering

• Verify Syncfusion.Blazor.Cards package is installed
• Check that namespaces are imported in _Imports.razor
• Ensure Syncfusion service is registered in Program.cs
• Confirm theme CSS is included

Styling not applied

• Verify theme CSS link is added to HTML
• Check browser console for CSS loading errors
• Clear browser cache and rebuild solution

Components not recognized

• Confirm @using Syncfusion.Blazor.Cards is in _Imports.razor
• Restart the development server
• Clean and rebuild the solution

Styling and Customization

Table of Contents

• Overview
• CSS Classes
• Card Styling
• Header Styling
• Content Styling
• Image Styling
• Footer Styling
• Theme Customization
• Advanced Styling
• Responsive Styling
• Troubleshooting

Overview

The Syncfusion Blazor Card component provides comprehensive styling capabilities through CSS classes and custom CSS. You can customize every aspect of the card including colors, spacing, borders, shadows, and layout. Theme variables and CSS custom properties allow for consistent theming across your application.

CSS Classes

Main Card Classes

Header Specific Classes

Card Styling

Basic Card Customization

.e-card {
    background-color: #ffffff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

Card Colors

Customize card background and border colors:

.e-card {
    background-color: #f5f5f5;
    border-color: #ddd;
}

.e-card.primary-card {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.e-card.success-card {
    background-color: #e8f5e9;
    border-color: #4caf50;
}

.e-card.danger-card {
    background-color: #ffebee;
    border-color: #f44336;
}

Usage:

<SfCard CssClass="primary-card">
    <!-- card content -->
</SfCard>

Card Spacing

Control card padding and margins:

.e-card {
    padding: 20px;
    margin-bottom: 20px;
}

.e-card.compact {
    padding: 12px;
    margin-bottom: 12px;
}

.e-card.spacious {
    padding: 28px;
    margin-bottom: 28px;
}

Card Shadows

Add depth with shadow effects:

.e-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.e-card.elevated {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.e-card.floating {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.e-card.floating:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

Header Styling

Header Background

Customize header appearance:

.e-card .e-card-header {
    background-color: #f5f5f5;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.e-card .e-card-header.dark-header {
    background-color: #333;
    color: #fff;
}

.e-card .e-card-header.colored-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

Title and Subtitle

.e-card .e-card-header .e-card-header-caption .e-card-header-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

Header Image

Customize header image styling:

.e-card .e-card-header .e-card-header-image {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
    margin-right: 12px;
}

.e-card .e-card-header .e-card-header-image.bordered {
    border: 3px solid #2196f3;
}

.e-card .e-card-header .e-card-header-image.shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Content Styling

Content Appearance

.e-card .e-card-content {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    padding: 12px 0;
}

.e-card .e-card-content.large-text {
    font-size: 16px;
    line-height: 1.8;
}

.e-card .e-card-content.small-text {
    font-size: 12px;
    line-height: 1.4;
}

Text Formatting in Content

.e-card .e-card-content strong {
    color: #333;
    font-weight: 600;
}

.e-card .e-card-content em {
    color: #2196f3;
    font-style: italic;
}

.e-card .e-card-content a {
    color: #2196f3;
    text-decoration: none;
}

.e-card .e-card-content a:hover {
    text-decoration: underline;
}

Image Styling

Card Image

Customize CardImage component:

.e-card .e-card-image {
    background-size: cover;
    background-position: center;
    height: 200px;
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.e-card .e-card-image.large {
    height: 300px;
}

.e-card .e-card-image.small {
    height: 150px;
}

.e-card .e-card-image.with-overlay {
    position: relative;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.e-card .e-card-image.with-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

Image Hover Effects

.e-card .e-card-image {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.e-card:hover .e-card-image {
    transform: scale(1.05);
    filter: brightness(0.9);
}

Footer Styling

Divider Styling

.e-card .e-card-separator {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.e-card .e-card-separator.thick {
    border-bottom: 2px solid #ccc;
}

.e-card .e-card-separator.dashed {
    border-bottom: 1px dashed #ddd;
}

Card Footer

.e-card .e-card-footer {
    background-color: #f9f9f9;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.e-card .e-card-footer.dark-footer {
    background-color: #333;
}

Footer Content

.e-card .e-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.e-card .e-card-actions.centered {
    justify-content: center;
}

.e-card .e-card-actions.right-aligned {
    justify-content: flex-end;
}

Theme Customization

Using Bootstrap Theme

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Using Material Theme

<link href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />

CSS Custom Properties (Variables)

Override theme variables:

:root {
    --e-card-background: #ffffff;
    --e-card-border: 1px solid #e0e0e0;
    --e-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --e-card-header-background: #f5f5f5;
    --e-card-header-color: #333;
    --e-card-text-color: #555;
}

Advanced Styling

Card States

Create different card states:

.e-card.active {
    border-left: 4px solid #2196f3;
    background-color: #f0f8ff;
}

.e-card.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.e-card.loading {
    position: relative;
    pointer-events: none;
}

.e-card.error {
    border-color: #f44336;
    background-color: #ffebee;
}

.e-card.success {
    border-color: #4caf50;
    background-color: #e8f5e9;
}

Transitions and Animations

.e-card {
    transition: all 0.3s ease;
}

.e-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.e-card.animate {
    animation: slideIn 0.3s ease;
}

Dark Mode Support

@media (prefers-color-scheme: dark) {
    .e-card {
        background-color: #424242;
        color: #fff;
        border-color: #555;
    }

    .e-card .e-card-header {
        background-color: #333;
        border-bottom-color: #555;
    }

    .e-card .e-card-content {
        color: #ddd;
    }
}

Responsive Styling

Mobile Responsive

/* Desktop */
@media (min-width: 1024px) {
    .e-card {
        padding: 20px;
        margin-bottom: 20px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .e-card {
        padding: 16px;
        margin-bottom: 16px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .e-card {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 2px;
    }

    .e-card .e-card-image {
        height: 150px;
    }
}

Flexible Layout

.card-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

Complete Styling Example

@page "/styled-card"

<SfCard CssClass="premium-card">
    <CardImage Image="images/product.jpg" />
    <CardHeader Title="Premium Product" SubTitle="Exclusive Collection" />
    <CardContent EnableSeparator="true">
        <strong>Features:</strong> High quality, durable, eco-friendly
    </CardContent>
    <CardContent EnableSeparator="true">
        <strong>Price:</strong> $99.99 <span class="discount">-20%</span>
    </CardContent>
    <CardFooter>
        <CardFooterContent>
            <SfButton CssClass="e-btn e-primary">BUY NOW</SfButton>
        </CardFooterContent>
    </CardFooter>
</SfCard>

<style>
    .premium-card {
        background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
        border: 2px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        max-width: 300px;
    }

    .premium-card:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-4px);
    }

    .premium-card .e-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 16px;
    }

    .premium-card .e-card-header .e-card-header-title {
        color: white;
        font-size: 20px;
    }

    .discount {
        background-color: #ff5722;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: 600;
    }
</style>

Best Practices

Do's

• ✓ Use CSS classes for consistent styling
• ✓ Leverage theme variables for maintainability
• ✓ Test responsive designs on multiple screen sizes
• ✓ Use transitions for smooth interactions
• ✓ Follow accessibility color contrast guidelines

Don'ts

• ✗ Don't override critical component styles unnecessarily
• ✗ Don't mix inline styles with CSS classes
• ✗ Don't create overly complex selectors
• ✗ Don't forget dark mode support
• ✗ Don't ignore responsive design

Troubleshooting

Styles Not Applying

• Check CSS specificity (use !important sparingly)
• Verify selector matches card elements
• Clear browser cache
• Rebuild and redeploy

Theme Not Loading

• Verify theme CSS link is correct
• Check file path in wwwroot
• Ensure theme package is installed
• Check browser console for 404 errors

Responsive Issues

• Test with browser dev tools
• Use proper media query breakpoints
• Verify CSS grid/flexbox syntax
• Check parent container constraints