Tungsten UI 💡

Tungsten UI 💡

Card

A flexible card component based on DaisyUI for grouping and displaying content in an easily readable format. Supports images, titles, content, and actions with various layouts and styles.

Basic Usage

Card Title

This is a basic card with title and content.

<c-card class="w-96 ">
    <c-slot name="title">Card Title</c-slot>
    <c-slot name="content">
        <p>This is a basic card with title and content.</p>
    </c-slot>
    <c-slot name="actions">
        <c-button variant="primary">Action</c-button>
    </c-slot>
</c-card>

Component API

Property Type Default Description
size string md Card size: xs, sm, md, lg, xl
side boolean false Display image on the side (horizontal layout)
image_full boolean false Makes the image as background (full coverage)
compact boolean false Reduces padding for more compact appearance
bg string bg-base-100 Background color class
href string - URL destination (makes the entire card clickable with hover effect)

Available Slots

Slot Name Description Example
figure Image or media content <img src="..." alt="..." />
title Card title/heading Card Title
content Main content area <p>Description</p>
actions Action buttons <c-button>Action</c-button>
default Falls back if no content slot Any content

Card with Image

Demo

Beautiful Landscape

A stunning view of nature captured in perfect lighting.

<c-card class="w-96 ">
    <c-slot name="figure">
        <img src="image.jpg" alt="Demo" />
    </c-slot>
    <c-slot name="title">Beautiful Landscape</c-slot>
    <c-slot name="content">
        <p>A stunning view of nature captured in perfect lighting.</p>
    </c-slot>
    <c-slot name="actions">
        <c-button variant="primary">View More</c-button>
    </c-slot>
</c-card>

Variants

Border

Card with Border

This card has a visible border around it.

<c-card variant="border" class="w-96 ">
    <c-slot name="title">Card with Border</c-slot>
    <c-slot name="content">
        <p>This card has a visible border around it.</p>
    </c-slot>
</c-card>

Side Layout

Demo

Horizontal Card

This card displays content horizontally with image on the side.

<c-card side compact class="w-full max-w-lg ">
    <c-slot name="figure">
        <img src="image.jpg" alt="Demo" class="w-48" />
    </c-slot>
    <c-slot name="title">Horizontal Card</c-slot>
    <c-slot name="content">
        <p>This card displays content horizontally with image on the side.</p>
    </c-slot>
    <c-slot name="actions">
        <c-button variant="primary" size="sm">Action</c-button>
    </c-slot>
</c-card>

Compact

Compact Card

This card has reduced padding for a more compact appearance.

<c-card compact class="w-96 ">
    <c-slot name="title">Compact Card</c-slot>
    <c-slot name="content">
        <p>This card has reduced padding for a more compact appearance.</p>
    </c-slot>
    <c-slot name="actions">
        <c-button size="sm" icon_trailing="arrow-right">Action</c-button>
    </c-slot>
</c-card>

Sizes

XS

Extra small

SM

Small card

MD

Medium (default)

LG

Large card 
<c-card size="xs" class="">...</c-card>
<c-card size="sm" class="">...</c-card>
<c-card size="md" class="">...</c-card>
<c-card size="lg" class="">...</c-card>

Clickable Card

Clickable Card

This entire card is clickable and shows a subtle hover effect. Click anywhere on the card! 
<c-card href="/destination/" class="w-96 ">
    <c-slot name="figure">
        <img src="image.jpg" alt="Demo" />
    </c-slot>
    <c-slot name="title">Clickable Card</c-slot>
    <c-slot name="content">
        <p>This entire card is clickable and shows a subtle hover effect.</p>
    </c-slot>
</c-card>

Pricing Card Example

Most Popular
Premium €29/mo

    Premium feature 1 Premium feature 2 Premium feature 3 
<c-card class="w-80  bg-gradient-to-br from-purple-100 to-blue-100">
    <c-slot name="title">
        <c-badge variant="warning" size="sm">Most Popular</c-badge>
        <div class="flex justify-between items-center mt-2">
            <span class="text-2xl font-bold">Premium</span>
            <span class="text-xl">€29/mo</span>
        </div>
    </c-slot>
    <c-slot name="content">
        <ul class="space-y-2 text-sm">
            <li class="flex items-center">
                <c-icon name="check" class="w-4 h-4 mr-2 text-green-500"></c-icon>
                Premium feature 1
            </li>
            <!-- More features... -->
        </ul>
    </c-slot>
    <c-slot name="actions">
        <c-button variant="primary" class="w-full">Subscribe</c-button>
    </c-slot>
</c-card>

Notes

Usage Tips

  • • All slots are optional - use only what you need
  • • If no content slot is provided, the default slot content will be used
  • • The figure slot is perfect for images, videos, or any media content
  • • Use bg property to customize background colors
  • • Add href to make the entire card clickable with hover effect
  • • Combine with utility classes for custom styling