Content Card

A full-width card wrapper that applies the design-system card surface (`bg-card text-card-foreground`) around arbitrary children.

ContentCard is a simple compositional wrapper. It stretches to full width and applies the bg-card / text-card-foreground token pair from your design system, keeping all child content in a consistent surface layer. It is client-side ("use client") so it can be composed freely inside other interactive layouts.

Installation

npx shadcn@latest add @adv/content-card

Usage

import { ContentCard } from '@/components/ui/ContentCard';

<ContentCard>
  <p>Your content here.</p>
</ContentCard>

Example

Card title

Body text rendered on the card surface.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Required. Content to render inside the card surface.
`className`	`string`	`""`	Additional CSS classes appended to the inner card `div`.

Item Modal Footer

A contact/CTA footer section with a "Work with me" primary button, dropdown contact options, and a repeating shine animation.

Border Pattern

A lightweight div that applies a diagonal stripe CSS class for decorative left or bottom border accents.