card
Elevated container with dither surface
Corecard.css
Installation
$
npx skeehn add cardPreview
Default Card
Card content with dither surface texture. Supports header, body, and footer sections.
Dither Variant
The dither variant adds a textured background pattern to the card surface.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'solid' | 'dither' | 'outline' | 'ghost' | 'inverted' | 'pixel' | — | Visual variant of the card surface |
| className | string | — | Additional CSS class names |
Usage
card.tsx
1import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@skeehn/react';23export function MyComponent() {4 return (5 <Card>6 <CardHeader>7 <CardTitle>Project Update</CardTitle>8 </CardHeader>9 <CardBody>10 <p>The dither surface adds a textured aesthetic.</p>11 </CardBody>12 <CardFooter>13 <Button variant="outline" size="sm">View Details</Button>14 </CardFooter>15 </Card>16 );17}