LgCard

LgCard displays a free-form content block that can become clickable, navigable, or command-driven. This page also covers LgCardSeparator, which visually separates two areas, and LgCardStripe, which adds a colored stripe with or without an icon.

<LgCard>
    <div class="card-body">Content</div>
</LgCard>

• Namespace : Lagoon.UI.Components
• Inherits from : LgComponentBase
• NuGet package : Lagoon.UI

Visual Structure

The component does not generate its own .card-body block. Add your own internal containers if you want to use Bootstrap's classic card rendering.

Usage

Demo

Try this component in the Lagoon showcase.

Simple card and content structure

LgCard does not have Title, IconName, or HeaderContent parameters. Place all visual structure in ChildContent, for example with .card-body zones if you want to use Bootstrap's card rendering.

SimpleCustomerCardPage.razor

@inherits LgPage

<LgCard CssClass="customer-card"
        Tooltip="#CustomerCardTooltip">
    <div class="card-body">
        <LgTitle Text="#CustomerCardTitle" Level="2" />
        <p>@_customerName</p>
    </div>
</LgCard>

SimpleCustomerCardPage.razor.cs

public partial class SimpleCustomerCardPage : LgPage
{
    // Business data displayed in the card's free-form body.
    private string _customerName = "Contoso";
}

Color stripe, icon, and separator

LgCardStripe is placed directly in the card, outside .card-body zones. LgCardSeparator separates two content blocks.

CustomerStatusCardPage.razor

@inherits LgPage

<LgCard CssClass="customer-card"
        Active="@_isSelected"
        OnClick="OnSelectCardAsync"
        Tooltip="#OpenCustomerTooltip">
    <LgCardStripe Color="var(--bs-info)"
                  IconName="@IconNames.All.InfoCircle"
                  Tooltip="#PriorityCustomerTooltip" />
    <div class="card-body">
        <LgTitle Text="#CustomerCardTitle" Level="2" />
        <p>@_customerName</p>
    </div>
    <LgCardSeparator />
    <div class="card-body">
        <LgTitle Text="#LastOrderTitle" Level="2" />
        <p>@_lastOrderLabel</p>
    </div>
</LgCard>

CustomerStatusCardPage.razor.cs

public partial class CustomerStatusCardPage : LgPage
{
    // Controls the active class to materialize the selected card.
    private bool _isSelected = true;

    // Business name displayed in the card's first block.
    private string _customerName = "Contoso";

    // Last order displayed in the card's second block.
    private string _lastOrderLabel = "CMD-2024-0042";

    // Toggles the selected state on each card click.
    private Task OnSelectCardAsync(ActionEventArgs args)
    {
        _isSelected = !_isSelected;
        return Task.CompletedTask;
    }
}

Navigation card or command card

To navigate, use Link with a typed LgPageLink or Uri / Target for a direct address. To trigger a parent action, use CommandName in a container that listens to OnCommand.

CustomerNavigationCardsPage.razor

@inherits LgPage

<LgCard Link="@_customerLink"
        Tooltip="#OpenCustomerTooltip">
    <div class="card-body">
        <LgTitle Text="#OpenCustomerTitle" Level="2" />
        <p>@_customerName</p>
    </div>
</LgCard>

<LgCard Uri="/exports/customers"
        Target="_blank"
        StopPropagation="true"
        CssClass="mt-3"
        Tooltip="#OpenExportTooltip">
    <div class="card-body">
        <LgTitle Text="#OpenExportTitle" Level="2" />
    </div>
</LgCard>

<LgFrame Title="#CustomerActionsTitle"
         OnCommand="OnCardCommandAsync"
         CssClass="mt-3">
    <LgCard CommandName="archive-customer"
            CommandArgument="@_customerId">
        <div class="card-body">
            <LgTitle Text="#ArchiveCustomerTitle" Level="2" />
        </div>
    </LgCard>
</LgFrame>

CustomerNavigationCardsPage.razor.cs

public partial class CustomerNavigationCardsPage : LgPage
{
    // ID passed as a command argument to act on the correct record.
    private int _customerId = 42;

    // Name displayed in the navigation card.
    private string _customerName = "Contoso";

    // Typed Lagoon link: prefer it over hard-coded routes when the page exposes a factory.
    private LgPageLink _customerLink = LgPageLink.Create("customers/42", "#CustomerDetailsTitle", IconNames.All.People);

    // Receives the card command and prevents its propagation after handling.
    private Task OnCardCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "archive-customer")
        {
            _customerId = (int)args.CommandArgument;
            args.Handled = true;
        }

        return Task.CompletedTask;
    }
}

Important notes

• OnClick receives an ActionEventArgs, not a MouseEventArgs.
• A click in a field (input, textarea, select, option) placed in the card does not trigger the card's action and does not bubble to Blazor @onclick handlers: you can input in a clickable card. A button placed in the card triggers the card's action instead, unless it stops click propagation (this is the default behavior of LgButton, StopPropagation="true").
• ConfirmationMessage should not be combined with CommandName on the same card; use one or the other depending on the scenario.
• LgCardStripe.Color accepts a CSS color (#B60022, var(--bs-info), etc.); if omitted, the theme style is applied.
• LgCardStripe accepts child content (ChildContent), rendered in the stripe: this is what the default card's StripeContent uses in LgListView.
• The legacy Exit parameter no longer exists on LgCard.

Properties

Properties of LgCard

Name	Type	Default	Declared in	Description
Active	bool	false	LgCard	Adds the CSS class active to the card, which highlights it whether hovered or not: tinted background using the theme's accent color, thin border in the same color (without changing the card's size), and bold text. SCSS variables: $card-active-color, $card-active-tint.
ChildContent	RenderFragment	null	LgCard	Free-form content rendered in the card.
CommandArgument	object	null	LgCard	Command argument bubbled when CommandName is used.
CommandName	string	null	LgCard	Name of the command bubbled to the parent ICommandListener.
ConfirmationMessage	string	null	LgCard	Confirmation message displayed before the action. Incompatible with CommandName.
CssClass	string	null	LgCard	Additional CSS classes applied to the card.
Link	LgPageLink	null	LgCard	Typed Lagoon link to a page.
OnClick	EventCallback<ActionEventArgs>	—	LgCard	Callback triggered on card click.
StopPropagation	bool	false	LgCard	Stops click propagation (@onclick:stopPropagation).
Target	string	null	LgCard	Target window used with Uri.
Tooltip	string	null	LgCard	Card tooltip.
TooltipIsHtml	bool	false	LgCard	Indicates whether the tooltip content is interpreted as HTML.
Uri	string	null	LgCard	URI or route opened on click.

Properties of LgCardSeparator

Name	Type	Default	Declared in	Description
CssClass	string	null	LgCardSeparator	Additional CSS classes for the vertical separator.

Properties of LgCardStripe

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgCardStripe	Content rendered in the stripe (after the optional icon); the stripe switches to the card-stripe-icon variant and takes the width of its content (at minimum the width of the variant with an icon).
CssClass	string	null	LgCardStripe	Additional CSS classes for the color stripe.
Color	string	null	LgCardStripe	CSS color applied to the stripe (for example #ff0000 or var(--bs-danger)).
IconName	string	null	LgCardStripe	Icon overlaid on the stripe; switches the render to the card-stripe-icon variant.
Tooltip	string	null	LgCardStripe	Tooltip displayed on stripe hover.
TooltipIsHtml	bool	false	LgCardStripe	Indicates whether the stripe's tooltip is interpreted as HTML.

Events

LgCardSeparator and LgCardStripe do not expose public events.

Event	Type	Description
OnClick	EventCallback<ActionEventArgs>	Triggered when the user clicks on the card. The argument is an ActionEventArgs, not a MouseEventArgs.

Related components

• LgFrame — common container for grouping cards in a section.
• LgButton — alternative when an action should be materialized by a real button rather than a clickable card.
• LgNavLink — navigation component when a simple link is sufficient.