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 npm, pnpm, yarn, and more so users can choose their preferred tool.

Theme Support

Dark / light mode

Offers full dark mode support with beautiful gradients and glassmorphism effects.

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

Getting Started

Quick installation guide

Learn how to install and configure the Page theme. Follow the step-by-step guide to get started quickly.

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 shadow and glass effect
• Elevated: Stronger shadow and hover effects
• Outlined: Transparent background with border only
• 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.