<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Bounded Content

The Bounded Content component is used to constrain the width of your page content. It puts a maximum width on that content and puts in a small amount of horizontal spacing to keep the content from touching the edges of the browser window.

Use Bounded Content...

  • To wrap all page content that should have a maximum width and shouldn’t touch the edges of the browser window.

Don't use Bounded Content...

  • To wrap any content that should span the full browser window, such as the header, footer, or many banners.
  • To add horizontal spacing to components or inside other page content. Use the Spacing system instead.

Use BoundedContent to put a maximum width on page content. It also adds horizontal spacing to keep content from touching the edges of the browser window. It should wrap most content, including any content in Grids. Exceptions include the header, footer, and content in the hero zone.

Here's an example of how Bounded Content affects page content. The black border indicates the edges of the browser window:

The preview has been updated.

Share
Share

Props

BoundedContent
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 31, 2022Last updated: Sep 18, 2024