{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["motion", "@radix-ui/react-slot"],
  "devDependencies": [],
  "files": [
    {
      "path": "card.tsx",
      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  type MotionStyle,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  useSpring,\n  useTransform,\n} from \"motion/react\";\nimport Image, { type ImageProps } from \"next/image\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst componentThemeClassName =\n  \"[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]\";\n\nconst cardCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]\";\n\nconst cardCornerInheritClassName =\n  \"rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]\";\n\nconst cardMediaVarsClassName =\n  \"[--card-media-padding:1.5px] [--card-media-radius:max(0px,calc(var(--radius-lg)-var(--card-media-padding)))]\";\n\nconst cardImageFrameClassName =\n  \"overflow-hidden rounded-[var(--card-media-radius)] supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[max(0px,calc(12px-var(--card-media-padding)))]\";\n\nconst cardImageMediaClassName =\n  \"[&_img]:block [&_img]:size-full [&_img]:rounded-none [&_img]:object-cover [&_picture]:size-full [&_picture]:rounded-none\";\n\nconst MotionDiv = motion.div;\n\nconst motionTitleElements = {\n  h1: motion.h1,\n  h2: motion.h2,\n  h3: motion.h3,\n  h4: motion.h4,\n  h5: motion.h5,\n  h6: motion.h6,\n  div: MotionDiv,\n  span: motion.span,\n} as const;\n\nconst motionDescriptionElements = {\n  p: motion.p,\n  div: MotionDiv,\n  span: motion.span,\n} as const;\n\n/** Fluid hover — low bounce, long settle (same family as progress fill). */\nconst cardHoverSpring = {\n  type: \"spring\" as const,\n  stiffness: 95,\n  damping: 19,\n  mass: 0.92,\n  restDelta: 0.001,\n};\n\nconst cardLayoutTransition = {\n  type: \"spring\" as const,\n  stiffness: 220,\n  damping: 30,\n  mass: 0.85,\n};\n\nconst CARD_SHADOW_HOVER =\n  \"0 20px 42px -30px rgba(15,23,42,0.22), 0 0 0 1px rgba(15,23,42,0.06)\";\n\nconst cardInteractiveSurfaceClassName =\n  \"shadow-[0_1px_0_rgba(15,23,42,0.02),0_0_0_1px_rgba(0,0,0,0.03)] transition-[background-color,border-color] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none before:transition-opacity before:duration-500 before:motion-reduce:transition-none hover:border-foreground/11 hover:bg-card hover:before:opacity-100 focus-within:border-foreground/11 focus-within:bg-card focus-within:before:opacity-100\";\n\nconst cardCssHoverMotionClassName =\n  \"transition-[transform,background-color,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:-translate-y-[5px] hover:scale-[1.006] hover:shadow-[0_20px_42px_-30px_rgba(15,23,42,0.22),0_0_0_1px_rgba(15,23,42,0.06)] focus-within:-translate-y-[5px] focus-within:scale-[1.006] focus-within:shadow-[0_20px_42px_-30px_rgba(15,23,42,0.22),0_0_0_1px_rgba(15,23,42,0.06)] motion-reduce:transform-none motion-reduce:transition-none motion-reduce:hover:transform-none motion-reduce:hover:shadow-none motion-reduce:focus-within:transform-none motion-reduce:focus-within:shadow-none\";\n\ntype MotionSafeDivProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  | \"onAnimationEnd\"\n  | \"onAnimationIteration\"\n  | \"onAnimationStart\"\n  | \"onDrag\"\n  | \"onDragEnd\"\n  | \"onDragEnter\"\n  | \"onDragExit\"\n  | \"onDragLeave\"\n  | \"onDragOver\"\n  | \"onDragStart\"\n  | \"onDrop\"\n>;\n\ntype CardProps = MotionSafeDivProps & {\n  asChild?: boolean;\n  interactive?: boolean;\n  onHoverEnd?: () => void;\n  onHoverStart?: () => void;\n};\n\ntype CardSectionProps = MotionSafeDivProps;\n\ntype CardTitleElement = keyof typeof motionTitleElements;\ntype CardDescriptionElement = keyof typeof motionDescriptionElements;\n\ntype CardTitleProps = CardSectionProps & {\n  as?: CardTitleElement;\n};\n\ntype CardDescriptionProps = CardSectionProps & {\n  as?: CardDescriptionElement;\n};\n\ntype CardImageProps = Omit<ImageProps, \"alt\"> & {\n  inset?: boolean;\n  alt: string;\n};\n\ntype CardMediaProps = CardSectionProps & {\n  inset?: boolean;\n};\n\nconst cardSectionMotionProps = {\n  layout: \"position\" as const,\n  transition: cardLayoutTransition,\n};\n\nfunction assignRef<T>(ref: React.ForwardedRef<T>, value: T | null) {\n  if (typeof ref === \"function\") {\n    ref(value);\n    return;\n  }\n\n  if (ref) {\n    ref.current = value;\n  }\n}\n\nfunction useCardSectionMotionProps() {\n  const reduceMotion = useReducedMotion();\n\n  return reduceMotion ? {} : cardSectionMotionProps;\n}\n\nfunction getCardSurfaceClassName({\n  className,\n  interactive,\n  useCssHoverMotion,\n}: {\n  className?: string;\n  interactive: boolean;\n  useCssHoverMotion: boolean;\n}) {\n  return cn(\n    componentThemeClassName,\n    cardCornerClassName,\n    cardMediaVarsClassName,\n    \"relative flex transform-gpu flex-col gap-4 overflow-hidden border border-border/70 bg-card/95 py-4 text-card-foreground text-sm backdrop-blur-[2px]\",\n    \"before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-1 before:h-px before:bg-linear-to-r before:from-transparent before:via-foreground/12 before:to-transparent before:opacity-60\",\n    \"has-[>[data-slot=card-image]:first-child]:pt-0 has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0\",\n    \"[&>img]:rounded-none [&_[data-slot=card-image]_img]:rounded-none\",\n    \"[&>*:not([aria-hidden=true])]:relative [&>*:not([aria-hidden=true])]:z-[1]\",\n    interactive && [\n      cardInteractiveSurfaceClassName,\n      useCssHoverMotion && cardCssHoverMotionClassName,\n    ],\n    !interactive && [\n      \"transition-[border-color,background-color] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]\",\n    ],\n    className\n  );\n}\n\nfunction useCardHoverMotion(enabled: boolean) {\n  const hoverTarget = useMotionValue(0);\n  const hover = useSpring(hoverTarget, cardHoverSpring);\n\n  const y = useTransform(hover, [0, 1], [0, -5]);\n  const scale = useTransform(hover, [0, 1], [1, 1.006]);\n  const shadowOpacity = useTransform(hover, [0, 1], [0, 1]);\n\n  const setHover = React.useCallback(\n    (active: boolean) => {\n      if (!enabled) return;\n      hoverTarget.set(active ? 1 : 0);\n    },\n    [enabled, hoverTarget]\n  );\n\n  React.useEffect(() => {\n    if (!enabled) {\n      hoverTarget.set(0);\n    }\n  }, [enabled, hoverTarget]);\n\n  const hoverStyle: MotionStyle = { y, scale };\n\n  return {\n    hoverStyle,\n    shadowOpacity,\n    setHover,\n  };\n}\n\nfunction useCardInteractiveHandlers({\n  activateHover,\n  deactivateHover,\n  includeMotionHoverEvents,\n  motionEnabled,\n  onBlurCapture,\n  onFocusCapture,\n  onHoverEnd,\n  onHoverStart,\n  onPointerEnter,\n  onPointerLeave,\n}: {\n  activateHover: () => void;\n  deactivateHover: (canDeactivate: boolean) => void;\n  includeMotionHoverEvents: boolean;\n  motionEnabled: boolean;\n  onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;\n  onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;\n  onHoverEnd?: () => void;\n  onHoverStart?: () => void;\n  onPointerEnter?: React.PointerEventHandler<HTMLDivElement>;\n  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;\n}) {\n  const focusWithinRef = React.useRef(false);\n  const pointerInsideRef = React.useRef(false);\n\n  const notifyHoverStart = React.useCallback(() => {\n    if (!includeMotionHoverEvents) {\n      onHoverStart?.();\n    }\n  }, [includeMotionHoverEvents, onHoverStart]);\n\n  const notifyHoverEnd = React.useCallback(() => {\n    if (!includeMotionHoverEvents) {\n      onHoverEnd?.();\n    }\n  }, [includeMotionHoverEvents, onHoverEnd]);\n\n  const handleHoverStart = React.useCallback(() => {\n    onHoverStart?.();\n    activateHover();\n  }, [activateHover, onHoverStart]);\n\n  const handleHoverEnd = React.useCallback(() => {\n    onHoverEnd?.();\n    deactivateHover(!(focusWithinRef.current || pointerInsideRef.current));\n  }, [deactivateHover, onHoverEnd]);\n\n  const handlePointerEnter = React.useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      onPointerEnter?.(event);\n      if (event.defaultPrevented) return;\n      pointerInsideRef.current = true;\n      activateHover();\n      notifyHoverStart();\n    },\n    [activateHover, notifyHoverStart, onPointerEnter]\n  );\n\n  const handlePointerLeave = React.useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      onPointerLeave?.(event);\n      if (event.defaultPrevented) return;\n      pointerInsideRef.current = false;\n      const canDeactivate = !focusWithinRef.current;\n      deactivateHover(canDeactivate);\n      if (canDeactivate) {\n        notifyHoverEnd();\n      }\n    },\n    [deactivateHover, notifyHoverEnd, onPointerLeave]\n  );\n\n  const handleFocusCapture = React.useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (event.defaultPrevented) return;\n      focusWithinRef.current = true;\n      activateHover();\n      notifyHoverStart();\n    },\n    [activateHover, notifyHoverStart, onFocusCapture]\n  );\n\n  const handleBlurCapture = React.useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      onBlurCapture?.(event);\n      if (event.defaultPrevented) return;\n\n      const next = event.relatedTarget;\n      if (next instanceof Node && event.currentTarget.contains(next)) {\n        return;\n      }\n\n      focusWithinRef.current = false;\n      const canDeactivate = !pointerInsideRef.current;\n      deactivateHover(canDeactivate);\n      if (canDeactivate) {\n        notifyHoverEnd();\n      }\n    },\n    [deactivateHover, notifyHoverEnd, onBlurCapture]\n  );\n\n  if (!motionEnabled) {\n    return {\n      onBlurCapture,\n      onFocusCapture,\n      onHoverEnd,\n      onHoverStart,\n      onPointerEnter,\n      onPointerLeave,\n    };\n  }\n\n  const pointerFocusHandlers = {\n    onBlurCapture: handleBlurCapture,\n    onFocusCapture: handleFocusCapture,\n    onPointerEnter: handlePointerEnter,\n    onPointerLeave: handlePointerLeave,\n  };\n\n  if (!includeMotionHoverEvents) {\n    return pointerFocusHandlers;\n  }\n\n  return {\n    ...pointerFocusHandlers,\n    onHoverEnd: handleHoverEnd,\n    onHoverStart: handleHoverStart,\n  };\n}\n\nconst Card = React.forwardRef<HTMLElement, CardProps>(\n  (\n    {\n      asChild = false,\n      children,\n      className,\n      interactive = false,\n      style: styleProp,\n      onBlurCapture,\n      onFocusCapture,\n      onHoverEnd,\n      onHoverStart,\n      onPointerEnter,\n      onPointerLeave,\n      ...props\n    },\n    ref\n  ) => {\n    const reduceMotion = useReducedMotion();\n    const useSpringHover = interactive && !reduceMotion && !asChild;\n    const useCssHoverMotion = interactive && asChild && !reduceMotion;\n    const animateLayout = !(reduceMotion || useSpringHover);\n    const surfaceClassName = getCardSurfaceClassName({\n      className,\n      interactive,\n      useCssHoverMotion,\n    });\n    const { hoverStyle, shadowOpacity, setHover } =\n      useCardHoverMotion(useSpringHover);\n\n    const interactiveHandlers = useCardInteractiveHandlers({\n      activateHover: () => {\n        setHover(true);\n      },\n      deactivateHover: (canDeactivate) => {\n        if (canDeactivate) {\n          setHover(false);\n        }\n      },\n      includeMotionHoverEvents: !asChild,\n      motionEnabled: interactive,\n      onBlurCapture,\n      onFocusCapture,\n      onHoverEnd,\n      onHoverStart,\n      onPointerEnter,\n      onPointerLeave,\n    });\n\n    if (asChild) {\n      return (\n        <Slot\n          {...props}\n          {...interactiveHandlers}\n          className={surfaceClassName}\n          data-interactive={interactive ? \"true\" : undefined}\n          data-slot=\"card\"\n          ref={ref}\n          style={styleProp}\n        >\n          {children}\n        </Slot>\n      );\n    }\n\n    return (\n      <MotionDiv\n        {...props}\n        {...interactiveHandlers}\n        className={surfaceClassName}\n        data-interactive={interactive ? \"true\" : undefined}\n        data-slot=\"card\"\n        initial={false}\n        layout={animateLayout ? \"position\" : undefined}\n        ref={(node) => {\n          assignRef(ref, node);\n        }}\n        style={useSpringHover ? { ...styleProp, ...hoverStyle } : styleProp}\n        transition={cardLayoutTransition}\n      >\n        {useSpringHover ? (\n          <motion.div\n            aria-hidden\n            className={cn(\n              \"pointer-events-none absolute inset-0 z-0\",\n              cardCornerInheritClassName\n            )}\n            style={{\n              boxShadow: CARD_SHADOW_HOVER,\n              opacity: shadowOpacity,\n            }}\n          />\n        ) : null}\n        {children}\n      </MotionDiv>\n    );\n  }\n);\n\nCard.displayName = \"Card\";\n\nconst CardImage = React.forwardRef<HTMLImageElement, CardImageProps>(\n  function CardImage(\n    { className, inset = true, alt, fill, width, height, sizes, ...props },\n    ref\n  ) {\n    const useFill = fill ?? (width === undefined && height === undefined);\n    const imageClassName = cn(\n      \"rounded-none object-cover\",\n      useFill ? \"size-full\" : \"block w-full\",\n      className\n    );\n\n    const image = (\n      <Image\n        alt={alt}\n        className={imageClassName}\n        fill={useFill || undefined}\n        height={useFill ? undefined : height}\n        ref={ref}\n        sizes={sizes ?? \"(max-width: 768px) 100vw, 400px\"}\n        width={useFill ? undefined : width}\n        {...props}\n      />\n    );\n\n    if (!inset) {\n      return (\n        <div\n          className={cn(\"relative w-full\", useFill && \"aspect-[16/10]\")}\n          data-slot=\"card-image\"\n        >\n          {image}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className=\"p-[var(--card-media-padding)] pb-0\"\n        data-slot=\"card-image\"\n      >\n        <div\n          className={cn(\n            cardImageFrameClassName,\n            useFill && \"relative aspect-[16/10] w-full\"\n          )}\n          data-slot=\"card-image-frame\"\n        >\n          {image}\n        </div>\n      </div>\n    );\n  }\n);\n\nCardImage.displayName = \"CardImage\";\n\nfunction CardMedia({\n  className,\n  inset = true,\n  children,\n  ...props\n}: CardMediaProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n\n  if (!inset) {\n    return (\n      <MotionDiv\n        className={cn(\n          \"w-full shrink-0 overflow-hidden\",\n          cardImageMediaClassName,\n          className\n        )}\n        data-slot=\"card-image\"\n        {...sectionMotionProps}\n        {...props}\n      >\n        {children}\n      </MotionDiv>\n    );\n  }\n\n  return (\n    <MotionDiv\n      className={cn(\n        \"w-full shrink-0 p-[var(--card-media-padding)] pb-0\",\n        className\n      )}\n      data-slot=\"card-image\"\n      {...sectionMotionProps}\n      {...props}\n    >\n      <div\n        className={cn(cardImageFrameClassName, cardImageMediaClassName)}\n        data-slot=\"card-image-frame\"\n      >\n        {children}\n      </div>\n    </MotionDiv>\n  );\n}\n\nfunction CardHeader({ className, ...props }: CardSectionProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n\n  return (\n    <MotionDiv\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        className\n      )}\n      data-slot=\"card-header\"\n      {...sectionMotionProps}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ as = \"h3\", className, ...props }: CardTitleProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n  const MotionTitle = motionTitleElements[as];\n\n  return (\n    <MotionTitle\n      className={cn(\n        \"cn-font-heading font-medium text-base leading-snug tracking-[-0.01em]\",\n        className\n      )}\n      data-slot=\"card-title\"\n      {...sectionMotionProps}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({\n  as = \"p\",\n  className,\n  ...props\n}: CardDescriptionProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n  const MotionDescription = motionDescriptionElements[as];\n\n  return (\n    <MotionDescription\n      className={cn(\"text-muted-foreground text-sm leading-6\", className)}\n      data-slot=\"card-description\"\n      {...sectionMotionProps}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: CardSectionProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n\n  return (\n    <MotionDiv\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      data-slot=\"card-action\"\n      {...sectionMotionProps}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: CardSectionProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n\n  return (\n    <MotionDiv\n      className={cn(\"px-4\", className)}\n      data-slot=\"card-content\"\n      {...sectionMotionProps}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: CardSectionProps) {\n  const sectionMotionProps = useCardSectionMotionProps();\n\n  return (\n    <MotionDiv\n      className={cn(\n        \"flex items-center rounded-b-[inherit] border-border/60 border-t bg-muted/45 p-4 text-muted-foreground backdrop-blur-[1px] transition-colors duration-300 supports-[corner-shape:squircle]:[corner-shape:inherit]\",\n        className\n      )}\n      data-slot=\"card-footer\"\n      {...sectionMotionProps}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  CardImage,\n  CardMedia,\n};\nexport type {\n  CardDescriptionProps,\n  CardImageProps,\n  CardMediaProps,\n  CardProps,\n  CardSectionProps,\n  CardTitleProps,\n};\n",
      "type": "registry:ui"
    }
  ],
  "title": "Card",
  "description": "Compound card surface with optional interactive lift, Motion-smoothed layout transitions, asChild link support, semantic title slots, and shared header, action, content, and footer slots."
}