Section Frame

Decorative wrapper that adds subtle border lines and background tint to content sections. Creates a framed, technical aesthetic.

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>

Top and bottom lines without side borders.

tsx

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

Single top divider line.

tsx

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

Frame lines without the subtle background tint.

tsx

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

Horizontal Lines

Span full viewport width (edge to edge)

Vertical Lines & Background

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

Line Color

var(--foreground-subtle) — ~5% foreground opacity

Background Color

var(--foreground-subtle) — ~5% foreground opacity

Section Divider

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

Full Frame (Technical Look)

<SectionFrame> — All props default to true

Content Band

<SectionFrame showSides={false}>

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

tsx

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