FullBleed

The <FullBleed> component allows you to break out of a container and stretch to fill the full width of the browser. Useful for headers, dividing lines, and more.

Content inside of a container
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate adipisci omnis.
<Box bg="black5" maxWidth={900} mx="auto" px={2} py={1}>
  <Text my={2} variant="md">
    Content inside of a container
  </Text>
  <FullBleed bg="blue10" px={2} py={1}>
    <Text my={2} variant="md">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic mollitia
      temporibus delectus cum, laudantium deleniti! Fugiat explicabo velit
      accusamus, libero quod, ipsum nisi non nihil praesentium, optio cupiditate
      adipisci omnis.
    </Text>
  </FullBleed>
</Box>