Overview

These two layout components work together to structure the main documentation content area.

ContentPanel

A wrapper component that provides consistent padding and max-width constraints around page content.

Props

ContentPanel uses a slot pattern — it accepts children via a default slot.

CSS Classes

• .content-panel — Main wrapper
• .sl-container — Max-width container with horizontal padding

TwoColumnContent

A responsive layout component that creates a two-column structure: main content on the left, and an optional right sidebar (table of contents) on the right.

Props

Prop	Type	Description
hasToc	boolean	Whether to render the right sidebar column for the table of contents

CSS Classes

• .lg:sl-flex — Flexbox on large screens
• .right-sidebar-container — Right column wrapper
• .right-sidebar — Sticky right sidebar
• .main-pane — Left column with main content
• .print:hidden — Right sidebar hidden in print

Responsive Behavior

Screen Size	Layout
Mobile	Single column, TOC moves above content
Large (lg:)	Two columns side by side
Print	Right sidebar hidden

How They Fit Together

Page
  └── PageFrame
        ├── Header
        ├── Sidebar (left navigation)
        └── TwoColumnContent
              ├── ContentPanel
              │     └── MarkdownContent (your MDX)
              └── Right Sidebar
                    └── TableOfContents