M
Marai.UI v1.0.0-alpha.7

Card

A composable, production-ready card family with beautiful defaults. Structured sections, token-driven styling, and safe Tailwind overrides.

Overview

The MCard family provides six semantic wrappers: MCard, MCardHeader, MCardTitle, MCardDescription, MCardContent, and MCardFooter. Each renders with default styles out of the box. Use Class for layout overrides — max-width, grid spans, hover effects, and custom spacing.

Usage

razor 
@using Marai.UI.Components.MCard

Basic Usage

A complete card with header, content, and footer — no extra classes required:

Preview

Notification Settings

Manage how you receive alerts and updates.

Configure notification channels for your merchant account.

razor 
@using Marai.UI.Components.MCard
@using Marai.UI.Components.MButton

<MCard Class="max-w-md">
    <MCardHeader>
        <MCardTitle>Notification Settings</MCardTitle>
        <MCardDescription>Manage how you receive alerts and updates.</MCardDescription>
    </MCardHeader>
    <MCardContent>
        <p class="text-sm">Configure notification channels for your merchant account.</p>
    </MCardContent>
    <MCardFooter class="gap-2">
        <MButton Variant="Variant.Primary">Save Changes</MButton>
        <MButton Variant="Variant.Outline">Cancel</MButton>
    </MCardFooter>
</MCard>

Composition

Mix and match sub-components to build any card layout. Only include the parts you need.

Header Only

Preview

Merchant Settings

Update your merchant profile and preferences.

razor 
@using Marai.UI.Components.MCard

<MCard Class="max-w-sm">
    <MCardHeader>
        <MCardTitle>Merchant Settings</MCardTitle>
        <MCardDescription>Update your merchant profile and preferences.</MCardDescription>
    </MCardHeader>
</MCard>

Content Only

Preview

This card has no header — just content.

razor 
<MCard Class="max-w-sm rounded-lg border border-slate-200 bg-white shadow-sm">
    <MCardContent Class="p-6">
        <p class="text-sm text-slate-700">This card has no header — just content.</p>
    </MCardContent>
</MCard>
Preview

Delete Account

This action cannot be undone.

razor 
<MCard Class="max-w-sm rounded-lg border border-slate-200 bg-white shadow-sm">
    <MCardHeader Class="flex flex-col gap-1 px-6 pt-6 pb-3">
        <MCardTitle Class="text-xl font-semibold text-slate-950">Delete Account</MCardTitle>
        <MCardDescription Class="text-sm text-slate-500">This action cannot be undone.</MCardDescription>
    </MCardHeader>
    <MCardFooter Class="flex gap-2 px-6 pb-6">
        <MButton Class="inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">Delete</MButton>
        <MButton Class="inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</MButton>
    </MCardFooter>
</MCard>

Common Examples

Merchant Profile Card

Preview
MA

Marai Systems

contact@marai.io

Status: Active
razor 
@using Marai.UI.Components.MCard
@using Marai.UI.Components.MButton
@using Marai.UI.Components.MBadge

<div class="flex justify-center">
    <MCard Class="w-full max-w-sm">
        <MCardHeader>
            <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white">
                    MA
                </div>
                <div class="flex flex-col gap-0.5">
                    <MCardTitle Class="text-lg">Marai Systems</MCardTitle>
                    <MCardDescription>contact@marai.io</MCardDescription>
                </div>
            </div>
        </MCardHeader>
        <MCardContent>
            <div class="flex items-center gap-2 text-sm">
                <span>Status:</span>
                <MBadge Variant="Variant.Success">Active</MBadge>
            </div>
        </MCardContent>
        <MCardFooter class="gap-2">
            <MButton Variant="Variant.Primary" Size="Size.Sm">View Profile</MButton>
            <MButton Variant="Variant.Outline" Size="Size.Sm">Message</MButton>
        </MCardFooter>
    </MCard>
</div>

Statistics Card

Preview

Total Revenue

January 2025

$45,231.89

+20.1% from last month

razor 
@using Marai.UI.Components.MCard

<div class="flex justify-center">
    <MCard Class="w-full max-w-sm">
        <MCardHeader>
            <MCardTitle>Total Revenue</MCardTitle>
            <MCardDescription>January 2025</MCardDescription>
        </MCardHeader>
        <MCardContent>
            <p class="text-4xl font-bold">$45,231.89</p>
            <p class="mt-1 text-sm text-green-600">+20.1% from last month</p>
        </MCardContent>
    </MCard>
</div>

Form Card

Preview

Create Account

Enter your details to get started.

razor 
<div class="flex justify-center">
    <MCard Class="w-full max-w-sm rounded-lg border border-slate-200 bg-white shadow-sm">
        <MCardHeader Class="flex flex-col gap-1 px-6 pt-6 pb-3">
            <MCardTitle Class="text-xl font-semibold text-slate-950">Create Account</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">Enter your details to get started.</MCardDescription>
        </MCardHeader>
        <MCardContent Class="flex flex-col gap-4 px-6 pb-3">
            <div class="flex flex-col gap-1.5">
                <MLabel For="name">Name</MLabel>
                <MInput id="name" Placeholder="John Doe" />
            </div>
            <div class="flex flex-col gap-1.5">
                <MLabel For="email">Email</MLabel>
                <MInput id="email" Type="email" Placeholder="john@example.com" />
            </div>
        </MCardContent>
        <MCardFooter Class="px-6 pb-6">
            <MButton Class="w-full inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">Create Account</MButton>
        </MCardFooter>
    </MCard>
</div>

Content Card Grid

Preview
Technology

What's New in 2022 Tech

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus.

JD

Jane Doe

2 days ago

Food

Delicious Food

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus.

JD

Jane Doe

Yesterday

Automotive

Race To Your Heart Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus.

JD

John Doe

5 days ago

razor 
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <MCard Class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
        <div class="aspect-video bg-linear-to-br from-blue-100 to-purple-100 flex items-center justify-center">
            <svg class="w-16 h-16 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"/>
                <path d="M3 9h18M9 3v18" stroke-width="2"/>
            </svg>
        </div>
        <MCardHeader Class="flex flex-col gap-2 px-4 pt-4 pb-2">
            <MBadge Class="inline-flex w-fit items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Technology</MBadge>
            <MCardTitle Class="text-base font-semibold text-slate-950">What's New in 2022 Tech</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus.
            </MCardDescription>
        </MCardHeader>
        <MCardFooter Class="px-4 pb-4 pt-2">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-xs">
                    JD
                </div>
                <div class="flex flex-col">
                    <p class="text-sm font-medium text-slate-900">Jane Doe</p>
                    <p class="text-xs text-slate-500 mt-0.5">2 days ago</p>
                </div>
            </div>
        </MCardFooter>
    </MCard>

    <MCard Class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
        <div class="aspect-video bg-linear-to-br from-green-100 to-emerald-100 flex items-center justify-center">
            <svg class="w-16 h-16 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="9" stroke-width="2"/>
                <path d="M12 6v6l4 2" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </div>
        <MCardHeader Class="flex flex-col gap-2 px-4 pt-4 pb-2">
            <MBadge Class="inline-flex w-fit items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">Food</MBadge>
            <MCardTitle Class="text-base font-semibold text-slate-950">Delicious Food</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus.
            </MCardDescription>
        </MCardHeader>
        <MCardFooter Class="px-4 pb-4 pt-2">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold text-xs">
                    JD
                </div>
                <div class="flex flex-col">
                    <p class="text-sm font-medium text-slate-900">Jane Doe</p>
                    <p class="text-xs text-slate-500 mt-0.5">Yesterday</p>
                </div>
            </div>
        </MCardFooter>
    </MCard>

    <MCard Class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
        <div class="aspect-video bg-linear-to-br from-red-100 to-pink-100 flex items-center justify-center">
            <svg class="w-16 h-16 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke-width="2"/>
            </svg>
        </div>
        <MCardHeader Class="flex flex-col gap-2 px-4 pt-4 pb-2">
            <MBadge Class="inline-flex w-fit items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Automotive</MBadge>
            <MCardTitle Class="text-base font-semibold text-slate-950">Race To Your Heart Content</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus.
            </MCardDescription>
        </MCardHeader>
        <MCardFooter Class="px-4 pb-4 pt-2">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white font-semibold text-xs">
                    JD
                </div>
                <div class="flex flex-col">
                    <p class="text-sm font-medium text-slate-900">John Doe</p>
                    <p class="text-xs text-slate-500 mt-0.5">5 days ago</p>
                </div>
            </div>
        </MCardFooter>
    </MCard>
</div>

Safe Tailwind Overrides

Use Class on any sub-component to append layout or visual overrides. The default structural classes are always applied first; user-supplied classes win conflicts.

Preview

Enhanced Shadow

Card with no border and large shadow.

Colored Border

Card with custom border color.

Gradient Background

Card with gradient background.

razor 
<div class="flex flex-col items-center gap-6">
    <MCard Class="max-w-sm w-full border-none shadow-2xl bg-white rounded-lg">
        <MCardHeader Class="flex flex-col gap-1 px-6 py-6">
            <MCardTitle Class="text-xl font-semibold text-slate-950">Enhanced Shadow</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">Card with no border and large shadow.</MCardDescription>
        </MCardHeader>
    </MCard>

    <MCard Class="max-w-sm w-full border-2 border-blue-600 bg-white rounded-lg shadow-sm">
        <MCardHeader Class="flex flex-col gap-1 px-6 py-6">
            <MCardTitle Class="text-xl font-semibold text-slate-950">Colored Border</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">Card with custom border color.</MCardDescription>
        </MCardHeader>
    </MCard>

    <MCard Class="max-w-sm w-full rounded-lg bg-linear-to-br from-purple-50 to-blue-50 border border-slate-200 shadow-sm">
        <MCardHeader Class="flex flex-col gap-1 px-6 py-6">
            <MCardTitle Class="text-xl font-semibold text-slate-950">Gradient Background</MCardTitle>
            <MCardDescription Class="text-sm text-slate-500">Card with gradient background.</MCardDescription>
        </MCardHeader>
    </MCard>
</div>

Accessibility

  • MCardTitle renders an <h3> — ensure it fits your page heading hierarchy
  • MCardDescription renders a <p> for semantic paragraph content
  • Add aria-label to the root MCard when the card's purpose is not obvious from its heading
  • Use role="region" with aria-labelledby to mark landmark cards in complex layouts

API Reference

All six components share the same parameter API:

Parameter Type Default Description
ChildContent RenderFragment? null Content rendered inside the element.
Class string? null Additional Tailwind classes appended after defaults. User-supplied classes win conflicts.
AdditionalAttributes Dictionary<string, object>? null Arbitrary HTML attributes (aria-*, data-*, id, etc.) passed to the root element.

Component Elements

Component Renders Default Classes
MCard <div> Border, background, shadow, radius
MCardHeader <div> flex flex-col space-y-1.5 p-6
MCardTitle <h3> text-2xl font-semibold leading-none tracking-tight
MCardDescription <p> text-sm text-muted-foreground
MCardContent <div> p-6 pt-0
MCardFooter <div> flex items-center p-6 pt-0