Syncfusion.Blazor.Cards 34.2.7

Syncfusion® Blazor Card

The Syncfusion® Blazor Card Component is a container-based UI control for displaying organized content with structured layouts. Perfect for social media feeds, e-commerce galleries, dashboards, and other content-rich applications.

Using this package with an AI coding agent

Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:

Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Key Features

• Flexible Container Layout – Separate areas for header, content, image, and footer
• Rich Header Support – Title, subtitle, and optional image positioning
• Template Support – HTML, child content, and custom templates
• Action Footer – Built-in footer area for buttons and actions
• Multiple Layouts – Stacked, media, and action card variations
• Theme Support – Bootstrap, Material, Fabric, and custom themes
• Responsive Design – Adapts seamlessly to all screen sizes

System requirements

• .NET 8.0 or later (Blazor Server, Blazor Web App, Blazor WebAssembly and Blazor Hybrid)
• See full requirements: System Requirements

Installation

Install the Cards package and the themes package, which provides the stylesheets referenced below:

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

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor.
• For Blazor WebAssembly App: add these to wwwroot/index.html.

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor services in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the Card component in a Razor page:

<SfCard>
	<CardHeader Title="Card title" SubTitle="Card subtitle" />
	<CardContent Content="This is the card body content." />
	<CardFooter>
		<button class="btn btn-primary">Action</button>
	</CardFooter>
</SfCard>

Documentation

• Getting Started with Blazor Web App
• Getting Started with WebAssembly
• Feature Overview
• API Reference
• Live Demos

Support

• Community forums
• Support ticket
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. See the Syncfusion® EULA.

• Purchase a license
• start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET