Basic Usage
Simple card with title and description
<data-card
card-title="Welcome"
description="A simple data card with basic content."
></data-card>
With Icon
Card with an emoji or character as icon
<data-card
card-title="Settings"
description="Configure your preferences."
icon="⚙️"
></data-card>
With Cover Image
Card with a cover image header
<data-card
card-title="Mountain View"
description="Beautiful landscape photography."
img-cover="https://example.com/image.jpg"
></data-card>
With Group Badge
Card categorized with a group label
<data-card
card-title="React Tutorial"
description="Learn React from scratch."
icon="📚"
group="Tutorial"
></data-card>
Clickable Card
Card that links to a URL
<data-card
card-title="Visit GitHub"
description="Check out the source code."
icon="🔗"
url="https://github.com/..."
newtab
></data-card>
With Slotted Content
Card with custom HTML content via slots
<data-card card-title="Custom Content" icon="✨">
<div>
<span class="tag">Tag 1</span>
<span class="tag">Tag 2</span>
</div>
</data-card>
Card Gallery
Multiple cards with different styles
<data-card card-title="Documents" icon="📄" group="Files"></data-card>
<data-card card-title="Analytics" img-cover="..." group="Data"></data-card>
<data-card card-title="Messages" icon="💬"></data-card>
Custom Styling
Customize with CSS variables
<data-card
card-title="Styled Card"
icon="🎨"
style="
--data-card-bg: #1e293b;
--data-card-title-color: #f8fafc;
--data-card-desc-color: #94a3b8;
--data-card-icon-color: #f472b6;
"
></data-card>
Cover Background
Card with colored background in cover area
<data-card
card-title="Gradient Card"
icon="🌈"
cover-bg-color="linear-gradient(135deg, #667eea, #764ba2)"
></data-card>