EntityHeader

Source

Edit

Simple

Francesca DiMattio

<EntityHeader name="Francesca DiMattio" />

With image

Francesca DiMattio

<EntityHeader
  image={{
    src: "https://picsum.photos/45/45",
    srcSet: "https://picsum.photos/45/45 1x, https://picsum.photos/90/90 2x",
    lazyLoad: true,
  }}
  name="Francesca DiMattio"
/>

Fallback with initials

When no imageURL is provided it will defer to the initials prop:

FD

Francesca DiMattio

American, b. 1979

<EntityHeader
  initials="FD"
  name="Francesca DiMattio"
  meta="American, b. 1979"
  href="http://www.artsy.net/artist/francesca-dimattio"
/>

Smaller version

When smallVariant prop is provided:

FD

Francesca DiMattio

<EntityHeader
  smallVariant
  initials="FD"
  name="Francesca DiMattio"
  image={{
    src: "https://picsum.photos/30/30",
    srcSet: "https://picsum.photos/30/30 1x, https://picsum.photos/60/60 2x",
    lazyLoad: true,
  }}
  href="http://www.artsy.net/artist/francesca-dimattio"
/>

Custom follow button

FD

Francesca DiMattio

American, b. 1979

<Box width={500} border="1px solid" borderColor="black10" p={2}>
  <EntityHeader
    image={{
      src: "https://picsum.photos/45/45",
      srcSet: "https://picsum.photos/45/45 1x, https://picsum.photos/90/90 2x",
      lazyLoad: true,
    }}
    initials="FD"
    name="Francesca DiMattio"
    meta="American, b. 1979"
    href="http://www.artsy.net/artist/francesca-dimattio"
    FollowButton={
      <Button size="small" variant="secondaryOutline">
        Follow
      </Button>
    }
  />
</Box>

On this page

Simple

With image

Fallback with initials

Smaller version

Custom follow button