Section

Labeled page section with a heading.

import { Section } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

Prop	Type	Default	Description
`bg`	`'default' \| 'muted' \| 'accent' \| 'gradient'`	`'default'`	Background variant
`py`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'lg'`	Vertical padding size
`maxWidth`	`string`	`'1200px'`	Maximum width of inner content
`fullBleed`	`boolean`	`false`	Remove inner container constraint (full-width content)
`children` *	`JSX.Element`	—	Content to render inside the section
`class`	`string`	—	Additional CSS classes
`style`	`JSX.CSSProperties`	—	Inline styles
`as`	`string`	`'section'`	HTML element to render as

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.