Card
Flat by default: a border and nothing else. Ask for depth with `variant`, or skip the parts entirely and set `padding` when all you want is a box.
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@joshicodes/cock';Parts
Header, content and footer are separate components, so you can leave any of them out.
Weekly digest
Goes out every Monday at 8:00.
1,284 subscribers. Last week's issue was opened by 61 percent of them, which is better than most meetings manage.
Variants
Flat by default. Hover the raised one.
default
A border, nothing else.
elevated
Sits a little higher than the rest.
raised
Hover it. It rises to the occasion.
flat
Filled, no outline.
Behaviour
- `CardHeader` takes an `actions` snippet for the top right corner, which is where a badge or a menu button usually goes.
- On a dark background a shadow is nearly invisible, so `elevated` also lightens the surface.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
<Card>
Props
| Prop | Type | Default |
|---|---|---|
variant `elevated` adds a shadow, `raised` lifts on hover, `flat` drops the border too. | 'default' | 'flat' | 'elevated' | 'raised' | 'default' |
padding | 'none' | 'sm' | 'md' | 'lg' | 'none' |
class | string | — |
Anything else is forwarded to the underlying element, typed as HTMLAttributes.
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<CardHeader>
Props
| Prop | Type | Default |
|---|---|---|
divided Draw a hairline under the header. | boolean | false |
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
actions Right-aligned slot for actions. | Snippet | — |
<CardTitle>
Props
| Prop | Type | Default |
|---|---|---|
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<CardDescription>
Props
| Prop | Type | Default |
|---|---|---|
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<CardContent>
Props
| Prop | Type | Default |
|---|---|---|
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<CardFooter>
Props
| Prop | Type | Default |
|---|---|---|
divided | boolean | true |
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |