This component is a composition of 4 key components:
LumexCard : The container that groups related content and actions in a structured layout.LumexCardBody : The top section of the card, typically used to display a title.LumexCardFooter : The main content of the card, such as text, or images.LumexCardHeader : The bottom section of the card, typically used for actions.
The basic card component provides a simple container for organizing content.
You can combine the header, body, and footer as needed.
<LumexCard>
<LumexCardBody>
<p>Make beautiful websites regardless of your design experience.</p>
</LumexCardBody>
</LumexCard>
You can add LumexDivider component between different
sections of the card for a clearer separation of content.
@using LumexUI.Shared.Icons
<LumexCard Class="max-w-sm">
<LumexCardHeader Class="gap-3">
<span class="size-10 rounded-lg bg-gradient-to-tr from-indigo-100 to-indigo-300" />
<div class="flex flex-col">
<p class="font-semibold">LumexUI</p>
<p class="text-small text-foreground-500">lumexui.org</p>
</div>
</LumexCardHeader>
<LumexDivider />
<LumexCardBody>
<p>Make beautiful websites regardless of your design experience.</p>
</LumexCardBody>
<LumexDivider />
<LumexCardFooter>
<LumexLink Href="https://github.com/LumexUI/lumexui"
External="@true"
Class="text-indigo-500 dark:text-indigo-400">
Visit source code on GitHub
<ExternalLinkIcon Size="16" class="ml-1" />
</LumexLink>
</LumexCardFooter>
</LumexCard>
Create a more complex card layout by combining other LumexUI components.
@using LumexUI.Shared.Icons
<LumexCard Class="max-w-sm">
<LumexCardHeader Class="justify-between pb-0">
<div class="flex items-center">
<CalendarClockIcon Size="20" class="mr-1.5 text-primary" />
<p class="text-small text-foreground-500">16:15, 3 Dec</p>
</div>
<LumexButton IconOnly="@true"
Size="@Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Light">
<EllipsisVerticalIcon Size="20" />
</LumexButton>
</LumexCardHeader>
<LumexCardBody>
<p class="text-sm">
User <strong>Clark Kent</strong> invites you to join the route.
</p>
<div class="grid grid-cols-5 mt-2 items-center">
<div class="col-span-3">
<p class="font-semibold">London, England</p>
<p class="text-small">06.09.2024 - 13.09.2024</p>
</div>
<LumexAvatarGroup Max="2" Class="col-span-2">
<LumexAvatar Name="A S" Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Name="D N" Src="https://i.pravatar.cc/150?img=12" />
<LumexAvatar Name="S P" Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Name="J D" Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Name="A N" Src="https://i.pravatar.cc/150?img=2" />
</LumexAvatarGroup>
</div>
</LumexCardBody>
<LumexCardFooter Class="gap-2">
<LumexButton FullWidth="@true"
Size="@Size.Small"
Radius="@Radius.Full"
Color="@ThemeColor.Default">
Reject
</LumexButton>
<LumexButton FullWidth="@true"
Size="@Size.Small"
Radius="@Radius.Full"
Color="@ThemeColor.Primary">
Accept
</LumexButton>
</LumexCardFooter>
</LumexCard>
Display an image inside the card body to enhance its visual presentation.
<LumexCard Class="py-1">
<LumexCardHeader Class="pb-0 flex-col items-start">
<p class="text-tiny font-medium uppercase">J.D. Vaughn</p>
<small class="text-foreground-500">Cyberpunk Noir</small>
<h4 class="font-semibold text-large">Neon Shadows</h4>
</LumexCardHeader>
<LumexCardBody>
<img src="assets/images/card-1.jpg"
class="aspect-[4/3] object-cover rounded-medium"
width="270"
alt="Card image" />
</LumexCardBody>
</LumexCard>
You can use an image as the cover of the card by
taking it out of the LumexCardBody component.
<LumexCard Class="max-w-sm">
<LumexCardHeader Class="absolute z-10 top-2 flex-col items-start">
<p class="text-tiny text-zinc-100 uppercase font-medium">
Premium Sound, All-Day Comfort
</p>
<h4 class="text-zinc-50 font-bold text-xl">
SonicWave X1
</h4>
</LumexCardHeader>
<img src="assets/images/card-4.jpg"
class="object-cover brightness-75"
width="300"
alt="Card background" />
<LumexCardFooter Blurred="@true"
Class="absolute z-10 bottom-0 bg-orange-100/30">
<div class="flex flex-col flex-grow gap-1 text-small text-zinc-50">
<p class="font-semibold">SonicWave X1</p>
<p class="font-medium">Discover a world of crystal-clear audio</p>
</div>
<LumexButton Size="@Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Flat"
Class="font-medium text-white bg-rose-950">
Order
</LumexButton>
</LumexCardFooter>
</LumexCard>
Apply the blur effect to the card footer, providing a sleek visual effect at the bottom of the card.
You can achieve this using the Blurred parameter on the LumexCardFooter component.
<LumexCard Class="w-96 h-60">
<img src="assets/images/card-2.jpg"
class="h-full object-cover object-[0_47%]"
alt="Card background" />
<LumexCardFooter Blurred="@true"
Class="absolute z-10 left-2 bottom-2 w-[calc(100%_-_1rem)] py-2 bg-background/10 rounded-large">
<div class="flex flex-col flex-grow text-white/85">
<h4 class="font-bold text-base">Learning with VR</h4>
<p class="text-tiny">Discover how VR enables immersive learning</p>
</div>
<LumexButton Size="@Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Flat"
Class="text-tiny text-white bg-white/15">
Learn
</LumexButton>
</LumexCardFooter>
</LumexCard>
Alternatively, you can apply the blur effect to the entire card for a visually interesting style.
You can achieve this using the Blurred parameter on the LumexCard component.
@using LumexUI.Shared.Icons
<LumexCard Blurred="@true"
Shadow="@Shadow.Large"
Class="bg-background/20">
<LumexCardHeader Class="justify-between">
<LumexButton IconOnly="@true"
Size="@Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Flat"
Class="bg-background/40 dark:bg-background/20">
<TimerIcon Size="20" class="text-foreground" />
</LumexButton>
<LumexButton IconOnly="@true"
Size="@Size.Small"
Radius="@Radius.Full"
Variant="@Variant.Flat"
Class="bg-background/40 dark:bg-background/20">
<ActivityIcon Size="20" class="text-foreground" />
</LumexButton>
</LumexCardHeader>
<LumexCardBody>
<div class="grid grid-cols-4">
<div class="col-span-3">
<div class="relative w-40 h-40">
@_moveRing
@_exerciseRing
@_standRing
<div class="absolute w-16 h-16 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black" />
</div>
</div>
<div class="col-span-1 font-bold text-right text-xl">
<p class="text-foreground text-shadow-lg">7:26</p>
<p class="text-pink-800 text-shadow-lg">427</p>
<p class="text-lime-400 text-shadow-lg">41</p>
<p class="text-cyan-400 text-shadow-lg">9</p>
</div>
</div>
</LumexCardBody>
<LumexCardFooter Class="justify-center">
<HeartIcon Size="14" class="mr-1 text-foreground" />
<p class="font-medium text-sm text-foreground">
82 BPM, 4min ago
</p>
</LumexCardFooter>
</LumexCard>
@code {
private RenderFragment _moveRing =
@<div class="absolute w-40 h-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-pink-950">
<svg class="absolute w-40 h-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<linearGradient id="progress-1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ec4899" />
<stop offset="100%" stop-color="#9d174d" />
</linearGradient>
<circle class="rotate-[270deg] origin-center"
stroke-width="16"
stroke-linecap="round"
stroke="url(#progress-1)"
fill="transparent"
r="72"
cx="80"
cy="80"
style="stroke-dashoffset: 65.942; stroke-dasharray: 451.658, 451.658;">
</circle>
</svg>
</div>;
private RenderFragment _exerciseRing =
@<div class="absolute w-32 h-32 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-lime-950">
<svg class="absolute w-32 h-32 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<linearGradient id="progress-2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#cff542" />
<stop offset="100%" stop-color="#6ad847" />
</linearGradient>
<circle class="rotate-[270deg] origin-center"
stroke-width="16"
stroke-linecap="round"
stroke="url(#progress-2)"
fill="transparent"
r="56"
cx="64"
cy="64"
style="stroke-dashoffset: 31.224; stroke-dasharray: 351.289, 351.289;">
</circle>
</svg>
</div>;
private RenderFragment _standRing =
@<div class="absolute w-24 h-24 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sky-950">
<svg class="absolute w-24 h-24 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<linearGradient id="progress-3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#6ee7b7" />
<stop offset="100%" stop-color="#22d3ee" />
</linearGradient>
<circle class="rotate-[270deg] origin-center"
stroke-width="16"
stroke-linecap="round"
stroke="url(#progress-3)"
fill="transparent"
r="40"
cx="48"
cy="48"
style="stroke-dashoffset: 62.73; stroke-dasharray: 250.921, 250.921;">
</circle>
</svg>
</div>;
}
This component supports named slots, which allow custom
styles to be applied to specific parts of the component:
Base: The overall container of the card.Header: The wrapper of the top section of the card, where you can place titles.Body: The wrapper of the main content of the card.Footer: The wrapper of the bottom section of the card, where you can place actions.
You can customize the component(s) by passing
any Tailwind CSS classes to the following component parameters:
Card
Class: The basic CSS class name styles the wrapper of the card contents.Classes: The CSS class names for the card slots style the entire card at once.
<LumexCard Classes="@_classes">
<LumexCardHeader>
<h4 class="text-large text-foreground-900 font-bold">
The Ultimate Cyberpunk Experience
</h4>
</LumexCardHeader>
<LumexCardBody>
<blockquote class="italic text-foreground-600 text-small md:text-medium">
"Neon Shadows" blends noir and cyberpunk in a gripping tale of intrigue,
set in a decaying futuristic city. A must-read for fans of the genre.
</blockquote>
</LumexCardBody>
<LumexCardFooter>
<p class="text-small text-foreground-500">A. Carter</p>
<p class="text-indigo-300">★★★★★</p>
</LumexCardFooter>
</LumexCard>
@code {
private CardSlots _classes = new()
{
Base = new ElementClass()
.Add( "max-w-md" )
.Add( "py-4" )
.Add( "rounded-3xl" )
.Add( "bg-default-50" )
.Add( "shadow-[2px_2px_4px_var(--lumex-default-200),-2px_-2px_4px_var(--lumex-background)]" )
.Add( "dark:shadow-[2px_2px_4px_var(--lumex-background),-2px_-2px_4px_var(--lumex-default-200)]" ),
Header = "justify-center text-center",
Body = "py-0 justify-center text-center",
Footer = "justify-center gap-2"
};
}
See the API references below for a complete guide to all the
parameters available for the components mentioned here.
© 2025 LumexUI. All rights reserved.
