sufi-blazor/docs/components/data/SbStatCard.md

SbStatCard

A card component for displaying key metrics and statistics with optional icon, prefix/suffix, trend, description, and actions.

Parameters

Parameter	Type	Default	Description
Label	string	-	Label describing the statistic
Value	string	-	The statistic value (displayed as-is)
Prefix	string?	null	Text before the value (e.g. "$")
Suffix	string?	null	Text after the value (e.g. "%", "min")
Trend	double?	null	Trend percentage (positive or negative)
TrendLabel	string?	null	Trend description (e.g. "vs last month")
ShowTrend	bool	true	Whether to show trend when Trend is set
Description	string?	null	Additional description text below trend
Class	string?	null	Additional CSS classes

Slots (RenderFragments)

Slot	Type	Description
Icon	RenderFragment?	Icon content (e.g. <Icon><SbIcon Name="users" /></Icon>)
Actions	RenderFragment?	Action buttons or links (e.g. "View All" button)

CSS Classes

• sb-stat-card - Base class
• sb-stat-card__icon - Icon container
• sb-stat-card__content - Content area
• sb-stat-card__label - Label text
• sb-stat-card__value - Value display
• sb-stat-card__prefix - Value prefix
• sb-stat-card__suffix - Value suffix
• sb-stat-card__trend - Trend row
• sb-stat-card__trend--positive - Positive trend (e.g. arrow up)
• sb-stat-card__trend--negative - Negative trend (e.g. arrow down)
• sb-stat-card__trend-icon - Trend arrow
• sb-stat-card__trend-value - Trend percentage
• sb-stat-card__trend-label - Trend label text
• sb-stat-card__description - Description text
• sb-stat-card__actions - Actions area

Examples

Basic Usage

<SbStatCard Label="Total Users" Value="2,543" />

<SbStatCard Label="Revenue" Value="98,234" Prefix="$" />

<SbStatCard Label="Growth Rate" Value="12.5" Suffix="%" />

With Icons

<SbStatCard Label="Total Sales" Value="1,249" Prefix="$">
    <Icon>
        <SbIcon Name="dollar-sign" Size="SbSize.Xl" Color="SbColor.Success" />
    </Icon>
</SbStatCard>

<SbStatCard Label="Active Users" Value="8,459">
    <Icon>
        <SbIcon Name="users" Size="SbSize.Xl" Color="SbColor.Primary" />
    </Icon>
</SbStatCard>

With Trends

<SbStatCard Label="Total Orders" Value="3,456"
            Trend="12.5" TrendLabel="vs last month">
    <Icon>
        <SbIcon Name="shopping-cart" Size="SbSize.Xl" Color="SbColor.Primary" />
    </Icon>
</SbStatCard>

<SbStatCard Label="Bounce Rate" Value="23.4" Suffix="%"
            Trend="-5.3" TrendLabel="vs last month">
    <Icon>
        <SbIcon Name="trend-down" Size="SbSize.Xl" Color="SbColor.Warning" />
    </Icon>
</SbStatCard>

With Descriptions

<SbStatCard Label="Page Views" Value="234,567"
            Trend="15.3" TrendLabel="from last month"
            Description="Total page views across all pages">
    <Icon>
        <SbIcon Name="eye" Size="SbSize.Xl" Color="SbColor.Info" />
    </Icon>
</SbStatCard>

With Actions

<SbStatCard Label="Pending Tasks" Value="12"
            Description="Tasks awaiting review">
    <Icon>
        <SbIcon Name="clipboard-list" Size="SbSize.Xl" Color="SbColor.Warning" />
    </Icon>
    <Actions>
        <SbButton Size="SbSize.Sm" Variant="SbButtonVariant.Outline">
            View All
        </SbButton>
    </Actions>
</SbStatCard>

Without Trend Display

<SbStatCard Label="Total Products" Value="1,234"
            ShowTrend="false"
            Description="Items in inventory">
    <Icon>
        <SbIcon Name="package" Size="SbSize.Xl" Color="SbColor.Secondary" />
    </Icon>
</SbStatCard>