HelpTribe.
Home
HT|UI
GitHub

Card

Content container with white surface, gently curved corners (12px), and flat styling. Emphasis through border-color shift on hover.

Installation

$ npx shadcn@latest add card

Preview

Feature Title

Description text goes here.

Additional content for this card component.

Interactive

Interactive Card

Hover to see the border accent.

Usage (React/TSX)

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

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Feature Title</CardTitle>
        <CardDescription>Description text goes here.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Additional content.</p>
      </CardContent>
      <CardFooter>
        <Button size="sm">Learn More</Button>
      </CardFooter>
    </Card>
  )
}

Usage (HTML/CSS)

<div class="ds-card">
  <h3 class="ds-card-title">Feature Title</h3>
  <p class="ds-card-body">Description text goes here.</p>
</div>

<style>
  .ds-card {
    background: #ffffff;
    color: #18181b;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e4e4e7;
    transition: border-color 0.2s;
  }
  .ds-card:hover {
    border-color: #A100FF;
  }
  .ds-card-title {
    font-family: 'Nohemi', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: 8px;
  }
  .ds-card-body {
    font-family: 'Satoshi', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #71717a;
  }
</style>

Props

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
childrenReactNode—Content inside the card.

Sub-components

PropTypeDefaultDescription
CardHeaderdiv—Container for title and description.
CardTitleh3—The card title. Uses Nohemi font.
CardDescriptionp—Secondary description text in muted gray.
CardContentdiv—Main content area.
CardFooterdiv—Footer with flex layout and top border.

Design Notes

  • Gently curved corners (12px radius).
  • White (#ffffff) on dark canvas, surface (#f4f4f5) on light canvas.
  • No shadows. Flat by default. Emphasis through border-color shift on hover.
  • 1px solid border (#e4e4e7). Electric Violet border on hover/focus.
  • Internal padding: 24px standard, 32px for featured cards.