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> ); }