CardGroup

Use the Radzen Blazor CardGroup component to visually stick RadzenCards next to each other.

By default the CardGroup is responsive and Cards wrap one below the other on screen sizes smaller than 576px. Use Responsive="false" to disable responsiveness.

In this demo three cards for Team 1, Team 2, and Team 3 display progress percentages (55%, 32%, 76%) with progress bars, with controls to toggle Responsive behavior and select card Variant (Filled, Flat, Outlined, Text).

Example
Edit Source

Card Variant:

Responsive:

Team 1

55%

Team 2

32%

Team 3

76%

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

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation

CardGroup

Team 1

55%

Team 2

32%

Team 3

76%

Save Hours on Every Project

Demos Configuration