How It Works
The FullBleedSection component uses CSS techniques to allow content to break out of constrained containers set usually in the root layout.tsx. It sets width to 100vw and uses transform to center it, creating the full-bleed effect while maintaining content alignment with the rest of the page.
Example 1: Primary Background
This section visually breaks out of the max-w-2xl container, extending to the full width of the viewport. However, the content itself remains aligned with the rest of the page content thanks to the inner max-w-2xl container.
Notice how this text returns to the constrained width. The FullBleedSection above and below "escape" this container, creating visual interest while maintaining content alignment.
Example 2: With Cards
This example shows how you can use the FullBleedSection with card components. The section extends full-width, but the content remains aligned with the page.
Feature One
Cards are contained within the max-w-2xl container.
Feature Two
The background extends full-width while content stays aligned.
The text here is back to being constrained in the max-w-2xl container. This creates a rhythm between full-width sections and constrained content.
Example 3: True Full-Width Content
Unlike the examples above, this content has no max-width container inside the FullBleedSection. The scrollable cards below demonstrate content that truly spans the entire viewport width.