Skip to Content
ComponentsCard

Card

Overview

Card is a design-system component intended for reusable, product-agnostic UI composition.

Import

import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "@tesseract-nexus/tesserix-ui"

Exports

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'

Props

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {}
 
const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(cardVariants({ variant, className }))}
      {...props}
    />
  )
)
Card.displayName = "Card"
 
const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"
 
const CardTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(
      "text-2xl font-bold leading-tight tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"
 
const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"
 
const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
 
const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"
 
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

Variations

const cardVariants = cva(
  "rounded-xl text-card-foreground transition-all duration-200",
  {
    variants: {
      variant: {
        default: "border bg-card shadow-lg hover:shadow-xl",
        glass:
          "border border-white/20 bg-white/10 shadow-xl backdrop-blur-md hover:shadow-2xl dark:border-white/10 dark:bg-black/20 supports-[backdrop-filter]:bg-white/10 supports-[backdrop-filter]:dark:bg-black/20",
      },
    },
    defaultVariants: {

Usage Patterns

Basic

import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <Card />
}

Do / Don’t

Do

// Compose with domain wrappers in product code
<Card className="w-full" />

Don’t

// Avoid one-off hardcoded values that bypass tokens
<Card className="bg-[#123456] text-[#fafafa] px-[13px]" />

Token / Theming Mapping

  • Color tokens: —primary, —secondary, —muted, —destructive, —foreground, —background
  • Shape tokens: —radius
  • Border/input tokens: —border, —input, —ring
  • Spacing and typography: Tailwind scale via design-system preset

Interaction Test Checklist

  1. Interaction: click/keyboard activation for primary paths.
  2. Focus: visible focus styles and logical tab order.
  3. Variants: core variants and sizes render correctly.
  4. Disabled/error states: behavior and ARIA attributes are correct.
  5. Regression: Storybook visual check for primary states.

Accessibility

  • Verify keyboard behavior for all interactive states.
  • Ensure labels and semantic roles are present in consuming screens.
  • Validate focus treatment and screen-reader output during QA.
CalendarCheckbox