Class RadzenCard

A card container component that groups related content with a consistent visual design and optional elevation. RadzenCard provides a versatile styled container for displaying information, images, actions, and other content in a structured format. Supports different visual variants (Filled, Flat, Outlined, Text) that affect the card's appearance. Works well in grid layouts (using RadzenRow/RadzenColumn) or can be stacked vertically. Ideal for grouping related information, creating dashboard widgets, displaying product information, or organizing form sections. Combine with other Radzen components like RadzenImage, RadzenText, and RadzenButton for rich card content.

Inheritance

object

ComponentBase

RadzenComponent

RadzenComponentWithChildren

RadzenCard

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponentWithChildren.ChildContent

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenCard : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic card with content:

<RadzenCard>
    <RadzenText TextStyle="TextStyle.H6">Card Title</RadzenText>
    <RadzenText>Card content goes here...</RadzenText>
</RadzenCard>

Card with custom variant:

<RadzenCard Variant="Variant.Outlined" Style="padding: 2rem;">
    <RadzenImage Path="product.jpg" Style="width: 100%; height: 200px; object-fit: cover;" />
    <RadzenText TextStyle="TextStyle.H5">Product Name</RadzenText>
    <RadzenText>Product description...</RadzenText>
    <RadzenButton Text="Buy Now" ButtonStyle="ButtonStyle.Primary" />
</RadzenCard>

Constructors

RadzenCard()

A card container component that groups related content with a consistent visual design and optional elevation. RadzenCard provides a versatile styled container for displaying information, images, actions, and other content in a structured format. Supports different visual variants (Filled, Flat, Outlined, Text) that affect the card's appearance. Works well in grid layouts (using RadzenRow/RadzenColumn) or can be stacked vertically. Ideal for grouping related information, creating dashboard widgets, displaying product information, or organizing form sections. Combine with other Radzen components like RadzenImage, RadzenText, and RadzenButton for rich card content.

Declaration

public RadzenCard()

Examples

Basic card with content:

<RadzenCard>
    <RadzenText TextStyle="TextStyle.H6">Card Title</RadzenText>
    <RadzenText>Card content goes here...</RadzenText>
</RadzenCard>

Card with custom variant:

<RadzenCard Variant="Variant.Outlined" Style="padding: 2rem;">
    <RadzenImage Path="product.jpg" Style="width: 100%; height: 200px; object-fit: cover;" />
    <RadzenText TextStyle="TextStyle.H5">Product Name</RadzenText>
    <RadzenText>Product description...</RadzenText>
    <RadzenButton Text="Buy Now" ButtonStyle="ButtonStyle.Primary" />
</RadzenCard>

Properties

Variant

Gets or sets the visual design variant of the card. Controls the card's appearance: Filled (solid background with elevation), Flat (subtle background), Outlined (border only), or Text (minimal styling).

Declaration

[Parameter]
public Variant Variant { get; set; }

Property Value

Type	Description
Variant	The card variant. Default is Filled.

Methods

BuildRenderTree(RenderTreeBuilder)

A card container component that groups related content with a consistent visual design and optional elevation. RadzenCard provides a versatile styled container for displaying information, images, actions, and other content in a structured format. Supports different visual variants (Filled, Flat, Outlined, Text) that affect the card's appearance. Works well in grid layouts (using RadzenRow/RadzenColumn) or can be stacked vertically. Ideal for grouping related information, creating dashboard widgets, displaying product information, or organizing form sections. Combine with other Radzen components like RadzenImage, RadzenText, and RadzenButton for rich card content.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable