Skip to content
Pinky UI

Basic Card

A title, an optional description, an optional footer — the structural card the rest of the family builds on.

  • cards
  • card
  • structural
  • content

Studio plan

Everything a small team needs to ship together.

Choose plan

Quick usage

usage
import { BasicCard } from "@pinky-ui/components";

<BasicCard
  title="Studio plan"
  description="Everything a small team needs."
  footer={<PrimaryButton>Choose plan</PrimaryButton>}
/>

Presets

Default

Title and description.

Compact

Smaller radius, no footer room implied.

radius={"md"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
titleReactNode—Required.
descriptionReactNode—Optional supporting text.
footerReactNode—Optional region below the description — a button row, a price, a byline.
radius"md" | "lg" | "xl" | "2xl""xl"Corner radius from the shape scale.
paddedbooleantrueInner content padding.
shadow"neutral" | "pink""neutral"Shadow token pair. Structural cards should stay neutral.
asElementType"div"Pass Link from next/link to make the whole card navigable.
hrefstring—Only meaningful when as renders an anchor.
onClick() => void—Makes the card a click target; adds the focus-visible ring automatically.

Accessibility

  • A plain <div> unless onClick/href is passed — then it's a real focusable, clickable surface with a focus-visible ring equivalent to its hover state, not the browser default outline.
  • Title renders as an h3; nest inside a page's own heading hierarchy accordingly.

Reduced motion

The only motion is the hover shadow transition, which is a colour/opacity change, not a transform — nothing to disable under prefers-reduced-motion: reduce.

When to use

  • Any content that's fundamentally title + description + optional action
  • The starting point before reaching for a more specific structural card

When not to use

  • Content with its own top-level media — use Media Card or Horizontal Card instead