sufi-blazor/docs/components/surfaces/SbCard.md

SbCard

A versatile container component for grouping related content with elevation, borders, and optional header/footer sections. Cards can be static, clickable, or linkable.

Parameters

Parameter	Type	Default	Description
Elevation	int	1	Shadow depth level (0-5)
Outlined	bool	false	Shows border instead of shadow
Href	string?	null	Makes card a link to this URL
NoPadding	bool	false	Removes default padding
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes

Events

Event	Type	Description
OnClick	EventCallback	Fired when card is clicked (makes card a button)

Templates / Slots

Slot	Type	Description
Header	RenderFragment?	Content for the card header section
ChildContent	RenderFragment?	Main body content of the card
Footer	RenderFragment?	Content for the card footer section

Template Usage

Basic

<SbCard>
    <p>Card body content</p>
</SbCard>

With Header and Footer

<SbCard>
    <Header>
        <SbHeading Level="3">Card Title</SbHeading>
    </Header>
    <ChildContent>
        <p>Main content goes here.</p>
    </ChildContent>
    <Footer>
        <SbButton>Action</SbButton>
    </Footer>
</SbCard>

CSS Classes

• sb-card - Base class
• sb-card--elevation-0 through sb-card--elevation-5 - Shadow levels
• sb-card--outlined - Bordered variant
• sb-card--clickable - Applied when card is interactive
• sb-card--no-padding - Removes padding
• sb-card__header - Header section
• sb-card__body - Body section
• sb-card__footer - Footer section

Rendered Element

• <div> - Default static card
• <a> - When Href is provided
• <button> - When OnClick is provided

Examples

Basic Card

<SbCard>
    <p>This is a simple card with default settings.</p>
</SbCard>

With Header and Footer

<SbCard>
    <Header>
        <SbHeading Level="4">User Profile</SbHeading>
    </Header>
    <ChildContent>
        <p>Name: John Doe</p>
        <p>Email: john@example.com</p>
    </ChildContent>
    <Footer>
        <SbButton Variant="SbButtonVariant.Ghost">Edit</SbButton>
        <SbButton>Save</SbButton>
    </Footer>
</SbCard>

Elevation Levels

<SbCard Elevation="0">No shadow</SbCard>
<SbCard Elevation="1">Subtle shadow</SbCard>
<SbCard Elevation="2">Light shadow</SbCard>
<SbCard Elevation="3">Medium shadow</SbCard>
<SbCard Elevation="4">Strong shadow</SbCard>
<SbCard Elevation="5">Heavy shadow</SbCard>

Outlined Card

<SbCard Outlined="true">
    <p>This card has a border instead of shadow.</p>
</SbCard>

Clickable Card

<SbCard OnClick="HandleCardClick">
    <Header>
        <SbHeading Level="4">Click Me</SbHeading>
    </Header>
    <p>This entire card is clickable.</p>
</SbCard>

@code {
    private void HandleCardClick(MouseEventArgs args)
    {
        Console.WriteLine("Card clicked!");
    }
}

Link Card

<SbCard Href="/products/123">
    <Header>
        <SbHeading Level="4">Product Name</SbHeading>
    </Header>
    <p>Click to view product details.</p>
</SbCard>

No Padding

<SbCard NoPadding="true">
    <img src="image.jpg" alt="Full bleed image" style="width: 100%;" />
    <div style="padding: 16px;">
        <SbHeading Level="4">Image Caption</SbHeading>
        <p>Description text with custom padding.</p>
    </div>
</SbCard>

Product Card Example

<SbCard Class="product-card">
    <Header>
        <img src="@product.Image" alt="@product.Name" />
    </Header>
    <ChildContent>
        <SbHeading Level="4">@product.Name</SbHeading>
        <SbText Color="SbColor.Primary">$@product.Price</SbText>
        <SbText Variant="SbTextVariant.BodySmall">@product.Description</SbText>
    </ChildContent>
    <Footer>
        <SbButton FullWidth="true" OnClick="() => AddToCart(product)">
            Add to Cart
        </SbButton>
    </Footer>
</SbCard>

Dashboard Stat Card

<SbCard Elevation="2">
    <Header>
        <SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
            Total Revenue
        </SbText>
    </Header>
    <ChildContent>
        <SbHeading Level="2">$45,231</SbHeading>
        <SbChip Color="SbColor.Success" Size="SbSize.Sm">+12.5%</SbChip>
    </ChildContent>
</SbCard>