@vibe-labs/design-components-cards

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

Installation

npm install @vibe-labs/design-components-cards

@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

CSS custom properties defined in @layer vibe.tokens (file: card.css).

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

Component classes generated into @layer vibe.components (file: card.g.css).

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 (default) · lg — controls padding on header, body, and footer sections.

Sections

Class	Description
.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, object-fit cover)

Interactive

data-interactive flag enables: pointer cursor, transitions on bg/shadow/border, hover background change, elevated shadow lift on hover, focus-visible ring.

Modifiers

Modifier	Description
data-horizontal	Row layout, media capped at 40% width
data-seamless	Removes header/footer internal borders and footer background
data-flush	Removes all section padding

TypeScript 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

---

Usage Guide

Import

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

import type { CardStyleProps } from "@vibe-labs/design-components-cards/types";

Variants

Variant

Set data-variant on .card: default · elevated · outlined · ghost · gradient · gradient-subtle · gradient-elevated

Size

Set data-size on .card: sm · md (default) · lg — controls padding in header, body, and footer.

Boolean flags

• data-interactive — adds hover/focus states, shadow lift, cursor pointer
• data-horizontal — row layout with media capped at 40% width
• data-seamless — removes internal section borders and footer background
• data-flush — removes all section padding

Examples

Default card with sections

<!-- Standard card with header, body, and footer -->
<div class="card">
  <div class="card-header">
    <h3>Card title</h3>
  </div>
  <div class="card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="card-footer">
    <button class="btn" data-variant="primary" data-size="sm">Action</button>
  </div>
</div>

Elevated variant

<div class="card" data-variant="elevated">
  <div class="card-body">
    <p>Elevated card — no border, uses box shadow.</p>
  </div>
</div>

Interactive card (clickable)

<!-- Entire card is focusable/hoverable — useful for list-of-card navigation -->
<a class="card" data-interactive href="/project/42">
  <div class="card-body">
    <strong>Project Alpha</strong>
    <p>Click to open details.</p>
  </div>
</a>

Card with media (image)

<!-- card-media handles overflow and object-fit automatically -->
<div class="card" data-variant="elevated">
  <div class="card-media">
    <img src="/cover.jpg" alt="Cover" />
  </div>
  <div class="card-body">
    <h4>Article title</h4>
    <p>Short description of the article.</p>
  </div>
</div>

Horizontal layout

<!-- Media sits to the left, capped at 40% width -->
<div class="card" data-horizontal>
  <div class="card-media">
    <img src="/thumb.jpg" alt="Thumbnail" />
  </div>
  <div class="card-body">
    <h4>Side-by-side card</h4>
    <p>Media on the left, content on the right.</p>
  </div>
</div>

Gradient card

<div class="card" data-variant="gradient">
  <div class="card-body">
    <p>Gradient card background.</p>
  </div>
</div>

With Vue

Use @vibe-labs/design-vue-cards for <SbCard>, <SbCardHeader>, <SbCardBody>, <SbCardFooter>, and <SbCardMedia> which accept CardStyleProps and wire data attributes automatically.