@litforge/card

A flexible card container component with header, footer, image slots, and customizable styling, built with Lit.

Overview

The Card component provides a reusable card container with slots for header, footer, image, and body content. It supports customizable elevation, padding, and styling through CSS variables.

Installation

npm install @litforge/card
# or
pnpm add @litforge/card
# or
yarn add @litforge/card

Basic Usage

<script type="module">
  import '@litforge/card';
</script>

<lf-card title="Card Title" subtitle="Card subtitle">
  <p>Card body content</p>
</lf-card>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | title | string | '' | Card title | | subtitle | string | '' | Card subtitle | | imageUrl | string | '' | URL for card image | | elevation | number | 1 | Shadow elevation (0-4) | | padding | string | '' | Custom padding for card body |

Slots

• default: Card body content
• header: Custom header content (overrides title/subtitle)
• footer: Footer content
• image: Custom image content (overrides imageUrl)

Examples

Basic Card

<lf-card title="Application" subtitle="SSO Application">
  <p>Application details here</p>
</lf-card>

Card with Image

<lf-card
  title="Application"
  image-url="https://example.com/icon.png"
  elevation="2"
>
  <p>Content with image</p>
</lf-card>

Card with Custom Slots

<lf-card>
  <div slot="header">
    <h3>Custom Header</h3>
  </div>
  <p>Body content</p>
  <div slot="footer">
    <button>Action</button>
  </div>
</lf-card>

Card with Different Elevations

<lf-card elevation="0">No shadow</lf-card>
<lf-card elevation="1">Small shadow</lf-card>
<lf-card elevation="3">Large shadow</lf-card>

Styling

The component uses CSS variables for theming:

lf-card {
  --lf-card-background: #ffffff;
  --lf-card-radius: 12px;
  --lf-card-border-color: rgba(15, 23, 42, 0.08);
  --lf-card-padding: 20px;
  --lf-card-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --lf-card-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --lf-card-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  /* ... more variables */
}

TypeScript

import { Card } from '@litforge/card';

License

Part of the LitForge component library.