Org Chart

About this piece

Mini org-chart card with a manager node branching down into three direct-report avatars.

Usage

The import and the props worth knowing about, in one place.

import { Card24 } from "@/components/beste/piece/card24";

<Card24
  manager={{
    "name": "Max Richter",
    "role": "VP Engineering",
    "initials": "MR",
    "image": "https://images.unsplash.com/photo-1611695434369-a8f5d76ceb7b?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjQ3fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
  }}
  reports={[
    {
      "name": "Kelly Moran",
      "role": "Staff eng",
      "initials": "KM",
      "image": "https://images.unsplash.com/photo-1558507652-2d9626c4e67a?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjU5fHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
    },
    {
      "name": "Peter Broderick",
      "role": "Design lead",
      "initials": "PB"
    },
    {
      "name": "Anne Müller",
      "role": "Sr. PM",
      "initials": "AM",
      "image": "https://images.unsplash.com/photo-1674932668403-33398b81c92f?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjYzfHxwb3J0cmFpdHxlbnwwfHwwfHx8MA%3D%3D"
    }
  ]}
  bordered={false}
/>