Card

Container component with standard and glass-morphism styling. Migrated to @opencosmos/ui.

Installation
# Install @opencosmos/ui to use Card
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Visual style variant
— Enable hover lift and shadow effect for interactive cards
Usage
Import
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@opencosmos/ui';
Example
<Card>
  Content
</Card>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
variantdefault | glass | outline"default"Visual style variant
hoverEffectbooleanfalseEnable hover lift and shadow effect for interactive cards

Examples

Default
Standard Card
Glass
Glass Effect Card
Outline
Outline Card
With Content

Card Title

Card description goes here.

Code Examples

Basic Usage

Simple card container

import { Card } from '@opencosmos/ui';

<Card>
  <p>Your content goes here</p>
</Card>

Glass Variant

Using the glass variant for premium visuals

<Card variant="glass" className="p-6">
  <h3 className="text-lg font-semibold mb-2">Glass Card</h3>
  <p className="text-muted-foreground">
    This card uses backdrop-blur and semi-transparent background.
  </p>
</Card>

Interactive Card Grid

Grid of interactive cards with click handlers

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  {features.map((feature) => (
    <Card
      key={feature.id}
      hoverEffect={true}
      className="p-6 cursor-pointer"
      onClick={() => handleFeatureClick(feature.id)}
    >
      <h3 className="font-semibold mb-2">{feature.title}</h3>
      <p className="text-sm text-muted-foreground">
        {feature.description}
      </p>
    </Card>
  ))}
</div>

Structured Content

Using subcomponents for structured layout

import { Card, CardHeader, CardTitle, CardContent } from '@opencosmos/ui';

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
  </CardHeader>
  <CardContent>
    You have 3 unread messages.
  </CardContent>
</Card>