Layout

TwCard

TwCard is a Blazor card component for grouping content. Set Title, HeaderContent and Bordered, or lay cards out in a responsive grid.

Last updated 24 September 2026

Basic Card

A simple card with a title and content.

Account Overview

Your account is in good standing. You have 3 active subscriptions.

Razor

<TwCard Title="Account Overview">
    <p class="text-gray-600 dark:text-gray-400">
        Your account is in good standing. You have <span class="font-semibold text-gray-900 dark:text-white">3</span> active subscriptions.
    </p>
</TwCard>

Card Without Border

Set Bordered="false" to remove the border.

Borderless Card

This card relies on shadow and background contrast alone.

Razor

<TwCard Title="Borderless Card" Bordered="false">
    <p class="text-gray-600 dark:text-gray-400">This card relies on shadow and background contrast alone.</p>
</TwCard>

Card With Footer

Use FooterContent for actions or metadata.

Invoice #1042

Amount £2,340.00

Status Paid

Razor

<TwCard Title="Invoice #1042">
    <HeaderContent>
        <div class="space-y-2">
            <div class="flex justify-between text-sm">
                <span class="text-gray-600 dark:text-gray-400">Amount</span>
                <span class="font-semibold">£2,340.00</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-600 dark:text-gray-400">Status</span>
                <span class="text-green-700 dark:text-green-400 font-semibold">Paid</span>
            </div>
        </div>
        <div class="flex gap-2">
            <TwButton Variant="ButtonVariant.Text" Color="Color.Primary">Download</TwButton>
            <TwButton Variant="ButtonVariant.Filled" Color="Color.Primary">View Details</TwButton>
        </div>
    </HeaderContent>
</TwCard>

Card With Header Content

Use HeaderContent for custom header elements alongside the title.

Team Members

Manage your team and their account permissions.

Alice Johnson

Admin

Active

Bob Smith

Editor

Active

Carol Williams

Viewer

Active

Razor

<TwCard Title="Team Members">
    <HeaderContent>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Manage your team and their account permissions.</p>
    </HeaderContent>
    <ChildContent>
        <div class="space-y-3">
            @foreach (var member in _members)
            {
                <div class="flex items-center justify-between py-2">
                    <div>
                        <p class="font-medium text-sm">@member.Name</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400">@member.Role</p>
                    </div>
                    <TwChip Label="Active" Size="ChipSize.Small" Color="Color.Success" Variant="ButtonVariant.Filled" />
                </div>
            }
        </div>
    </ChildContent>
</TwCard>

CSHARP

@code {
    private sealed record TeamMember(string Name, string Role);
    
    private readonly TeamMember[] _members =
    [
        new("Alice Johnson", "Admin"),
        new("Bob Smith", "Editor"),
        new("Carol Williams", "Viewer")
    ];
}

Content-Only Card

A card with no title - just content.

Jack Thompson

Product Designer

Razor

<TwCard>
    <div class="flex items-center gap-4">
        <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
            <TwIcon Icon="Icon.Person" Class="text-blue-600 dark:text-blue-400 text-xl" />
        </div>
        <div>
            <p class="font-semibold text-sm">Jack Thompson</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Product Designer</p>
        </div>
    </div>
</TwCard>

Card Grid

Cards work well in grid layouts.

Revenue

£24,500

+12.5% from last month

Orders

1,234

+8.2% from last month

Customers

567

+3.1% from last month

Razor

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <TwCard Title="Revenue">
        <p class="text-2xl font-bold">£24,500</p>
        <p class="text-sm text-green-700 dark:text-green-400 mt-1">+12.5% from last month</p>
    </TwCard>
    <TwCard Title="Orders">
        <p class="text-2xl font-bold">1,234</p>
        <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">+8.2% from last month</p>
    </TwCard>
    <TwCard Title="Customers">
        <p class="text-2xl font-bold">567</p>
        <p class="text-sm text-purple-600 dark:text-purple-400 mt-1">+3.1% from last month</p>
    </TwCard>
</div>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwCardTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Container`	string
`Bordered`	string
`Title`	string

Full reference: TwCardTheme on the API docs.