export default function Example() { return ( <Box css={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%", gap: "$100", }} > <Avatar size="200"> <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> <Avatar size="300"> <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> <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> <Avatar size="500"> <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> </Box> ); }