Skip to main content

​
Overview

The lum-card utility creates a consistent card component with automatic spacing, background styling, and smooth rounded corners.

​
CSS Implementation

@utility lum-card {
  @apply flex flex-col gap-3 whitespace-pre-wrap lum-bg-lum-card-bg p-7;
  border-radius: var(--lum-border-radius);
  corner-shape: superellipse(var(--lum-border-superellipse));
}

​
Usage

<div class="lum-card">
  <h3 class="text-xl font-bold">Card Title</h3>
  <p>Card content goes here.</p>
</div>

​
Applied Classes

The lum-card utility applies the following Tailwind classes:

​
Layout

  • flex flex-col - Vertical flexbox layout
  • gap-3 - 0.75rem (12px) spacing between child elements

​
Typography

  • whitespace-pre-wrap - Preserves whitespace and line breaks while allowing wrapping

​
Styling

  • lum-bg-lum-card-bg - Background color using Luminescent theme
  • p-7 - 1.75rem (28px) padding on all sides
  • border-radius: var(--lum-border-radius) - Rounded corners
  • corner-shape: superellipse - Smooth superellipse corners

​
CSS Variables

​
--color-lum-card-bg
color
default:"var(--color-gray-900)"
Default card background color
​
--lum-border-radius
length
default:"var(--radius-lg)"
Border radius for card corners
​
--lum-border-superellipse
number
default:"1"
Superellipse corner smoothing (0 = circle, 1 = squircle, 2+ = rounded square)
​
--lum-depth
number
default:"0"
Depth effect intensity (inherited from lum-bg utility)

​
Customization

​
Padding

Override the default padding with Tailwind utilities: 
<div class="lum-card p-4">Smaller padding</div>
<div class="lum-card p-10">Larger padding</div>
<div class="lum-card px-8 py-4">Asymmetric padding</div>

​
Gap

Adjust spacing between child elements: 
<div class="lum-card gap-6">Larger gaps</div>
<div class="lum-card gap-2">Smaller gaps</div>
<div class="lum-card gap-0">No gaps</div>

​
Background

Change the background color: 
<div class="lum-card lum-bg-slate-800">
  Custom solid background
</div>

​
Depth Effect

Add depth shadows to the card: 
<div class="lum-card [--lum-depth:1]">
  Card with depth effect
</div>

​
Examples

<div class="lum-card max-w-sm">
  <div class="flex items-center gap-4">
    <img src="avatar.jpg" class="w-16 h-16 rounded-full" />
    <div>
      <h3 class="text-lg font-bold">John Doe</h3>
      <p class="text-gray-400">@johndoe</p>
    </div>
  </div>
  <p>Software engineer passionate about building beautiful UIs.</p>
  <button class="lum-btn lum-bg-blue-600">Follow</button>
</div>

​
Responsive Design

<div class="lum-card p-4 md:p-7 lg:p-10">
  Adaptive padding based on screen size
</div>

​
Interactions

​
Hoverable Card

<div class="lum-card lum-hoverable cursor-pointer">
  <h3 class="text-xl font-bold">Interactive Card</h3>
  <p>Hover to see scale and shadow effect</p>
</div>

​
Clickable Card

<a href="#" class="lum-card hover:scale-102 transition-transform">
  <h3 class="text-xl font-bold">Clickable Card</h3>
  <p>Entire card is clickable</p>
</a>

​
Card with Depth on Hover

<div class="lum-card hover:[--lum-depth:0.5] transition-all duration-300">
  <h3 class="text-xl font-bold">Depth Effect</h3>
  <p>Hover to see depth shadow appear</p>
</div>
The gap-3 spacing automatically creates consistent vertical rhythm between all child elements. This works well for headings, paragraphs, buttons, and other content.

​
Best Practices

  1. Use lum-card for grouping related content
  2. Keep card content focused on a single topic or action
  3. Use consistent padding across cards in the same context
  4. Consider max-width to prevent cards from becoming too wide
  5. Use gap-* utilities to adjust spacing for different content densities
  6. Combine with lum-hoverable for interactive cards
  7. Use semantic HTML inside cards (headings, lists, etc.)

Build docs developers (and LLMs) love

Get started for freeTalk to us