Simply Card Component

A flexible and modern card component built with Lit, featuring support for both vertical and horizontal layouts, images, tags, and recommended badges.

Features

• 🎨 Modern, clean design with smooth hover animations
• 📱 Responsive layout that adapts to different screen sizes
• 🔄 Supports both vertical and horizontal layouts
• 🏷️ Optional tag display
• ⭐ Optional recommended badge
• 🌐 Built-in internationalization support
• 🖼️ Fallback image for missing images
• 🎯 Accessible and semantic HTML structure

Installation

npm install @simply/card

Usage

<!-- Basic usage -->
<simply-card
  heading="Card Title"
  description="This is a sample card description."
  image-url="https://example.com/image.jpg"
></simply-card>

<!-- With tag -->
<simply-card
  heading="Featured Item"
  description="A special featured card with a tag."
  image-url="https://example.com/image.jpg"
  tag="New"
></simply-card>

<!-- Recommended card -->
<simply-card
  heading="Best Choice"
  description="This is our recommended option."
  image-url="https://example.com/image.jpg"
  recommended
></simply-card>

<!-- Horizontal layout -->
<simply-card
  heading="Horizontal Card"
  description="This card uses a horizontal layout."
  image-url="https://example.com/image.jpg"
  layout="horizontal"
></simply-card>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | heading | String | "" | The title of the card | | description | String | "" | The description text of the card | | imageUrl | String | "" | URL of the card's image. Falls back to a placeholder if not provided | | recommended | Boolean | false | Whether to show the recommended badge | | tag | String | "" | Optional tag text to display on the card | | layout | 'vertical' | 'horizontal' | 'vertical' | The layout direction of the card |

Styling

The component uses CSS custom properties and can be styled using standard CSS. The card features:

• Smooth hover animations
• Responsive design
• Mobile-first approach
• Modern shadow effects
• Proper spacing and typography

Browser Support

The component is built using modern web standards and works in all modern browsers that support:

• Custom Elements
• Shadow DOM
• CSS Grid
• CSS Flexbox

Dependencies

• @simply/language - For internationalization support
• Lit - For web component functionality

License

MIT