Bounded Content

Sets a maximum width and outer padding for page content.

UsageGuidelinesAPI

Use Bounded Content...

To constrain page content to a maximum width.

Don't use Bounded Content...

To constrain full-width elements such as headers, footers, or Banners.
To add horizontal space to components. Use Space instead.

Bounded Content

Use BoundedContent to set a maximum width and outer padding for page content. All content inside it must be placed within a Grid, including full-width content.

Do: BoundedContent > GridContainer > Row > Column > Content and Components
Do not: BoundedContent > Content and Components

This is important for maintaining consistent content alignment between pages.

See Page Layout for guidance on using Bounded Content with other layout components.

ReactVanilla

<BoundedContent>Grid Container goes here</BoundedContent>

<BoundedContent>Grid Container 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>

Bounded Content can be placed inside of full-width boxes to keep the content inside aligned to the rest of the page content.

Bounded Content inside a full-width element

Ubik

If required, Ubik fragments can be exported wrapped inside of a BoundedContent.

Consistency of page layouts

When used correctly, Bounded Content creates consistent alignment of content between pages. This is important for creating a cohesive user experience.

Do not adjust the width of Bounded Content.

Do not use Bounded content to wrap anything other then the highest page level content.

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.