Lambchop
Layout

Section

Page section wrapper with default, muted, and bordered variants.

import { Section } from "lambchop";

Live Demo

Default Section

Standard section with container.

Muted Section

Subtle background tint.

Bordered Section

Industrial border-y-2 styling.

Usage

import { Section } from "lambchop";

<Section>
  <h2>Default Section</h2>
  <p>Content with built-in container.</p>
</Section>

<Section variant="muted">
  <h2>Muted Background</h2>
</Section>

<Section variant="bordered" noContainer>
  <h2>Full-width bordered section</h2>
</Section>

Props

PropTypeDefaultDescription
variant"default" | "muted" | "bordered""default"Visual style variant
noContainerbooleanfalseSkip the built-in max-width container
classNamestringAdditional CSS classes

Variants

  • Default — Standard section with vertical padding
  • Muted — Subtle background tint for visual separation
  • Bordered — Industrial border-top and border-bottom