Card — lunaDOM Docs

The <luna-card> component provides flexible containers with optional hero images, headers, and footers.

Paths

/lunadom/components/card/card.js

REQUIRED

Basic Card

Simple Card This is a minimal card with just header and content. The image and footer slots are omitted.

Full Card with Image

Premium Workspace Setup Build your dream workstation with carefully selected components designed for productivity and aesthetics.

View Details

Add to Cart

Glassmorphism Style

Edge Computing Next-generation distributed architecture with real-time processing capabilities.

New

Learn More

No Image, With Footer

Quick Actions Select an action below to get started with your project configuration.

Deploy

Configure

Cancel

Customization

Slots
image - Card hero image (auto-hidden if empty)
header - Card title/heading content
default - Main body content
footer - Footer actions/meta (auto-hidden if empty)

Attributes
size="350px" - Max-width (default: 350px)
glass - Enables glassmorphism variant

CSS Variables
--luna-card-bg - Background color
--luna-card-color - Body text color
--luna-card-border - Border color
--luna-card-radius - Border radius
--luna-card-padding - Inner padding
--luna-footer-justify - Footer justify-content
--luna-footer-align - Footer align-items
--luna-accent - Accent color on hover

Example Code

<luna-card> <span slot="header">Card Title</span> Card body content. </luna-card>  <luna-card> <img slot="image" src="image.jpg" alt="Hero" /> <span slot="header">Product Name</span> Product description goes here. <div slot="footer"> <luna-button variant="primary" size="sm">Buy Now</luna-button> <luna-button variant="neutral" size="sm">Details</luna-button> </div> </luna-card>  <luna-card glass> <span slot="header">Glass Effect</span> Beautiful frosted glass appearance. </luna-card>  <luna-card size="500px"> <span slot="header">Wide Card</span> This card has a custom max-width. </luna-card>