Card

The ArcadiaCard component is a feature-rich content container supporting multiple visual variants, skeleton loading, collapsible body, selection state, and more.

Basic Usage

<ArcadiaCard Title="Getting Started" Subtitle="Quick introduction">
    <p>Card body content goes here.</p>
</ArcadiaCard>
<ArcadiaCard Title="Product" ImageUrl="/images/product.jpg" ImageHeight="200px">
    <p>Product description.</p>
    <FooterTemplate>
        <button>Buy Now</button>
    </FooterTemplate>
</ArcadiaCard>

Glass Variant

<ArcadiaCard Variant="glass" BlurAmount="20" GlassOpacity="0.15" Title="Glassmorphism">
    Frosted glass effect card.
</ArcadiaCard>

Parameters

ParameterTypeDefaultDescription
Titlestring?nullCard title displayed in the header.
Subtitlestring?nullSubtitle displayed below the title.
Badgestring?nullSmall badge/tag above the title (e.g., “New”, “Pro”).
HeaderTemplateRenderFragment?nullCustom header template. When set, Title/Subtitle/Badge are ignored.
FooterTemplateRenderFragment?nullCustom footer template for action buttons.
ChildContentRenderFragment?nullCard body content.
HeaderActionsRenderFragment?nullRender fragment flush-right in the header row for action buttons/icons.
MenuTemplateRenderFragment?nullContext menu dropdown content. Shows a three-dot menu button when set.
ClickableboolfalseEnables hover lift effect and role="button".
Variantstring"solid"Card variant: "solid", "glass", "outlined", "ghost".
Elevationint1Shadow depth level (0-5).
BlurAmountint16Blur intensity in pixels for glass variant.
GlassOpacitydouble0.12Background opacity (0.0-1.0) for glass variant.
AccentColorstring?nullCSS color for a colored left border accent.
GradientBorderboolfalseEnable gradient border effect.
ImageUrlstring?nullHeader image URL.
ImageHeightstring?"180px"CSS height value for the image.
ImageOverlayboolfalseShow a dark gradient overlay on the image.
ImageAspectRatiostring?nullCSS aspect-ratio for the image (overrides ImageHeight when set).
LoadingboolfalseReplace card content with a shimmer skeleton placeholder.
LoadingAnimationstring"wave"Skeleton animation style: "wave", "pulse", "fade".
CollapsibleboolfalseAllow the card body to be collapsed/expanded.
CollapsedboolfalseWhether the card body is collapsed. Supports two-way binding.
Statusstring?nullStatus severity: "info", "warning", "error", "success". Adds a colored top border.
Orientationstring"vertical"Card orientation: "vertical" or "horizontal".
SelectedboolfalseWhether the card is in a selected state with checkmark.
DisabledboolfalseVisually dims the card and disables all interactions.
Classstring?nullAdditional CSS class names.
Stylestring?nullInline CSS styles.

Events

EventTypeDescription
OnClickEventCallbackFired when a clickable card is clicked.
CollapsedChangedEventCallback<bool>Fired when the collapsed state changes.
SelectedChangedEventCallback<bool>Fired when the selected state changes.

Accessibility

  • Clickable cards use role="button" and tabindex="0".
  • Disabled cards set aria-disabled="true".
  • Collapse toggle buttons include aria-label="Toggle card body".
  • Menu trigger buttons include aria-label="Card menu".
  • Keyboard support: Enter and Space activate clickable cards.