Files
2026-05-18 15:53:59 +03:30

3.7 KiB

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>
<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>