# Card

Card is a neobrutalist React component from Cruise UI. A bordered box with an optional --primary header strip; clickable when it has a link.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/card
```

Import: `import { CruiseCard } from "@/components/cruise/card";`

## When to use

Grouping one item's details: a product, a route, a plan.

## When not to

Page sections (use plain sections with dividers). Wrapping a single line of text.

## Example (React)

```tsx
import { CruiseCard } from "@/components/cruise/card";

export default function CardExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <CruiseCard title="Oshodi – CMS">9 stops · ₦800 · every 15 minutes</CruiseCard>
      <CruiseCard title="Ikeja – Yaba" href="#routes">
        7 stops · ₦600. The whole card is a link.
      </CruiseCard>
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<article class="brutal" style="padding: 24px">
  <h3>Oshodi – CMS</h3>
  <p>9 stops · ₦800</p>
</article>
```

## Props: CruiseCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title?` | `ReactNode` | — | Shown in a full-width --primary header strip. Omit for no strip. |
| `children` | `ReactNode` | — | — |
| `href?` | `string` | — | Makes the whole card a link that moves on hover/active. |
| `className?` | `string` | — | — |
| `style?` | `CSSProperties` | — | — |

## Accessibility

- A clickable card is one link (the whole card), not nested links.
- The title is a heading, so people can jump between cards.