Card

The Card component is a flexible container for displaying content in a contained format. It provides a structured layout with header, content, and footer sections.

Installation

npm install @nqlib/nqui

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@nqlib/nqui';

Basic Usage

Copy this into your app — same pattern as the first example below.

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from '@nqlib/nqui';

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This is a simple card with minimal content.</p>
      </CardContent>
    </Card>
  );
}

Structure

The Card component consists of several sub-components:

Card - The main container
CardHeader - Header section with padding
CardTitle - Title text (large, semibold)
CardDescription - Optional description text (small, muted)
CardContent - Main content area
CardFooter - Footer section for actions

Examples

Each example has a Preview and Code tab. The code is copy-paste ready for your app (import from '@nqlib/nqui', same usage as above).

Simple Card

A minimal card with title and content

Card Title

This is a simple card with minimal content.

example.tsx

'use client';import {  Card,  CardHeader,  CardTitle,  CardContent,} from '@nqlib/nqui';export default function Example() {  return (    <Card className="max-w-md">      <CardHeader>        <CardTitle>Card Title</CardTitle>      </CardHeader>      <CardContent>        <p>This is a simple card with minimal content.</p>      </CardContent>    </Card>  );}

Card with Description

Add a description below the title

Card with Description

This is a description that provides additional context.

Card content goes here.

example.tsx

'use client';import {  Card,  CardHeader,  CardTitle,  CardDescription,  CardContent,} from '@nqlib/nqui';export default function Example() {  return (    <Card className="max-w-md">      <CardHeader>        <CardTitle>Card with Description</CardTitle>        <CardDescription>          This is a description that provides additional context.        </CardDescription>      </CardHeader>      <CardContent>        <p>Card content goes here.</p>      </CardContent>    </Card>  );}

Card with Footer

Include a footer section for actions

Card with Footer

Card content with a footer for actions.

Loading preview…

example.tsx

'use client';import {  Card,  CardHeader,  CardTitle,  CardContent,  CardFooter,} from '@nqlib/nqui';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <Card className="max-w-md">      <CardHeader>        <CardTitle>Card with Footer</CardTitle>      </CardHeader>      <CardContent>        <p>Card content with a footer for actions.</p>      </CardContent>      <CardFooter>        <Button>Action</Button>      </CardFooter>    </Card>  );}

Card with Image

Display an image in the card

Card with Image

Image Placeholder

Image content goes here.

example.tsx

'use client';import {  Card,  CardHeader,  CardTitle,  CardContent,} from '@nqlib/nqui';export default function Example() {  return (    <Card className="max-w-md">      <CardHeader>        <CardTitle>Card with Image</CardTitle>      </CardHeader>      <CardContent>        <div className="w-full h-32 bg-muted rounded-md flex items-center justify-center text-sm text-muted-foreground">          Image Placeholder        </div>        <p className="mt-4">Image content goes here.</p>      </CardContent>    </Card>  );}

Card with Actions

Multiple actions in the footer

Card with Actions

Multiple action buttons in the footer

Card content with multiple actions.

Loading preview…

example.tsx

'use client';import {  Card,  CardHeader,  CardTitle,  CardDescription,  CardContent,  CardFooter,} from '@nqlib/nqui';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <Card className="max-w-md">      <CardHeader>        <CardTitle>Card with Actions</CardTitle>        <CardDescription>          Multiple action buttons in the footer        </CardDescription>      </CardHeader>      <CardContent>        <p>Card content with multiple actions.</p>      </CardContent>      <CardFooter className="flex justify-between">        <Button variant="outline">Cancel</Button>        <Button>Confirm</Button>      </CardFooter>    </Card>  );}

Complete Card

A full-featured card example

Welcome to nqui

A modern component library for React

nqui provides beautiful, accessible components for building modern web applications.

TypeScript support
Fully accessible
Dark mode ready

Loading preview…

example.tsx

'use client';import {  Card,  CardHeader,  CardTitle,  CardDescription,  CardContent,  CardFooter,} from '@nqlib/nqui';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <Card className="max-w-md">      <CardHeader>        <CardTitle>Welcome to nqui</CardTitle>        <CardDescription>          A modern component library for React        </CardDescription>      </CardHeader>      <CardContent>        <p className="mb-4">          nqui provides beautiful, accessible components for building          modern web applications.        </p>        <ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">          <li>TypeScript support</li>          <li>Fully accessible</li>          <li>Dark mode ready</li>        </ul>      </CardContent>      <CardFooter className="flex justify-end gap-2">        <Button variant="outline">Learn More</Button>        <Button>Get Started</Button>      </CardFooter>    </Card>  );}

Sticky Header Card

A card with a sticky header featuring frosted glass effect. The header stays fixed while content scrolls behind it with a beautiful blur effect.

Sticky Header with Frosted Glass

Scroll the content below to see the frosted glass reflection effect. The header stays sticky while content scrolls behind it.

Blue Section

This blue section will blur and reflect through the frosted glass header as you scroll.

Green Section

Green content creates a cool reflection. The frosted glass effect uses backdrop-filter to blur content behind it.

Orange Section

Orange adds vibrancy. The extended backdrop captures nearby elements for a realistic reflection effect.

Purple Section

Purple creates depth. Backdrop-filter is hardware-accelerated and performs well in modern browsers.

Cyan Section

Cyan provides cool tones. The combination of fade mask and frosted glass creates beautiful color reflections.

Yellow Section

Yellow adds brightness. This effect is inspired by Apple's design language used in macOS and iOS interfaces.

Props

Card

Prop	Type	Default	Description
`stickyHeader`	`boolean`	`false`	Enables sticky header with frosted glass effect
`variant`	`"default"`	`"default"`	Visual style variant
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts all HTML div attributes

CardHeader

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts all HTML div attributes

CardTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts all HTML div attributes

CardDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts all HTML div attributes

CardContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts all HTML div attributes

CardFooter

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts all HTML div attributes

Advanced Usage

Custom Styling

Cards can be customized using Tailwind classes:

<Card className="border-2 border-primary shadow-lg">
  <CardHeader>
    <CardTitle>Custom Styled Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p>This card has custom border and shadow.</p>
  </CardContent>
</Card>

With Images

Cards work well with images:

import { Card, CardHeader, CardTitle, CardContent } from '@nqlib/nqui';

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card with Image</CardTitle>
      </CardHeader>
      <CardContent>
        <img
          src="/image.jpg"
          alt="Description"
          className="w-full rounded-md"
        />
        <p className="mt-4">Image content goes here.</p>
      </CardContent>
    </Card>
  );
}

Enable a sticky header with frosted glass effect by setting the stickyHeader prop to true. This creates a modern, Apple-inspired interface where the header stays fixed while content scrolls behind it with a beautiful blur effect.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@nqlib/nqui';

export default function StickyHeaderExample() {
  return (
    <Card stickyHeader className="h-96 w-full max-w-lg">
      <CardHeader>
        <CardTitle>Sticky Header</CardTitle>
        <CardDescription>
          The header stays fixed while content scrolls behind it.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* Long scrollable content */}
          <p>Scroll to see the frosted glass effect...</p>
          {/* More content */}
        </div>
      </CardContent>
    </Card>
  );
}

Features:

Header becomes sticky with position: sticky
Frosted glass effect using the FrostedGlass component
Content scrolls behind the blurred header
Extended backdrop captures nearby elements for realistic reflection
Hardware-accelerated backdrop-filter for smooth performance

Responsive Cards

Cards can be made responsive using Tailwind's grid system:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</div>

Styling

Cards use the following design tokens:

Background: bg-card
Text: text-card-foreground
Border: border with rounded-lg
Shadow: shadow-sm

You can customize the appearance using Tailwind classes:

<Card className="border-2 border-primary">
  {/* Custom styled card */}
</Card>

Accessibility

Semantic HTML structure
Proper heading hierarchy (CardTitle uses h2 styling)
Screen reader friendly
Keyboard navigation support

Best Practices

Use CardTitle for headings: Always use CardTitle for the main heading to maintain proper heading hierarchy
Add descriptions when helpful: Use CardDescription to provide additional context
Use CardFooter for actions: Place action buttons in the footer for consistency
Keep content focused: Cards work best when they contain related, focused content
Consider responsive design: Use grid layouts to make cards responsive across screen sizes

Next Steps

Learn about Button component for actions
Explore Form Components for inputs
Check out other Layout Components