Regular Section

Full-width sections with optional inner containers for flexible content layouts

Current Configuration
Different section configurations used on this page
Regular Section:
<Section withContainer containerSize="2xl" containerPadding>
  {children}
</Section>
Full Bleed Section:
<Section bleed withContainer className="bg-blue-50">
  {children}
</Section>
No Container Section:
<Section withContainer={false}>
  {children}
</Section>
Full Bleed Section

The section background extends to the full viewport width, but the content is still contained within a container for readability. This is perfect for creating visual separation between content blocks.

Feature 1

Content is contained within the container while the background extends full width.

Feature 2

Content is contained within the container while the background extends full width.

Feature 3

Content is contained within the container while the background extends full width.

Available Props
Customize the Section behavior
bleedboolean | "x" | "y"default: false

Enable full-width bleed (break out of container). Can be horizontal, vertical, or both.

withContainerbooleandefault: true

Wrap content in Container component

containerSizeContainerSizedefault: "xl"

Container size (when withContainer=true)

containerPaddingbooleandefault: true

Enable container padding (when withContainer=true)

Gradient Background

Use the bleed prop to create full-width backgrounds with gradients, images, or solid colors while keeping your content contained and readable.

Hero Sections
Full-width backgrounds with centered content

Use bleed with a background image or gradient for impactful hero sections.

Content Blocks
Separate sections with different backgrounds

Alternate between full-bleed and regular sections to create visual rhythm and hierarchy.

Call-to-Action
Highlight important actions

Use colored backgrounds with bleed to draw attention to CTAs and important messaging.

Feature Showcases
Display features in contained sections

Keep feature content contained while using backgrounds to create visual separation.