--- meta: title: Pane description: A flexible container component for organizing content with optional headers and automatic overflow handling. layout: component --- Panes are versatile container components designed to manage content layout with automatic scrolling, flexible display, and seamless integration with headers. They serve as the primary building blocks for organizing page content in a structured, scrollable format. ```html:preview

This is the main content area of the pane. It will automatically scroll when the content exceeds the available space.

The pane component provides a flexible container with built-in overflow handling and padding.

You can add any content here, and it will be properly contained within the pane.
``` ## Examples ### Basic Pane A simple pane with default padding displays content in a flexible, scrollable container. The pane automatically manages overflow and applies standard spacing around the content. ```html:preview

This is a basic pane with default padding.

Content is automatically wrapped with the standard spacing.

The pane will scroll if content exceeds the available height.
``` ### Pane with Header When a `zn-header` is included as a child element, the pane automatically integrates it as a sticky header at the top. The header remains visible while scrolling through the content. ```html:preview
Save Cancel

Customer Information

Name: John Smith

Email: john.smith@example.com

Phone: (555) 123-4567

Address

123 Main Street

Anytown, ST 12345

Order History

Total Orders: 15

Last Order: 2025-01-15
``` ### Flush Pane Use the `flush` attribute to remove all padding from the content area. This is useful when working with components that need to extend to the edges of the pane, such as tables, tabs, or other full-width layouts. ```html:preview
  • Overview
  • Details
  • Settings
    •

    Overview Tab

    This content extends to the edges of the pane.

    No extra padding around the tabs component.

    Details Tab

    Details content goes here.

    Settings Tab

    Settings content goes here.
    ``` ### Scrollable Content Panes automatically handle overflow with scrollbars when content exceeds the available height. The header remains sticky while content scrolls beneath it. ```html:preview

    Section 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Section 2

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Section 3

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Section 4

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Section 5

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

    Section 6

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.
    ``` ### Nested Panes Panes can be nested within layouts or other container components to create complex, multi-section interfaces with independent scrolling regions. ```html:preview

    Navigation

    • Dashboard
    • Customers
    • Orders
    • Products
    • Reports
    • Settings
    Action

    Content Area

    This is the main content area with independent scrolling.

    Each pane manages its own overflow and scrolling behavior.

    You can have multiple panes side by side or stacked vertically.
    ``` ### Flush Pane with Data Table A common pattern is using a flush pane with data tables or other components that manage their own spacing and borders. ```html:preview
    Add Customer
    Customer 1 - john@example.com
    Customer 2 - jane@example.com
    Customer 3 - bob@example.com
    Customer 4 - alice@example.com
    Customer 5 - charlie@example.com
    ``` ### Full Height Layout Panes are designed to work within full-height layouts, automatically expanding to fill the available space and managing overflow appropriately. ```html:preview
    Refresh

    Recent Activity

    New user registration: john.doe@example.com

    Order placed: #12345

    Payment received: $99.99

    Support ticket opened: #456

    System Status

    All systems operational

    Last backup: 2025-01-23 02:00 AM

    Uptime: 99.9%
    ```