# Grid List with Links

> A grid list with links block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/grid-list-02).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/grid-list-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/grid-list-02-light-55be9fc42bc61193.png
- Registry item: https://blocks.so/r/grid-list-02.json
- Categories: grid-list
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/grid-list-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `avatar`, `card`

## Files

### `content/components/grid-list/grid-list-02.tsx`

```tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card, CardContent } from '@/components/ui/card';

const people = [
  {
    name: 'Timur Ercan',
    email: 'timur@documenso.com',
    role: 'Co-Founder / CEO',
    imageUrl: 'https://blocks.so/avatar-02.png',
  },
  {
    name: 'Lucas Smith',
    email: 'lucas@documenso.com',
    role: 'Co-Founder / CTO',
    imageUrl: 'https://blocks.so/avatar-03.png',
  },
  {
    name: 'Ephraim Duncan',
    email: 'ephraim@documenso.com',
    role: 'Software Engineer',
    imageUrl: 'https://blocks.so/avatar-01.png',
  },
  {
    name: 'Catalin Pit',
    email: 'catalin@documenso.com',
    role: 'Software Engineer',
    imageUrl: 'https://blocks.so/avatar-04.png',
  },
];

export default function GridList02() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        {people.map((person) => (
          <Card
            className="relative border py-0 shadow-2xs transition-[border-color,box-shadow] duration-100 ease-out focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 hover:border-muted-foreground hover:shadow-sm"
            key={person.email}
          >
            <CardContent className="flex items-center space-x-4 p-4">
              <Avatar className="h-10 w-10">
                <AvatarImage alt={person.name} src={person.imageUrl} />
                <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="min-w-0 flex-1">
                <a className="focus:outline-none" href="#">
                  <span aria-hidden="true" className="absolute inset-0" />
                  <p className="text-pretty font-medium text-foreground text-sm">
                    {person.name}
                  </p>
                  <p className="truncate text-pretty text-muted-foreground text-sm">
                    {person.role}
                  </p>
                </a>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
```