SectionWrapper

layout

A responsive layout wrapper for page sections. Handles max-width constraints and consistent horizontal padding across breakpoints.

SectionWrapper

Consistent max-width and padding across breakpoints

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { SectionWrapper } from "piece-ui";

2Usage

Basic usage

tsx

1import { SectionWrapper } from "piece-ui";
2
3export default function Example() {
4  return (
5    <SectionWrapper>
6      <h2>Section Title</h2>
7      <p>Section content goes here...</p>
8    </SectionWrapper>
9  );
10}

3Props

Prop	Type	Default	Description
`children`req	`React.ReactNode`	—	Section content.
`className`	`string`	—	Additional CSS classes.
`as`	`React.ElementType`	`"section"`	HTML element to render as.

SocialIcon

SectionHeader