Composition
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.
Usage
The basic card component provides a simple container for organizing content. You can combine the header, body, and footer as needed.
Make beautiful websites regardless of your design experience.
<LumexCard>
<LumexCardBody>
<p>Make beautiful websites regardless of your design experience.</p>
</LumexCardBody>
</LumexCard>
Dividers
You can add LumexDivider component between different
sections of the card for a clearer separation of content.
LumexUI
lumexui.com
Make beautiful websites regardless of your design experience.
<LumexCard Class="max-w-sm">
<LumexCardHeader Class="gap-3">
<span class="h-8 w-8 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-sm text-default-500">lumexui.com</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">
Visit source code on GitHub
<LumexIcon Icon="@Icons.Rounded.OpenInNew"
Size="@new("16")"
Class="ml-1" />
</LumexLink>
</LumexCardFooter>
</LumexCard>
Complex
Create a more complex card layout by combining other LumexUI components.
16:15, 3 Dec
User Clark Kent invites you to join the route.
London, England
06.09.2024 - 13.09.2024
AS
DN
+4
<LumexCard Class="max-w-sm">
<LumexCardHeader Class="justify-between">
<div class="flex items-center">
<LumexIcon Icon="@Icons.Rounded.Event"
Size="@new("16")"
Class="text-primary" />
<p class="ml-1 text-sm text-foreground-500">
16:15, 3 Dec
</p>
</div>
<LumexButton Size="@Size.Small"
Variant="@Variant.Light"
Class="h-6 w-6 min-w-6 px-0">
<LumexIcon Icon="@Icons.Rounded.MoreVert"
Size="@new("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-sm">06.09.2024 - 13.09.2024</p>
</div>
<div class="col-span-2 flex justify-end font-bold">
<div class="w-10 h-10 flex items-center justify-center rounded-full border border-danger bg-danger-200 text-danger-foreground">
<span>AS</span>
</div>
<div class="w-10 h-10 -ml-2 flex items-center justify-center rounded-full border border-secondary bg-secondary-200 text-secondary-foreground">
<span>DN</span>
</div>
<div class="w-10 h-10 -ml-2 flex items-center justify-center rounded-full border border-primary bg-primary text-primary-foreground">
<span>+4</span>
</div>
</div>
</div>
</LumexCardBody>
<LumexCardFooter Class="gap-2">
<LumexButton Color="@ThemeColor.Default"
Radius="@Radius.Large"
Size="@Size.Small"
FullWidth="@true">
Reject
</LumexButton>
<LumexButton Color="@ThemeColor.Primary"
Radius="@Radius.Large"
Size="@Size.Small"
FullWidth="@true">
Accept
</LumexButton>
</LumexCardFooter>
</LumexCard>
Image
Display an image inside the card body to enhance its visual presentation.
J.D. Vaughn
Cyberpunk NoirNeon Shadows
<LumexCard Class="py-1">
<LumexCardHeader Class="pb-0 flex-col items-start">
<p class="text-xs font-medium uppercase">
J.D. Vaughn
</p>
<small class="text-default-400">
Cyberpunk Noir
</small>
<h4 class="font-extrabold text-lg">
Neon Shadows
</h4>
</LumexCardHeader>
<LumexCardBody>
<img src="assets/images/card-1.jpg"
class="aspect-[4/3] object-cover rounded-xl"
width="270"
alt="Card image" />
</LumexCardBody>
</LumexCard>
Cover Image
You can use an image as the cover of the card by
taking it out of the LumexCardBody component.
Premium Sound, All-Day Comfort
SonicWave X1
SonicWave X1
Discover a world of crystal-clear audio
<LumexCard Class="max-w-sm">
<LumexCardHeader Class="absolute z-10 top-2 flex-col items-start">
<p class="text-tiny text-sky-100 uppercase font-medium">
Premium Sound, All-Day Comfort
</p>
<h4 class="text-sky-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-white/40 border-t border-orange-100">
<div class="flex flex-col flex-grow gap-1 text-small text-slate-900">
<p class="font-bold">SonicWave X1</p>
<p class="font-medium">Discover a world of crystal-clear audio</p>
</div>
<LumexButton Variant="@Variant.Flat"
Radius="@Radius.Large"
Size="@Size.Small"
Class="text-tiny text-white font-semibold bg-fuchsia-950 rounded-full">
Order
</LumexButton>
</LumexCardFooter>
</LumexCard>
Blurred Footer
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.
How VR Enhances Learning
Discover how VR enables immersive learning
<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">
How VR Enhances Learning
</h4>
<p class="text-xs">
Discover how VR enables immersive learning
</p>
</div>
<LumexButton Variant="@Variant.Flat"
Radius="@Radius.Large"
Size="@Size.Small"
Class="text-xs text-white bg-white/15">
Learn
</LumexButton>
</LumexCardFooter>
</LumexCard>
Blurred Card
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.
7:26
427
41
9
82 BPM, 4min ago
<LumexCard Blurred="@true"
Shadow="@Shadow.Large"
Class="bg-background/20 rounded-2xl">
<LumexCardHeader Class="justify-between">
<LumexButton Size="@Size.Small"
Variant="@Variant.Flat"
Class="h-8 w-8 min-w-8 px-0 bg-background/40 rounded-full">
<LumexIcon Icon="@Icons.Rounded.Timer"
Class="text-foreground" />
</LumexButton>
<LumexButton Size="@Size.Small"
Variant="@Variant.Flat"
Class="h-8 w-8 min-w-8 px-0 bg-background/40 rounded-full">
<LumexIcon Icon="@Icons.Rounded.DirectionsRun"
Class="text-foreground" />
</LumexButton>
</LumexCardHeader>
<LumexCardBody>
<div class="grid grid-cols-4">
<div class="col-span-3">
<div class="relative w-40 h-40">
<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>
<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>
<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>
<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>
<div class="col-span-1 font-bold text-right text-xl drop-shadow-lg">
<p class="text-foreground">7:26</p>
<p class="text-pink-800">427</p>
<p class="text-lime-400">41</p>
<p class="text-cyan-400">9</p>
</div>
</div>
</LumexCardBody>
<LumexCardFooter Class="justify-center">
<LumexIcon Icon="@Icons.Rounded.Favorite"
Size="@new("16")"
Class="text-foreground" />
<p class="font-medium text-sm text-foreground">
82 BPM, 4min ago
</p>
</LumexCardFooter>
</LumexCard>
Custom Styles
This component suppots named slots (represented as data-* attributes) that
allow you to apply custom CSS 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.
The Ultimate Cyberpunk Experience
"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.
A. Carter
★★★★★
<LumexCard Classes="@_classes">
<LumexCardHeader>
<h4 class="text-large font-extrabold">
The Ultimate Cyberpunk Experience
</h4>
</LumexCardHeader>
<LumexCardBody>
<blockquote class="italic text-foreground-500">
"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-600">A. Carter</p>
<p class="text-indigo-400">★★★★★</p>
</LumexCardFooter>
</LumexCard>
@code {
private CardSlots _classes = new()
{
Root = "max-w-md py-4 rounded-3xl bg-zinc-100 shadow-[5px_5px_10px_theme(colors.zinc.200),-5px_-5px_10px_theme(colors.zinc.50)]",
Header = "justify-center text-center",
Body = "py-0 justify-center text-center",
Footer = "justify-center gap-2"
};
}
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.