Card

A flexible card container with header, content, and footer slots.

uilayout

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Card.svelte

Usage

<script>
  import Card from '$lib/components/Card.svelte';
</script>

<Card>
  <svelte:fragment slot="header">
    <h3>Card Title</h3>
  </svelte:fragment>

  <p>Card content goes here.</p>

  <svelte:fragment slot="footer">
    <button>Action</button>
  </svelte:fragment>
</Card>

Props

Prop	Type	Default	Description
class	string	''	Additional CSS classes

Slots

Slot	Description
default	Main card content
header	Optional header section
footer	Optional footer section

Files

Card.svelte