Skip to main content

​
Overview

Card is a production-ready card component included in the sunpeak Starter Kit. It provides a flexible interface for displaying rich content with optional images, headers, metadata, and up to two action buttons.

​
Import

import { Card } from './components/card';

​
Basic Usage

<Card
  image="/photo.jpg"
  imageAlt="Scenic view"
  header="Card Title"
  metadata="⭐ 4.5 • Austin, TX"
  button1={{ children: "Primary Action", isPrimary: true, onClick: () => {} }}
>
  Card description text goes here.
</Card>

​
Props

​
children

  • Type: React.ReactNode
  • Optional: Yes
  • Description: The main content/description displayed in the card body. Limited to 2 lines with ellipsis overflow.

​
image

  • Type: string
  • Optional: Yes
  • Description: URL or path to the image displayed at the top of the card.

​
imageAlt

  • Type: string
  • Optional: Yes
  • Description: Alt text for the image for accessibility.

​
imageMaxWidth

  • Type: number
  • Optional: Yes
  • Default: 400
  • Description: Maximum width of the image in pixels.

​
imageMaxHeight

  • Type: number
  • Optional: Yes
  • Default: 400
  • Description: Maximum height of the image in pixels.
  • Type: React.ReactNode
  • Optional: Yes
  • Description: The card header/title. Displays with medium font weight and truncates with ellipsis if too long.

​
metadata

  • Type: React.ReactNode
  • Optional: Yes
  • Description: Secondary metadata displayed below the header (e.g., ratings, location, price).

​
button1

  • Type: OpenAIButtonProps
  • Optional: Yes
  • Description: Configuration for the first action button.
interface OpenAIButtonProps {
  isPrimary?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}

​
button2

  • Type: OpenAIButtonProps
  • Optional: Yes
  • Description: Configuration for the second action button.

​
variant

  • Type: "default" | "bordered" | "elevated"
  • Optional: Yes
  • Default: "default"
  • Description: Visual style variant of the card.
    • default: Subtle border with surface background
    • bordered: Thicker border with surface background
    • elevated: Subtle border with surface background and shadow

​
className

  • Type: string
  • Optional: Yes
  • Description: Additional CSS classes to apply to the card container.

​
onClick

  • Type: (e: React.MouseEvent<HTMLDivElement>) => void
  • Optional: Yes
  • Description: Click handler for the entire card. Button clicks are prevented from bubbling to this handler.