Skip to content
Docs

Card

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@hua-labs/hua";

Default

Outline

Elevated

variant"default" | "outline" | "elevated""default"Visual style variant
shadow"none" | "sm" | "md" | "lg"-Shadow size (use none to disable)
padding"none" | "sm" | "md" | "lg""none"Padding size
hoverablebooleanfalseEnable hover effect
classNamestring-Additional CSS classes
children*React.ReactNode-Card content

CardHeader

CardTitle

CardDescription

CardContent

CardFooter

docs:common.basicUsagetsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@hua-labs/hua';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Main content of the card.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>
docs:common.variantstsx
<Card variant="default">Default style</Card>
<Card variant="outline">Outline style - transparent bg, 2px border</Card>
<Card variant="elevated">Elevated style - with shadow</Card>
Simple Cardtsx
<Card className="p-6">
  <h3 className="text-lg font-semibold">Simple Card</h3>
  <p className="text-muted-foreground">No sub-components needed.</p>
</Card>

  • •Semantic Structure: Use proper heading hierarchy within cards
  • •Focus Management: Interactive elements within cards are keyboard accessible
  • •Color Contrast: Maintains WCAG 2.1 AA contrast ratios
IconContainer