Section

Does this page need improvement? Let us know.

Sometimes we miss things. We rely on user feedback to tell us how we're doing.

Sections are the biggest building blocks of web pages. They establish padding, but not content width, which is controlled by containers.

Example Instance

<Section padding="none">
  <div>{someChildren}</div>
</Section>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add section` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
container	no	React.ReactNode	Optional wrapper or layout element inside the section	undefined
padding	no	SpacingSize	Applies uniform padding to all sides	undefined
pb	no	SpacingSize	Padding on the bottom	undefined
pl	no	SpacingSize	Padding on the left	undefined
pr	no	SpacingSize	Padding on the right	undefined
pt	no	SpacingSize	Padding on the top	undefined
px	no	SpacingSize	Shorthand for left and right padding	undefined
py	no	SpacingSize	Shorthand for top and bottom padding	undefined

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported

Ask the LiftKit Devs