@vibe-labs/design-components-cards

Card component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-cards";

import { CardSizes, CardVariants } from "@vibe-labs/design-components-cards/types";
import type { CardSize, CardVariant, CardStyleProps } from "@vibe-labs/design-components-cards/types";

Contents

Tokens (card.css)

CSS custom properties defined in @layer vibe.tokens:

Padding Scale

Token	Value
--card-padding-sm	--space-3
--card-padding-md	--space-4
--card-padding-lg	--space-6

Appearance

Token	Default	Description
--card-radius	--radius-lg	Border radius
--card-bg	--surface-base	Background
--card-border-color	--border-subtle	Border color
--card-border-width	--border-width-1	Border width
--card-shadow	--shadow-sm	Elevated variant shadow
--card-shadow-hover	--shadow-md	Elevated hover shadow
--card-header-border	--border-subtle	Header bottom border
--card-footer-border	--border-subtle	Footer top border
--card-footer-bg	--surface-subtle	Footer background
--card-hover-bg	--surface-elevated	Interactive hover background

Generated Styles (card.g.css)

Component classes generated into @layer vibe.components.

Variants

Variant	Description
default	Surface background with subtle border
elevated	No border, box shadow
outlined	Transparent bg, default border
ghost	Fully transparent
gradient	Gradient card background
gradient-subtle	Subtle gradient background
gradient-elevated	Elevated gradient background

Sizes

sm · md · lg — controls padding on header, body, and footer sections (default: md)

Sections

• card-header — flex row with bottom border
• card-body — flex-grow content area
• card-footer — flex row with top border and subtle background
• card-media — overflow-hidden container for images/video (full-width, auto-height, object-fit cover)

Interactive

When flagged as interactive: pointer cursor, transitions on bg/shadow/border, hover background change, elevated shadow lift on hover, focus-visible ring.

Modifiers

• horizontal — row layout, media capped at 40% width
• seamless — removes header/footer internal borders and footer background
• flush — removes all section padding

TypeScript Types (types/)

CardSizes    // ["sm", "md", "lg"]
CardVariants // ["default", "elevated", "outlined", "ghost",
             //  "gradient", "gradient-subtle", "gradient-elevated"]

type CardSize
type CardVariant

interface CardStyleProps {
  variant?: CardVariant
  size?: CardSize
  interactive?: boolean
  horizontal?: boolean
  seamless?: boolean
  flush?: boolean
}

interface CardHeaderStyleProps {}
interface CardBodyStyleProps {}
interface CardFooterStyleProps {}
interface CardMediaStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
card.css	Token definitions
card.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (surfaces, borders, spacing, elevation, gradients, transitions).

Build

npm run build