Card

A flexible container component with compound sub-components: Card.Header, Card.Body, and Card.Footer. Supports four visual variants and an optional hover animation.

Import

tsx

import { Card } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Bordered (default)

Project AlphaActive

Last updated 2 hours ago

A full-stack application with real-time collaboration features and advanced analytics.

Elevated + Hoverable

Hover over this card to see the lift effect.

Props

Prop	Type	Default	Description
variant	`'bordered' \| 'shadow' \| 'elevated' \| 'ghost'`	`'bordered'`	Visual treatment of the card container.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the padding inside Header, Body, and Footer.
hoverable	`boolean`	`false`	Adds a lift-and-shadow hover effect.

Examples

Compound usage

tsx

import { Card, Button } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <Card variant="bordered">
      <Card.Header>
        <h3>Card Title</h3>
        <p>Subtitle or metadata</p>
      </Card.Header>
      <Card.Body>
        Body content goes here. Accepts any children.
      </Card.Body>
      <Card.Footer>
        <Button size="sm">Confirm</Button>
        <Button size="sm" variant="ghost">Cancel</Button>
      </Card.Footer>
    </Card>
  )
}

Variants

tsx

import { Card } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Card variant="bordered"><Card.Body>Bordered</Card.Body></Card>
      <Card variant="shadow"><Card.Body>Shadow</Card.Body></Card>
      <Card variant="elevated"><Card.Body>Elevated</Card.Body></Card>
    </div>
  )
}

Hoverable

tsx

import { Card } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  return (
    <Card hoverable variant="shadow">
      <Card.Body>Hover over me!</Card.Body>
    </Card>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */