export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        gap: "$100",
      }}
    >
      <img
        height="64"
        src="https://i.pravatar.cc/300"
        alt="An avatar is an atomic component that represents an individual’s identity through a circular photo."
      />
      <Avatar size="400">
        <img
          src="https://i.pravatar.cc/300"
          alt="An avatar is an atomic component that represents an individual’s identity through a circular photo."
        />
      </Avatar>
      <img
        width="64"
        height="96"
        src="https://images.pexels.com/photos/2220401/pexels-photo-2220401.jpeg?dpr=2"
        alt="A 64px wide and 96 pixel high image."
      />
      <Avatar size="400">
        <img
          width="64"
          height="96"
          src="https://images.pexels.com/photos/2220401/pexels-photo-2220401.jpeg?dpr=2"
          alt="A 64px wide and 96 pixel high image."
        />
      </Avatar>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape