Section Frame

Decorative wrapper that adds subtle border lines around a rounded inset panel. The hairlines mark the section edges; the tinted panel floats inside them with 16px of breathing room and 24px rounded corners.

Default (All Lines)

Framed Section

Content inside the frame with subtle borders and background.

tsx

<SectionFrame>
  <div className="py-16 px-4">
    <h2>Framed Section</h2>
    <p>Content inside the frame.</p>
  </div>
</SectionFrame>

Horizontal Lines Only

Top and bottom lines without side borders.

tsx

<SectionFrame showSides={false}>
  <div>Content</div>
</SectionFrame>

Top Line Only

Single top divider line.

tsx

<SectionFrame showBottom={false} showSides={false}>
  <div>Content</div>
</SectionFrame>

No Background

Frame lines without the subtle background tint.

tsx

<SectionFrame showBackground={false}>
  <div>Content</div>
</SectionFrame>

Design Details

Horizontal Lines

Span full viewport width (edge to edge)

Vertical Lines & Background

Aligned to content max-width (1200px) with responsive padding

Line Color

var(--border-subtle) — ~8% foreground opacity. Matches other subtle borders across the system (dividers, card outlines).

Background Panel

var(--foreground-subtle), inset by var(--spacing-4) (16px) from each hairline with var(--radius-2xl) (24px) rounded corners.

Internal Content Padding

Children are wrapped in mx-auto max-w-[1200px] with px-4 sm:px-6 lg:px-8 so section content sits inside the rounded panel with consistent breathing room (~16px mobile, ~32px tablet, ~48px desktop) without each consumer having to bump its own padding.

Common Patterns

Section Divider

<SectionFrame showBottom={false} showSides={false}>

Full Frame (Technical Look)

<SectionFrame> — All props default to true

Content Band

<SectionFrame showSides={false}>

Props

Prop	Type	Default	Description
`showTop`	`boolean`	`true`	Show top border line
`showBottom`	`boolean`	`true`	Show bottom border line
`showSides`	`boolean`	`true`	Show left and right border lines
`showBackground`	`boolean`	`true`	Show subtle background tint
`className`	`string`	-	Additional CSS classes
`children`*	`ReactNode`	-	Section content

Import

tsx

import { SectionFrame } from '@/components/ui/SectionFrame'