ComponentCardLayoutContainer

Card Component

A composable card component with header, body, and footer sections. Perfect for displaying content in a contained, visually distinct area.

Preview

Card Title

This is the card body content. You can put anything here including text, images, or other components.

Code

import { clsx } from 'clsx'

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

export function Card({ children, className, ...props }: CardProps) {
  return (
    <div
      className={clsx(
        'rounded-xl bg-white shadow-sm ring-1 ring-olive-950/5',
        'dark:bg-olive-900 dark:ring-white/10',
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

export function CardHeader({ children, className, ...props }: CardProps) {
  return (
    <div
      className={clsx('border-b border-olive-100 px-6 py-4 dark:border-olive-800', className)}
      {...props}
    >
      {children}
    </div>
  )
}

export function CardTitle({ children, className, ...props }: CardProps) {
  return (
    <h3
      className={clsx('font-display text-lg font-medium text-olive-950 dark:text-white', className)}
      {...props}
    >
      {children}
    </h3>
  )
}

export function CardBody({ children, className, ...props }: CardProps) {
  return (
    <div className={clsx('px-6 py-4', className)} {...props}>
      {children}
    </div>
  )
}

export function CardFooter({ children, className, ...props }: CardProps) {
  return (
    <div
      className={clsx(
        'border-t border-olive-100 px-6 py-4 dark:border-olive-800',
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

PreviousButton Variants NextModal Dialog

Looking for more?

Browse the full collection of components or check out other exploration topics.

View all components Explore hub