Cards

Card

A bordered content block for projects, pieces, links and previews.

Component

10

Import

import { Card, CardContent, CardTitle, Text } from "@swirski/ui";

Composition

Card
`-- CardContent
    |-- CardTitle
    `-- children

Playground

3 controls

Patchwork Jacket

A framed content primitive with Swirski borders and shadows.

Controls

title

surface

interactive

Usage

<Card
  className="max-w-sm bg-[#F5F5F3] shadow-[8px_8px_0_#0B0B0C]"
  interactive={true}
>
  <CardContent>
    <CardTitle>Patchwork Jacket</CardTitle>
    <Text className="mt-3" size="sm" tone="muted" weight="bold">
      A framed content primitive with Swirski borders and shadows.
    </Text>
  </CardContent>
</Card>

Props

32 generated

Prop	Type	Default	Notes
`Card.asChild`	`boolean`	`false`	Generated from CardProps.
`Card.children`	`ReactNode`	`-`	Card body content.
`Card.interactive`	`boolean`	`true`	Enables hover and active movement styles.
`Card.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from CardProps.
`Card.tone`	`'default' \| 'blue' \| 'yellow' \| 'white' \| 'black'`	`"default"`	Generated from CardProps.
`Card.variant`	`'outline' \| 'elevated' \| 'flat'`	`"elevated"`	Generated from CardProps.
`Card.withShadow`	`boolean`	`-`	Generated from CardProps.
`CardBadge.asChild`	`boolean`	`false`	Generated from CardBadgeProps.
`CardBadge.children`	`ReactNode`	`-`	Card body content.
`CardBadge.position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`"top-left"`	Generated from CardBadgeProps.
`CardBadge.size`	`'sm' \| 'md'`	`"sm"`	Generated from CardBadgeProps.
`CardBadge.tone`	`'blue' \| 'yellow' \| 'red' \| 'white' \| 'black'`	`"white"`	Generated from CardBadgeProps.
`CardBadge.variant`	`'solid' \| 'outline'`	`"solid"`	Generated from CardBadgeProps.
`CardContent.asChild`	`boolean`	`false`	Generated from CardContentProps.
`CardContent.children`	`ReactNode`	`-`	Card body content.
`CardContent.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from CardContentProps.
`CardContent.variant`	`'default' \| 'flush'`	`"default"`	Generated from CardContentProps.
`CardMedia.asChild`	`boolean`	`false`	Generated from CardMediaProps.
`CardMedia.aspect`	`string`	`"4/3"`	Generated from CardMediaProps.
`CardMedia.children`	`ReactNode`	`-`	Card body content.
`CardMedia.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from CardMediaProps.
`CardMedia.variant`	`'default' \| 'flush'`	`"default"`	Generated from CardMediaProps.
`CardMeta.asChild`	`boolean`	`false`	Generated from CardMetaProps.
`CardMeta.children`	`ReactNode`	`-`	Card body content.
`CardMeta.size`	`'sm' \| 'md'`	`"sm"`	Generated from CardMetaProps.
`CardMeta.tone`	`'default' \| 'muted' \| 'inverted'`	`"default"`	Generated from CardMetaProps.
`CardMeta.variant`	`'default' \| 'plain'`	`"default"`	Generated from CardMetaProps.
`CardTitle.asChild`	`boolean`	`false`	Generated from CardTitleProps.
`CardTitle.children`	`ReactNode`	`-`	Card body content.
`CardTitle.size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from CardTitleProps.
`CardTitle.tone`	`'default' \| 'muted' \| 'inverted'`	`"default"`	Generated from CardTitleProps.
`CardTitle.variant`	`'default' \| 'plain'`	`"default"`	Generated from CardTitleProps.
`className`	`string`	`-`	Adds classes to the card root.
`CardContent.className`	`string`	`-`	Adds classes to the padded content wrapper.

Previous: Accordion Next: SectionLabel