Skip to main content
A responsive grid list component that displays people or team members in a card layout with avatars. Each card is fully clickable as a link, with hover and focus states.

​
Installation

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

​
Dependencies

This component requires the following dependencies:
  • avatar - shadcn/ui avatar component
  • card - shadcn/ui card component

​
Usage

import GridList02 from "@/components/grid-list-02";

export default function Page() {
  return <GridList02 />;
}

​
Component Code

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

const people = [
  {
    name: "Timur Ercan",
    email: "[email protected]",
    role: "Co-Founder / CEO",
    imageUrl: "https://blocks.so/avatar-02.png",
  },
  {
    name: "Lucas Smith",
    email: "[email protected]",
    role: "Co-Founder / CTO",
    imageUrl: "https://blocks.so/avatar-03.png",
  },
  {
    name: "Ephraim Duncan",
    email: "[email protected]",
    role: "Software Engineer",
    imageUrl: "https://blocks.so/avatar-01.png",
  },
  {
    name: "Catalin Pit",
    email: "[email protected]",
    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
            key={person.email}
            className="relative border transition-[border-color,box-shadow] duration-100 ease-out hover:border-muted-foreground hover:shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 py-0"
          >
            <CardContent className="flex items-center space-x-4 p-4">
              <Avatar className="h-10 w-10">
                <AvatarImage src={person.imageUrl} alt={person.name} />
                <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="min-w-0 flex-1">
                <a href="#" className="focus:outline-none">
                  <span aria-hidden="true" className="absolute inset-0" />
                  <p className="text-pretty text-sm font-medium text-foreground">
                    {person.name}
                  </p>
                  <p className="text-pretty truncate text-sm text-muted-foreground">
                    {person.role}
                  </p>
                </a>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

​
Features

  • Responsive grid layout (1 column on mobile, 2 columns on larger screens)
  • Avatar component with fallback support
  • Entire card is clickable using stretched link technique
  • Smooth hover transitions for border and shadow
  • Focus ring for keyboard navigation
  • Accessible with proper semantic HTML

​
Customization

You can customize this component by:
  • Replacing the people array with your own data
  • Adjusting the grid layout with grid-cols-* classes
  • Modifying avatar size with the h-* and w-* utilities
  • Changing transition effects and hover states
  • Adding additional information fields to the cards
  • Implementing actual navigation with Next.js Link or React Router

Build docs developers (and LLMs) love

Get started for freeTalk to us