@duskmoon-dev/el-card
A container component with header, body, and footer sections.
Installation
bun add @duskmoon-dev/el-card
Usage
Auto-Register (Recommended)
The simplest way to use the component - just import and it's ready:
<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-card/register"></script>
<!-- Now use the element -->
<el-dm-card>
<h3 slot="header">Card Title</h3>
<p>Card body content goes here.</p>
<div slot="footer">
<button>Action</button>
</div>
</el-dm-card>
Or with a bundler:
import '@duskmoon-dev/el-card/register';
Manual Registration
<script type="module">
import { register } from '@duskmoon-dev/el-card';
register();
</script>
<el-dm-card>
<h3 slot="header">Card Title</h3>
<p>Card body content goes here.</p>
</el-dm-card>
Variants
| Variant | Description |
|---|
elevated | Raised card with shadow (default) |
outlined | Card with border |
filled | Card with subtle background |
Padding
| Size | Description |
|---|
none | No padding |
sm | Small padding |
md | Medium padding (default) |
lg | Large padding |
Attributes
| Attribute | Type | Default | Description |
|---|
variant | string | elevated | Card variant |
interactive | boolean | false | Make card clickable |
padding | string | md | Padding size |
Slots
| Slot | Description |
|---|
| (default) | Card body content |
header | Header section |
footer | Footer section |
media | Media content (image/video) at top |
CSS Parts
| Part | Description |
|---|
card | Main card container |
header | Header section |
body | Body section |
footer | Footer section |
media | Media section |
CSS Custom Properties
| Property | Description |
|---|
--dm-card-padding | Card padding |
--dm-card-border-radius | Border radius |
--dm-card-background | Background color |
--dm-card-border-color | Border color |
--dm-card-shadow | Box shadow |
Examples
<el-dm-card>
<img slot="media" src="image.jpg" alt="Card image" />
<h3 slot="header">Image Card</h3>
<p>Description of the image.</p>
</el-dm-card>
Interactive Card
<el-dm-card interactive onclick="handleClick()">
<h3 slot="header">Clickable Card</h3>
<p>Click me!</p>
</el-dm-card>
Outlined Variant
<el-dm-card variant="outlined">
<p>Outlined card content.</p>
</el-dm-card>
License
MIT