Card

Source: packages/shared/components/ui/card.tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardAction,
  CardFooter,
} from "@prosper/shared/components/ui/card";

Preview

Software Engineer

Full-time · Remote · Engineering

We're looking for a talented engineer to join our growing team and help build the future of recruiting.

Sub-components

Component	Element	Description
`Card`	`<div>`	Root container — `bg-card`, border, rounded, flex column
`CardHeader`	`<div>`	Top section with auto grid layout, `px-6 pt-6`
`CardTitle`	`<h4>`	Heading inside header
`CardDescription`	`<p>`	Muted subtitle inside header
`CardAction`	`<div>`	Right-aligned action area inside header (e.g. a menu button)
`CardContent`	`<div>`	Main body, `p-[25px]`
`CardFooter`	`<div>`	Bottom section, `px-6 pb-6`, flex row

Default Styling

Background: bg-card text-card-foreground
Border: border border-primary-100
Layout: flex flex-col gap-3
Border radius: rounded-sm (4px)

Usage in the Codebase

Admin — LoginPage

Card wrapping a login form:

<Card className="shadow-lg bg-card text-card-foreground">
  <CardHeader className="pb-6">
    <div className="flex justify-center pt-2">
      <img src="/prosper-logo.svg" alt="Prosper" className="h-8" />
    </div>
  </CardHeader>
  <form>
    <CardContent className="space-y-6 pt-6">
      {/* form fields */}
    </CardContent>
    <CardFooter className="pt-6">
      <Button type="submit" className="w-full">Sign In</Button>
    </CardFooter>
  </form>
</Card>

Admin — JobList

Card as a clickable job listing:

<Card
  className="cursor-pointer hover:border-primary-300 transition-colors rounded-[4px]"
  onClick={() => onSelectJob(job.id)}
>
  <CardContent className="p-[25px] flex flex-col gap-[12px]">
    <Badge variant={job.is_active ? "success" : "secondary"}>
      {job.is_active ? "Published" : "Draft"}
    </Badge>
    <h4>{job.title}</h4>
    {/* ... */}
  </CardContent>
</Card>

Notes

Override in Admin LoginPage: className="shadow-lg bg-card text-card-foreground" adds a prominent drop shadow to the login card.
Override in Admin JobList: className="cursor-pointer hover:border-primary-300 transition-colors rounded-[4px]" makes cards interactive with a hover border highlight.
Override in Admin ApplicantList: Conditional className={applicant.starred ? 'border-primary' : ''} adds a blue border to starred candidates.