Card

The Card component is a container for grouping and displaying related content in a visually distinct manner.

Installation

npm install @duskmoon-dev/el-card

Usage

import '@duskmoon-dev/el-card/register';

<el-dm-card>
  <h2>Card Title</h2>
  <p>Card content goes here.</p>
</el-dm-card>

Live Demo

Card Variants

Elevated

With shadow

Outlined

With border

Filled

Solid background

Properties

Property	Type	Default	Description
`variant`	`'elevated' \| 'outlined' \| 'filled'`	`'elevated'`	Visual style of the card
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal padding
`interactive`	`boolean`	`false`	Enables hover effects for clickable cards

Variants

Elevated

The elevated variant has a shadow for depth.

<el-dm-card variant="elevated">
  <h3>Elevated Card</h3>
  <p>This card has a subtle shadow.</p>
</el-dm-card>

Outlined

The outlined variant has a border instead of shadow.

<el-dm-card variant="outlined">
  <h3>Outlined Card</h3>
  <p>This card has a border.</p>
</el-dm-card>

Filled

The filled variant has a solid background color.

<el-dm-card variant="filled">
  <h3>Filled Card</h3>
  <p>This card has a filled background.</p>
</el-dm-card>

Padding

Card Padding Options

Small

Medium

Large

<el-dm-card padding="none">No padding</el-dm-card>
<el-dm-card padding="sm">Small padding</el-dm-card>
<el-dm-card padding="md">Medium padding</el-dm-card>
<el-dm-card padding="lg">Large padding</el-dm-card>

Interactive Cards

For clickable cards, add the interactive attribute:

Interactive Card

Clickable Card

Hover to see the effect.

<el-dm-card interactive>
  <h3>Clickable Card</h3>
  <p>Hover to see the effect.</p>
</el-dm-card>

Slots

The card component uses the default slot for content:

<el-dm-card>
  <!-- Header -->
  <header>
    <h3>Card Header</h3>
  </header>

  <!-- Body -->
  <div class="card-body">
    <p>Main content area</p>
  </div>

  <!-- Footer -->
  <footer>
    <el-dm-button>Action</el-dm-button>
  </footer>
</el-dm-card>

CSS Custom Properties

Property	Default	Description
`--card-padding`	`1rem`	Internal padding
`--card-border-radius`	`0.5rem`	Border radius
`--card-shadow`	`0 1px 3px rgba(0,0,0,0.12)`	Box shadow for elevated variant
`--card-border-color`	`var(--color-outline)`	Border color for outlined variant
`--card-background`	`var(--color-surface)`	Background color

Accessibility

Use semantic HTML elements inside the card
Provide meaningful headings for screen readers
If interactive, ensure keyboard navigation works properly