Cards — Blazify

Stat cards (dashboard)

For showing one key number along with its trend. Filled makes the card solid.

12,480

Active users

12%

3,210

Orders

8%

89.5M

Revenue (Toman)

3%

42

Pending

Parameter	Description
`Value` / `Label`	The headline number and its label
`Trend` / `TrendUp`	The change percentage and its direction
`Filled`	A solid background instead of a soft one
`Color`	Colour of the icon and accents

razor

@using BzCore.Components.Card
@using BzCore.Enums

<div class="card-grid">
    <BzStatCard Icon="fa-solid fa-users" Value="12,480" Label="کاربران فعال"
                Trend="12%" TrendUp="true" Color="BzColor.Primary" />

    <BzStatCard Icon="fa-solid fa-cart-shopping" Value="3,210" Label="سفارش ها"
                Trend="8%" TrendUp="true" Color="BzColor.Success" Filled />

    <BzStatCard Icon="fa-solid fa-coins" Value="89.5M" Label="درآمد (تومان)"
                Trend="3%" TrendUp="false" Color="BzColor.Warning" />

    <BzStatCard Icon="fa-solid fa-clock-rotate-left" Value="42" Label="در انتظار"
                Color="BzColor.Info" />
</div>

<style>
    /* equal-height, responsive columns */
    .card-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        align-items: stretch;
    }
    .card-grid > * { height: 100%; }
</style>

The ten card variants

All variants share one snippet; only Variant changes. Media and Horizontal need an ImageUrl.

This is a Elevated card.

This is a Outlined card.

This is a Filled card.

This is a Soft card.

This is a Gradient card.

This is a Glass card.

This is a AccentTop card.

This is a AccentStart card.

This is a Media card.

This is a Horizontal card.

razor

@using BzCore.Components.Card
@using BzCore.Components.Button
@using BzCore.Enums

<div class="card-grid">
    @foreach (var v in Enum.GetValues<BzCardVariant>())
    {
        <BzCard Variant="v" Color="BzColor.Primary" Title="@v.ToString()"
                Subtitle="نمونه کارت" Icon="fa-solid fa-cube" Hoverable
                ImageUrl="@(v is BzCardVariant.Media or BzCardVariant.Horizontal ? "/img/ph.svg" : null)">
            <ChildContent>
                <p>این یک کارت از نوع <strong>@v</strong> است.</p>
            </ChildContent>
            <Footer>
                <BzButton Size="BzSize.Small" Text="جزییات" Variant="BzButtonVariant.Soft" />
                <BzButton Size="BzSize.Small" Text="حذف" Variant="BzButtonVariant.Text"
                          Color="BzColor.Danger" />
            </Footer>
        </BzCard>
    }
</div>

<style>
    .card-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        align-items: stretch;
    }
    .card-grid > * { height: 100%; }
</style>

Dynamic size and colour

Set a fixed Width, and change the accent with Color.

Full access to every feature.

A card tinted with the success colour.

A card with a side accent bar.

Section	Description
`ChildContent`	The card body
`Header` / `Footer`	Top and bottom of the card
`Actions`	Buttons in the header corner
`Media` / `ImageUrl`	The card image
`Clickable` / `OnClick`	Makes the whole card clickable
`Dense`	Tighter spacing

razor

@using BzCore.Components.Card
@using BzCore.Components.Button
@using BzCore.Enums

<BzCard Variant="BzCardVariant.Gradient" Color="BzColor.Primary"
        Title="پلن طلایی" Icon="fa-solid fa-crown">
    <ChildContent><p>مثلا برا پلن vip و ... بدرد میخوره</p></ChildContent>
    <Footer><BzButton Size="BzSize.Small" Text="انتخاب" /></Footer>
</BzCard>

<BzCard Variant="BzCardVariant.Soft" Color="BzColor.Success"
        Title="موفقیت" Icon="fa-solid fa-check">
    <ChildContent><p>این یکی رنگ success برا کارت میزاره</p></ChildContent>
</BzCard>

<BzCard Variant="BzCardVariant.AccentStart" Color="BzColor.Danger"
        Title="هشدار مهم" Icon="fa-solid fa-bell">
    <ChildContent><p>نوار تایید کنارش هس</p></ChildContent>
</BzCard>

@*
Width="240px" pins a card to a fixed width instead of letting the grid size it.
A clickable card:
    <BzCard Clickable OnClick="@(() => Nav.NavigateTo("/details"))" ... />
*@