Card

A versatile container component with glassmorphism support, perfect for grouping related content.

Import

import { ZCard } from "@zurto/ui";

Basic Usage

ZCard

Card Title

Card content goes here.

1234

<ZCard>
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</ZCard>

Variants

Default

ZCard

Default card with solid background

123

<ZCard variant='default'>
  Default card with solid background
</ZCard>

Glass

ZCard

Glassmorphism effect with blur backdrop

123

<ZCard variant='glass'>
  Glassmorphism effect with blur backdrop
</ZCard>

Elevated

ZCard

Elevated card with shadow

123

<ZCard elevated>
  Elevated card with shadow
</ZCard>

Interactive Cards

ZCard

Clickable Card

Hover and click me

1234

<ZCard interactive onClick={() => alert('Clicked!')}>
  <h4>Clickable Card</h4>
  <p>Hover and click me</p>
</ZCard>

With Header and Footer

ZCardZCardHeaderZCardTitleZCardSubtitleZCardBodyZCardFooterZButton

Settings

Manage your preferences

Configure your account settings here.

12345678910111213

<ZCard>
  <ZCardHeader>
    <ZCardTitle>Settings</ZCardTitle>
    <ZCardSubtitle>Manage your preferences</ZCardSubtitle>
  </ZCardHeader>
  <ZCardBody>
    <p>Configure your account settings here.</p>
  </ZCardBody>
  <ZCardFooter>
    <ZButton variant='ghost'>Cancel</ZButton>
    <ZButton>Save Changes</ZButton>
  </ZCardFooter>
</ZCard>

Card Grid

ZCard

Card 1

Card 2

Card 3

12345

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
<ZCard><p>Card 1</p></ZCard>
<ZCard><p>Card 2</p></ZCard>
<ZCard><p>Card 3</p></ZCard>
</div>

Card with Image

ZCardZCardBodyZCardTitle

Featured Article

Brief description of the article.

1234567

<ZCard padding='none'>
  <img src='/hero.jpg' alt='Hero' />
  <ZCardBody>
    <ZCardTitle>Featured Article</ZCardTitle>
    <p>Brief description of the article.</p>
  </ZCardBody>
</ZCard>

Props

Prop	Type	Default	Description
variant	'default' | 'glass' | 'bordered' | 'elevated'	'default'	Visual style of the card
padding	'none' | 'sm' | 'md' | 'lg'	'md'	Internal padding size
interactive	boolean	false	Enable hover and click effects
onClick	() => void	–	Click handler (makes card interactive)
as	ElementType	'div'	Render as different element
childrenRequired	ReactNode	–	Card content

Compound Components

Component	Description
ZCard	Main container
ZCardHeader	Header section with title and subtitle
ZCardTitle	Title element
ZCardSubtitle	Subtitle/description element
ZCardBody	Main content area
ZCardFooter	Footer with actions

Accessibility

• Uses semantic HTML structure
• Interactive cards are keyboard focusable
• role="button" applied when clickable
• Supports aria-label for screen readers

Keyboard Support

Key	Action
Tab	Move focus to interactive card
Enter / Space	Activate interactive card