--- meta: title: Panel description: Panels are versatile containers that provide structure for organizing content with optional headers and footers. layout: component --- Panels are a fundamental component in the Zinc framework, providing a structured container for displaying content with consistent styling, borders, and spacing. They support various layouts including headers with actions and footers. ```html:preview Awesome example
  • Customer
  • Something Else
    •      Some awesome footer information     ``` ## Examples ### Basic Panel Basic panels provide a simple container with consistent borders, rounded corners, and background styling. The panel can display a caption and description in its header. ```html:preview
    Panel Content
     ``` ### Panel with Icon Use the `icon` attribute to add an icon to the panel header. ```html:preview

    Panel content goes here

     ``` ### Actions Slot Use the `actions` slot to add action buttons or chips to the panel header. ```html:preview Edit Delete

    Project content here

     ``` ### Footer Slot Use the `footer` slot to add footer content to the panel. ```html:preview

    Main content area

    Save Cancel
    ``` ### Header Underline Use the `header-underline` attribute to add a border beneath the header. ```html:preview

    Panel content with underlined header

     ``` ### Flush Panels The `flush` attribute removes all padding from the panel body, allowing content to extend to the edges. This is ideal for components like tabs or data tables that manage their own spacing. ```html:preview ``` ### Flush X and Flush Y Use `flush-x` to remove horizontal padding or `flush-y` to remove vertical padding. ```html:preview
    Content extends horizontally to edges

    Content extends vertically to edges
    ``` ### Flush Footer Use `flush-footer` to remove padding from the footer slot. ```html:preview
    Main content with normal padding
    Footer with custom padding
    ``` ### Tabbed Panels Use the `tabbed` attribute for panels containing tabs. This automatically removes body padding and applies flush styling to nested tabs. ```html:preview Awesome example
  • Customer
  • Something Else
    •      Some awesome footer information     ``` ### Transparent Panels Use the `transparent` attribute to remove the panel background and border, creating a borderless container. ```html:preview
    Content in transparent panel
    ``` ### Shadow Panels Use the `shadow` attribute to add a prominent drop shadow to the panel. ```html:preview
    Content with enhanced shadow
    ``` ### Moving the Caption When using tabs, you can move the caption to the tabs component instead of the panel header. ```html:preview
  • Customer
  • Something Else
    •      Some awesome footer information     ``` ### Cosmic Panel Use the `cosmic` attribute to add an animated cosmic border effect to the panel. ```html:preview Some awesome footer information ``` ### Basis Width Use the `basis-px` attribute to set a custom flex-basis width for the panel in pixels. ```html:preview
    300px basis
    500px basis
    ``` ### Combining Features All panel features can be combined to create rich, complex layouts. ```html:preview Configure

    Dashboard Overview

    This panel combines header actions, icons, underline, and shadow effects.

    Save Changes Cancel
    ``` ## Usage Notes ### Layout Behavior Panels are designed to work within flexible layouts. They have a default `flex-grow: 1` and respond to their container's sizing. Use `basis-px` to control the initial width when using multiple panels in a flex layout. ### Automatic Tab Handling When a panel contains a `zn-tabs` component and the `tabbed` attribute is not set, the panel automatically applies `flush-x` to the tabs and adjusts body styling to remove top padding. ### Header Display The panel header only renders when one of the following conditions is met: - A `caption` is provided - The `actions` slot has content ### CSS Custom Properties The following CSS custom properties can be used to customize the panel: - `--zn-panel-basis` - Controls the flex-basis of the panel (set via `basis-px` attribute)