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.

UsageAPI

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:

ReactVanilla

<BoundedContent>Grid content goes here</BoundedContent>

<BoundedContent>Grid content goes here</BoundedContent>

<div class="swan-bounded-content">
  <!-- does not have to be a div tag -->
  <!-- grid container(s) go here -->
</div>

<div class="swan-bounded-content">
  <!-- does not have to be a div tag -->
  <!-- grid container(s) go here -->
</div>

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?

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