Card

A versatile container component with solid and glass variants. The flagship component for Liquid Glass aesthetics.

Demo

Glass on Gradient (Light)

Glass Card

Glass morphism via backdrop-filter: blur() and layered pseudo-elements. No runtime dependency.

Glass on Dark Background

Glass Card (Dark)

The same component adapts beautifully to dark backgrounds. Used in the Admin demo.

Glass Highlight Layered

Glass Highlight

Enhanced glass with a top highlight layer for extra depth and realism.

Padding Variants

padding="sm"

padding="md"

padding="lg"

Usage

<script setup lang="ts">
import { LiquidCard } from '@liquid/ui'
</script>

<template>
  <!-- Standard card -->
  <LiquidCard variant="default" padding="lg">
    <h2>Card Title</h2>
    <p>Card content goes here.</p>
  </LiquidCard>

  <!-- Glass card (needs a visible background behind it) -->
  <LiquidCard variant="glass-css-only" padding="lg">
    <h2>Glass Card</h2>
    <p>Blurs whatever is behind it.</p>
  </LiquidCard>
</template>

CSS Variable Customization

The glass variant exposes CSS variables for theme adaptation:

/* Dark theme example (from Admin demo) */
:root {
  --liquid-card-glass-bg: rgba(255, 255, 255, 0.05);
  --liquid-card-glass-border-color: rgba(255, 255, 255, 0.08);
  --liquid-card-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --liquid-card-glass-highlight-opacity: 0.06;
}

/* Light theme example (default) */
:root {
  --liquid-card-glass-bg: rgba(255, 255, 255, 0.5);
  --liquid-card-glass-border-color: rgba(255, 255, 255, 0.65);
}

Props

Prop	Type	Default	Description
variant	'default' | 'glass-css-only' | 'glass-highlight-layered'	'default'	Visual style variant
padding	'none' | 'sm' | 'md' | 'lg'	'md'	Internal padding
overflow	'hidden' | 'visible' | 'auto'	'hidden'	CSS overflow behavior

Slots

Slot	Description
default	Card content