Card

The Card component displays information in card format and can also be used as links. It provides modern glass effects and gradients.

Basic Usage

📦

Package Manager

Support for various package managers

Supports various package managers like npm, pnpm, yarn, allowing users to choose their preferred tools.

🎨

Theme Support

Dark/Light Mode

Provides beautiful gradients and glassmorphism effects with perfect dark mode support.

Size Examples

Small Padding

A card with small padding. Suitable for displaying simple information.

Medium Padding

A card with default padding. Used in most cases.

Large Padding

A card with large padding. Used for important information or detailed content.

Link Cards

🚀

Get Started

Quick Installation Guide

Learn how to install and configure the Page theme. You can easily get started with step-by-step guides.

Props

Prop	Type	Default	Description
variant	'default' | 'elevated' | 'outlined' | 'gradient'	'default'	Card style
padding	'sm' | 'md' | 'lg'	'md'	Card padding
icon	string	-	Icon (optional)
title	string	-	Title (optional)
subtitle	string	-	Subtitle (optional)
href	string	-	Link URL (optional)
target	string	-	Link target (optional)

Usage Examples

Basic Card

<Card>This is a basic card. Used for displaying simple information.</Card>

Card with Title and Icon

<Card icon="🎨" title="Design" subtitle="Beautiful UI">
  Explains the design features of the Page theme. Provides a modern and
  intuitive interface.
</Card>

Various Styles

<Card variant="default" title="Default">
  A card with default style.
</Card>

<Card variant="elevated" title="Elevated">
  A card with strong shadow effects.
</Card>

<Card variant="outlined" title="Outlined">
  A transparent card with only borders.
</Card>

<Card variant="gradient" title="Gradient">
  A special card with gradient background.
</Card>

Link Card

<Card variant="elevated" icon="📚" title="Documentation" href="/docs">
  Navigate to documentation.
</Card>

External Link

<Card
  variant="outlined"
  icon="🔗"
  title="GitHub"
  href="https://github.com"
  target="_blank"
>
  Visit the GitHub repository.
</Card>

Features

✨ Modern Design

• Glass Effect: Applied backdrop-filter: blur(20px)
• Gradient Background: Beautiful gradient effects
• Soft Shadows: Multi-layered shadows for depth
• Hover Animation: translateY(-4px) scale(1.02) transform

🎨 Variant-specific Features

• Default: Default style with moderate shadows and glass effects
• Elevated: Stronger shadows and hover effects
• Outlined: Transparent background with only borders
• Gradient: Beautiful gradient background (new feature)

🌙 Dark Mode Support

• Automatic color adjustment
• Consistent user experience
• Perfect theme compatibility

📱 Responsive Design

• Optimized size on mobile
• Flexible grid layout
• Touch-friendly interface

💫 Animation Effects

• Card Fade-in: Smooth appearance on page load
• Hover Effects: Natural transformation on mouse over
• Icon Animation: Icon scale effect on hover

Styling

The Card component can be customized through CSS variables:

:root {
  --page-card-border-radius: 16px;
  --page-card-padding: 24px;
  --page-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Provides optimal performance on modern browsers.