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 consistent width for a section by applying a maximum width and horizontal padding. It controls how a section sits within the page.
Grid is often used directly inside BoundedContent to structure content into columns and rows. It controls how content is laid out within that section.
Grids when used, should always be placed inside Bounded Content. This ensures that the layout structure provided by the Grid still follows the page’s width and spacing constraints.
Examples:
BoundedContent>GridContainer>Row>Column> Content and Components. This is important for maintaining consistent content alignment between pages.BoundedContent> Content and Components.
See Page Layout for guidance on using Bounded Content with other layout components.
Full-width Background Section
Use BoundedContent within of full-width boxes to keep the content inside aligned to the rest of the page.
- Apply the background color to a container element outside BoundedContent.
- Place content inside BoundedContent so it follows the page’s max width and horizontal padding.
- Use Grid inside BoundedContent to lay out the content if needed.
This ensures full‑width sections look wide, but the content remains consistently aligned with the page layout.
The preview has been updated.
Ubik
If required, Ubik fragments can be exported wrapped inside of a BoundedContent.
