Person
A person's avatar alongside their name, job title, and company.
import { Person } from "@sanity/sanity-id/components/person"Props
| Prop | Type | Description |
|---|---|---|
accentColor | "none" | "blue" | "green" | "magenta" | "yellow" | Accent color applied to the avatar border default value: "none" |
className | string | Additional CSS classes |
company | string | Company name displayed below the title |
image | string | ((props: ComponentProps<"img">) => ReactNode) | Avatar image URL or custom render function |
name | string | Person's display name |
rounded | boolean | Applies a circular crop to the avatar default value: false |
size | "small" | "medium" | "large" | Size of the avatar and text default value: "small" |
title | string | Job title displayed below the name |
Usage
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus Hillestad
CEO and co-founder
Sanity
Magnus HillestadCEO and co-founderSanity
1import { Person } from "@sanity/sanity-id/components/person"
2
3export default () => {
4 const person = {
5 name: "Magnus Hillestad",
6 image: "https://cdn.sanity.io/images/3do82whm/next/fc4624b219eb58749320e4fe96cd4d675045f568-200x200.jpg",
7 title: "CEO and co-founder",
8 company: "Sanity",
9 }
10 return (
11 <div className="grid grid-cols-[repeat(3,max-content)] gap-32 items-center">
12 <Person size="small" {...person} />
13 <Person size="medium" {...person} />
14 <Person size="large" {...person} />
15 <Person size="small" {...person} rounded />
16 <Person size="medium" {...person} rounded />
17 <Person size="large" {...person} rounded />
18 <Person size="small" {...person} image={undefined} />
19 <Person size="medium" {...person} image={undefined} />
20 <Person size="large" {...person} image={undefined} />
21 </div>
22 )
23 }
John Siciliano
Senior Technical Product Marketing Manager
Sanity
John Siciliano
Senior Technical Product Marketing Manager
Sanity
John Siciliano
Senior Technical Product Marketing Manager
Sanity
John Siciliano
Senior Technical Product Marketing Manager
Sanity
1import { Person } from "@sanity/sanity-id/components/person"
2
3export default () => {
4 return (
5 <div className="grid gap-y-12">
6 <Person
7 accentColor="blue"
8 name="John Siciliano"
9 title="Senior Technical Product Marketing Manager"
10 company="Sanity"
11 image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
12 />
13 <Person
14 accentColor="green"
15 name="John Siciliano"
16 title="Senior Technical Product Marketing Manager"
17 company="Sanity"
18 image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
19 />
20 <Person
21 accentColor="magenta"
22 name="John Siciliano"
23 title="Senior Technical Product Marketing Manager"
24 company="Sanity"
25 image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
26 />
27 <Person
28 accentColor="yellow"
29 name="John Siciliano"
30 title="Senior Technical Product Marketing Manager"
31 company="Sanity"
32 image="https://cdn.sanity.io/images/3do82whm/next/13186e6ee1bd8fdb19c65992cb4b633b5018af63-2048x2048.png"
33 />
34 </div>
35 )
36 }