Cards cardglass

Glass Card

A versatile glassmorphism card with hover lift effect.

Analytics

Last 30 days

Hover over this card to see the lift effect.

24,891

Status

✓ All systems operational

Non-hoverable card with small padding.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GlassCard } from 'astro-component-kit';
---

<GlassCard 
  title="Analytics Dashboard" 
  subtitle="Last 30 days performance" 
  padding="lg"
>
  <div class="stat-group">
    <span class="stat-label">Active Users</span>
    <span class="stat-value">2,841</span>
  </div>
  <p>Your workspace is performing 15% better than last month.</p>
</GlassCard>
--- import { GlassCard } from 'astro-component-kit'; --- <GlassCard title="Analytics Dashboard" subtitle="Last 30 days performance" padding="lg" > <div class="stat-group"> <span class="stat-label">Active Users</span> <span class="stat-value">2,841</span> </div> <p>Your workspace is performing 15% better than last month.</p> </GlassCard>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassCard.astro and paste the following code:

astro 
---
/**
 * GlassCard — A versatile glassmorphism card with hover lift effect and gradient border.
 * 
 * @param {string} title - Optional title for the glass card header.
 * @param {string} subtitle - Optional description below the title.
 * @param {boolean} hoverable - Whether the card lifts on hover. Default is true.
 * @param {'sm'|'md'|'lg'} padding - Internal padding control. Default is 'md'.
 */
interface Props { title?: string; subtitle?: string; hoverable?: boolean; padding?: 'sm' | 'md' | 'lg'; }
const { title, subtitle, hoverable = true, padding = 'md' } = Astro.props;
---
<div class:list={['glass-card', `glass-card--p${padding}`, { 'glass-card--hoverable': hoverable }]}>
  {title && (<div class="glass-card__header"><h3 class="glass-card__title">{title}</h3>{subtitle && <p class="glass-card__subtitle">{subtitle}</p>}</div>)}
  <div class="glass-card__body"><slot /></div>
</div>
<style>
  .glass-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; position: relative; overflow: hidden; transition: 0.3s; }
  .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); }
  .glass-card--hoverable:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border-color: rgba(99, 102, 241, 0.25); }
  .glass-card__header { border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 1rem; padding-bottom: 0.75rem; }
  .glass-card__title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; color: #f1f5f9; }
  .glass-card__subtitle { margin: 0; font-size: 0.82rem; color: #64748b; }
  .glass-card--psm { padding: 1rem; } .glass-card--pmd { padding: 1.5rem; } .glass-card--plg { padding: 2rem; }
</style>
--- /** * GlassCard — A versatile glassmorphism card with hover lift effect and gradient border. * * @param {string} title - Optional title for the glass card header. * @param {string} subtitle - Optional description below the title. * @param {boolean} hoverable - Whether the card lifts on hover. Default is true. * @param {'sm'|'md'|'lg'} padding - Internal padding control. Default is 'md'. */ interface Props { title?: string; subtitle?: string; hoverable?: boolean; padding?: 'sm' | 'md' | 'lg'; } const { title, subtitle, hoverable = true, padding = 'md' } = Astro.props; --- <div class:list={['glass-card', `glass-card--p${padding}`, { 'glass-card--hoverable': hoverable }]}> {title && (<div class="glass-card__header"><h3 class="glass-card__title">{title}</h3>{subtitle && <p class="glass-card__subtitle">{subtitle}</p>}</div>)} <div class="glass-card__body"><slot /></div> </div> <style> .glass-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; position: relative; overflow: hidden; transition: 0.3s; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); } .glass-card--hoverable:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border-color: rgba(99, 102, 241, 0.25); } .glass-card__header { border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 1rem; padding-bottom: 0.75rem; } .glass-card__title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; color: #f1f5f9; } .glass-card__subtitle { margin: 0; font-size: 0.82rem; color: #64748b; } .glass-card--psm { padding: 1rem; } .glass-card--pmd { padding: 1.5rem; } .glass-card--plg { padding: 2rem; } </style>

Quick Info

Category
Cards
Filename
GlassCard.astro
Dependencies
None — pure Astro + CSS
Tags
cardglass