Card

Use the Radzen Blazor Card component to display a piece of content, like an image and text. Cards often provide a summary of the content they represent, along with a call-to-action to encourage further user engagement.

These demos show card containers displaying content like images and text with different variants (filled/outlined) to create visually distinct content blocks.

• Example
• Edit Source

Employee

Steven Buchanan

Company

Vins et alcools Chevalier

Delivery Information

Country

France

City

Reims

Ship name

Vins et alcools Chevalier

Freight

$32.38

Cancel Send

Card Variant link

Use the Variant property, e.g. Variant="Variant.Outlined".

• Example
• Edit Source

Variant:

Filled

Flat

Text

Outlined

Filled

• Filled
• Flat
• Text
• Outlined

Employee

Steven Buchanan

Company

Vins et alcools Chevalier

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT