# Card
A container that groups related content and actions on a surface.
---
## Default
```tsx
import { Card } from '@vercel/geistcn/components';
import type { JSX } from 'react';
export function Component(): JSX.Element {
return (
A simple card
);
}
```
## Hover
```tsx
import { Card } from '@vercel/geistcn/components';
import type { JSX } from 'react';
export function Component(): JSX.Element {
return (
A simple card
);
}
```
## Border
```tsx
import { Card } from '@vercel/geistcn/components';
import type { JSX } from 'react';
export function Component(): JSX.Element {
return (
A simple card
);
}
```
## Border Between
```tsx
import { Card } from '@vercel/geistcn/components';
import type { JSX } from 'react';
export function Component(): JSX.Element {
return (
Option 1
Option 2
Option 3
);
}
```
## Border Between Vertical
```tsx
import { Card } from '@vercel/geistcn/components';
import type { JSX } from 'react';
export function Component(): JSX.Element {
return (
Option 1
Option 2
Option 3
);
}
```
## Secondary
```tsx
import { Card } from '@vercel/geistcn/components';
import type { JSX } from 'react';
export function Component(): JSX.Element {
return (
Option 1
Option 2
Option 3
);
}
```