Component

BOBCard

A flexible container for content — header, media, body, and actions in a single component.

API reference ↗

Basic usage

A simple card with only body content.

RAZOR 
<BOBCard>
    <ChildContent>
        <p>A simple card with only body content.</p>
    </ChildContent>
</BOBCard>

With header & actions

Invoice #4213

Total: $240.00 — due April 30.

RAZOR 
<BOBCard>
    <Header><h3 style="margin: 0;">Invoice #4213</h3></Header>
    <ChildContent>
        <p>Total: $240.00 — due April 30.</p>
    </ChildContent>
    <Actions>
        <BOBButton Text="Decline" />
        <BOBButton Text="Pay" BackgroundColor="@PaletteColor.Primary" Color="@PaletteColor.PrimaryContrast" />
    </Actions>
</BOBCard>

With media

Media can be placed at Top (default), AfterHeader, BeforeActions, or Bottom.

Featured

Media area can contain any RenderFragment — image, gradient, or video.

RAZOR 
<BOBCard MediaHeight="160px" Border="@BOBBorderPresets.Rounded">
    <Media>
        <div style="background: linear-gradient(135deg, var(--palette-primary), var(--palette-secondary)); width: 100%; height: 100%;"></div>
    </Media>
    <Header><h3 style="margin: 0;">Featured</h3></Header>
    <ChildContent>
        <p>Media area can contain any RenderFragment — image, gradient, or video.</p>
    </ChildContent>
</BOBCard>

Clickable

Clickable card

Clicked 0 time(s).

RAZOR 
<BOBCard Clickable="true" OnClick="@(() => _clicks++)">
    <Header><h3 style="margin: 0;">Clickable card</h3></Header>
    <ChildContent>
        <p>Clicked @_clicks time(s).</p>
    </ChildContent>
</BOBCard>

Actions alignment

Space-between actions.

RAZOR 
<BOBCard ActionsAlignment="CardActionsAlignment.SpaceBetween">
    <ChildContent><p>Space-between actions.</p></ChildContent>
    <Actions>
        <BOBButton Text="Cancel" />
        <BOBButton Text="Confirm" BackgroundColor="@PaletteColor.Primary" Color="@PaletteColor.PrimaryContrast" />
    </Actions>
</BOBCard>

Elevation

Material Design elevation level (0–24). Derives shadow and dark-mode surface tint automatically.

Elevation 1 — low emphasis.

Elevation 4 — medium emphasis.

Elevation 8 — high emphasis.

RAZOR 
<BOBCard Elevation="1">
    <ChildContent><p>Elevation 1 — low emphasis.</p></ChildContent>
</BOBCard>
<BOBCard Elevation="4">
    <ChildContent><p>Elevation 4 — medium emphasis.</p></ChildContent>
</BOBCard>
<BOBCard Elevation="8">
    <ChildContent><p>Elevation 8 — high emphasis.</p></ChildContent>
</BOBCard>

Shadow & Border

Elevated

Shadow + border combined for a polished look.

Dashed

Border only, no shadow.

Pill shape.

RAZOR 
<BOBCard Shadow="@BOBShadowPresets.Elevation(4)" Border="@BOBBorderPresets.RoundedLarge">
    <Header><h3 style="margin: 0;">Elevated</h3></Header>
    <ChildContent><p>Shadow + border combined for a polished look.</p></ChildContent>
</BOBCard>
<BOBCard Border="@BOBBorderPresets.Dashed">
    <Header><h3 style="margin: 0;">Dashed</h3></Header>
    <ChildContent><p>Border only, no shadow.</p></ChildContent>
</BOBCard>
<BOBCard Shadow="@BOBShadowPresets.Elevation(2)" Border="@BOBBorderPresets.Pill">
    <ChildContent><p>Pill shape.</p></ChildContent>
</BOBCard>

Properties

14 rows.
PropertyTypeDefaultDescription
HeaderRenderFragment?Header content rendered above the card body (typically a title row).
MediaRenderFragment?Media slot rendered as a banner above or below the body, controlled by .
ChildContentRenderFragment?Content rendered inside the component.
ActionsRenderFragment?Action row rendered at the bottom of the card (typically buttons).
ClickableboolWhen , the whole card surfaces a hover/active state and forwards clicks to .
OnClickEventCallback<MouseEventArgs>Raised when the component is clicked.
MediaHeightstring?CSS height applied to the media slot (any valid CSS length, e.g. "160px").
MediaPositionCardMediaPositionCardMediaPosition.TopWhether the media slot renders above or below the card body.
ActionsAlignmentCardActionsAlignmentCardActionsAlignment.EndHorizontal alignment of the action row.
ShadowShadowStyle?Shadow style applied to the card surface. Wins over when both are set.
Elevationint?Material Design elevation level (0–24). Sets a derived shadow and lifts the surface /// in dark mode via a tint overlay. Overridden by when both are set.
BorderBorderStyle?Border style applied to the card edge.
BackgroundColorstring?Background color of the card. Accepts any valid CSS color value.
Colorstring?Text color of the card. Accepts any valid CSS color value.