Section

Overview

A generic section wrapper that centers content within a max-width container. Supports preset padding sizes, named background colors, custom image/gradient backgrounds, and entrance animations.

Usage

import { Section } from "@leanicon/web-builder-library";

Default

Default padding (lg) and max-width (xl) with transparent background.

Section content goes here

Padding sizes

padding="none"

padding="sm"

padding="md"

Max width

maxWidth="sm" (max-w-2xl)

maxWidth="full"

Muted background

Muted background content

Primary background

Primary background content

Dark background

Dark background content

Gradient background

Gradient background content

Image background

Image background content

With animation

Fades in when scrolled into view

Dark mode

Dark mode content

Muted — dark mode

Muted dark mode content

Props

Prop	Type	Default	Description
`as`	`"section" \| "div" \| "article"`	`"section"`	HTML element tag
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`"lg"`	Vertical padding
`maxWidth`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"xl"`	Max-width of the inner container
`background`	`string \| { image: string } \| { gradient: string }`	`"transparent"`	Background style
`animation`	`SectionAnimation?`	—	Entrance animation config
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`children`	`React.ReactNode`	—	Section content (required)
`className`	`string`	—	Additional CSS classes on root

Background options

Value	Result
`"transparent"`	No background
`"muted"`	`bg-muted`
`"primary"`	`bg-primary text-primary-foreground`
`"dark"`	`bg-foreground text-background`
`{ gradient: "..." }`	Inline `background` CSS property
`{ image: "url(...)" }`	Inline `backgroundImage` CSS property

Notes

maxWidth maps to Tailwind max-w-* classes: sm = 2xl, md = 4xl, lg = 5xl, xl = 7xl, full = full.
Named backgrounds use CVA variants; object backgrounds use inline styles.
Animation is disabled automatically when the user prefers reduced motion.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.

Props

Name	Type	Default	Required	Description
`as`	`enum`	`section`	No
`padding`	`"none" \| "sm" \| "lg" \| "md" \| "xl" \| null`	`lg`	No
`width`	`enum`	—	No
`maxWidth`	`enum`	—	No	@deprecated renamed to `width`. Still honoured for the showcase demos.
`background`	`"primary" \| "dark" \| SectionBackgroundName \| "transparent" \| "muted" \| "muted/50" \| "muted/30" \| { image: string; } \| { gradient: string; }`	`inherit`	No	A named band, or an escape hatch for a bespoke image/gradient. @deprecated the object and legacy-string forms — prefer a named background so the alternation rule and the theme scope can be reasoned about.
`cut`	`enum`	`none`	No
`watermark`	`boolean`	`false`	No	Pattern B — the oversized mark, bled off the edge at ~7% ink.
`backgroundImage`	`{ src: string; alt?: string; } \| null`	—	No	A photographic band. Rendered as a `SmartImage` layer rather than through the `{ image }` background form, which sets `background-image` verbatim — no `cover`, no centering, and none of the optimiser.
`backgroundOverlay`	`enum`	`dark`	No	Scrim over that image. `dark` also flips the token scope, because heading text at default weight is not legible over an arbitrary photo.
`animation`	`SectionAnimation`	—	No
`colorScheme`	`enum`	—	No
`className`	`string`	—	No