Card

Displays a card with header, content, footer, and propaganda-style decorations.

shadcn/ui docs
№01
Comrade Access
Enter your credentials to access the collective
EST. MMXXIV

Installation

pnpm dlx shadcn@latest add https://propcore.dev/r/card.json

Usage

import {
  Card,
  CardWithTexture,
  CardBar,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  CardDivider,
  CardBadge,
  CardAccentStripe,
  CardStamp,
} from "@/components/ui/card"
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Worker Bulletin</CardTitle>
    <CardDescription>Daily report from the collective</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Production quota exceeded by 127%.</p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Acknowledge</Button>
  </CardFooter>
</Card>

Examples

Default

Basic card with header, content, and footer.

Worker Bulletin
Daily report from the collective

Production quota exceeded by 127%. All comrades report to assembly hall for commendation ceremony.

With Texture

Halftone dot overlay for authentic print texture.

Halftone Texture
Authentic print texture overlay

The subtle halftone dot pattern adds that vintage propaganda poster feel, like ink pressed onto rough paper.

With Bar

Decorative top/bottom bars in black, red, or gold.

Black Bar
Industrial header accent

The default industrial look.

Red Bar
Revolutionary header accent

For important announcements.

Gold Bar
Achievement header accent

For commendations and awards.

With Badge

Circular gold badge in the corner for numbering or labels.

№01
First Edition
Numbered badge in corner

The circular gold badge adds a sense of importance and collectibility.

NEW
Latest Release
Text badge variant

Use any short text to label your cards.

With Accent Stripe

Diagonal red stripe cutting across the corner.

Diagonal Stripe
Bold corner accent

The diagonal red stripe cuts across the corner, adding dynamic tension to the composition. A signature element of constructivist design.

With Divider

Decorative section divider with propcore styling.

Section Header
Content above the divider

The decorative divider uses the propcore design language: thick lines, a red accent dash, and a rotated gold diamond.

Use multiple dividers to separate distinct sections within a card.

Stamped

Propaganda-style rotated corner stamp that breaks out of card bounds.

Featured
Red star stamp - default

The rotated stamp breaks out of bounds, creating visual tension.

Important
Black exclamation stamp

Custom content inside for different meanings.

Edition
Gold numbered stamp

Different positions and variants for variety.

Rotated

Add visual tension with slight rotation. Nothing sits perfectly straight.

Rotate Left
-1 degree rotation

Slight counter-clockwise tilt for visual tension.

Rotate Right
+1 degree rotation

Slight clockwise tilt for visual tension.

Random
Random direction

Randomly picks left or right rotation.

Full Propaganda

All card features combined for maximum Soviet aesthetic.

Full Propaganda
All card features combined

This card demonstrates the full propcore aesthetic: halftone texture, corner stamp, diagonal stripe, decorative bars, and dividers.

EST. MMXXIV