Card

Card has almost no props of its own — the interesting edits here are compositional: add or remove a CardFooter, change the copy, or nest another component.

<Card className="w-full max-w-sm">
<CardHeader>
  <CardTitle>Route Overview</CardTitle>
  <CardDescription>Banff to Lake Louise, First Passage to the West</CardDescription>
</CardHeader>
<CardContent>2 days · GoldLeaf service</CardContent>
<CardFooter>
  <Button variant="secondary" size="sm">View details</Button>
</CardFooter>
</Card>