Section Layout
The Section Layout component wraps a section of content with a max-width, is centered horizontally, and includes padding.
Installation
Install the following dependencies
npm install clsxCopy and paste the following code into your project
sections/section-layout/index.tsx
import { clsx } from 'clsx';import { ReactNode } from 'react';export interface SectionLayoutProps { className?: string; children: ReactNode; containerSize?: 'md' | 'lg' | 'xl' | '2xl' | 'full';}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --section-max-width-medium: 768px; * --section-max-width-lg: 1024px; * --section-max-width-xl: 1280px; * --section-max-width-2xl: 1536px; * } * ``` */export function SectionLayout({ className, children, containerSize = '2xl' }: SectionLayoutProps) { return ( <section className={clsx('overflow-hidden @container', className)}> <div className={clsx( 'mx-auto px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20', { md: 'max-w-[var(--section-max-width-md,768px)]', lg: 'max-w-[var(--section-max-width-lg,1024px)]', xl: 'max-w-[var(--section-max-width-xl,1280px)]', '2xl': 'max-w-[var(--section-max-width-2xl,1536px)]', full: 'max-w-none', }[containerSize], )} > {children} </div> </section> );}Usage
import { SectionLayout } from '@/vibes/soul/sections/section-layout';function Usage() { return ( <SectionLayout containerSize="md"> <div>My section content</div> </SectionLayout> );}API Reference
SectionLayoutProps
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
className | string | |
containerSize | 'md' | 'lg' | 'xl' | '2xl' | 'full' |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --section-max-width-medium: 768px; --section-max-width-lg: 1024px; --section-max-width-xl: 1280px; --section-max-width-2xl: 1536px;}