<Box component="span" aria-hidden> ... </Box>
<Box className={[styles.firstClass, styles.secondClass, styles.thirdClass]}> ... </Box>
<Box data={{ testid: "customIdentifier", }} // => data-testid="customIdentifier" > ... </Box>
<Box display="flex" justifyContent={{ mobile: "center", tablet: "flexStart" }} position="absolute" top={0} left={0} width="full" height="full" > ... </Box>
<Box paddingX="gutter" paddingY="large"> ... </Box>
<Box background="brand">...</Box>
<Box boxShadow="large">...</Box>