Panel
EuiPanel is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like
EuiPage, EuiPopover and EuiCard.Component
Default
Panels have several possible style combinations with color, borders, and shadow. Use them sparingly and favor the default.
Split
EuiSplitPanel is a composition of an outer and multiple inner EuiPanels. It is a namespaced component that you consume using
EuiSplitPanel.Outer and EuiSplitPanel.Inner respectively. You can supply the same panel props to both components with the exception of a few to ensure the visual layout is correct. It also has two directions, column (default) and row.
For custom responsiveness, you can adjust at which breakpoints a row layout will stack by passing a new array of breakpoint names ['xs', 's'] to the responsive prop, or completely turn it off with false.
Usage
Padding
The most basic use is to simply add padding around your content.
Shadow and border
EuiPanel can give depth to your container with hasShadow while hasBorder can add containment. Just be sure not to include too many [nested panels](#guidelines with these settings.
Certain allowed combinations of shadow, border, and color depend on the current theme.
For instance, only plain or transparent panels can have a border and/or shadow. The default theme doesn't allow combining the hasBorder option with hasShadow.
Colors and corners
Use color to add background shading to your panel and provide an additional helpful aesthetic to your container in context. Be mindful to use color sparingly. You can also remove the rounded corners depending on the placement of your panel with borderRadius="none"
Passing color="transparent" can give you a quick empty box simply for adding padding to all sides.
Growing height
Using EuiPanel in an EuiFlexItem will always grow its height to match. This is great for rows of panels. However, you can also turn this feature off by setting grow={false}.
Guidelines
Nesting panels
Panels are one of the basic building blocks of EUI and have a wide variety of styles. They are a great tool to help segment and group content. But as layouts grow in complexity, nesting panels becomes necessary and it can sometimes be difficult to decide what style combinations make sense within a panel stack.
The following are some guidelines that are meant to help reduce the design choices necessary when nesting panels within panels.
Card 1
Cards are panels too.
Card 2
Cards are panels too.
Card 3
Cards are panels too.
Nesting three or more panels
If the same style panel is used between multiple nested panels, the hierarchy can be visually confusing and the benefit of panels breaks down. While there is no hard and fast rule in which sequence of panels styles should be used, varying the styles will help guide the user through the content relationship.
Do: Break up stacked panel styles with different style combinations.
Don't: Too many of same panel style in a stack of panels (3+ deep) isn't helpful.
Do not overuse panels
It’s easy to fall into the thinking that everything needs a panel. Carefully consider why you need a panel and if too many elements are fighting for attention.
Do: Reserve panels for drawing attention to certain elements.
Do: Remove panel styles but keep the component purely for containment.
Limit the use of shadows
Shadows are great for drawing focus to a single single layer of a page. But if everything has a shadow it becomes too noisy. Use shadows sparingly and try to use them at either the top or bottom of the stack.
Do: Minimize shadows within a panel stack by removing the shadows from all but a single layer.
Don't: Stacking multiple shadowed panels is too noisy.
Sibling panels
When sibling panels have the same meaning and interaction, like cards, it is best to keep them all visually similar. On the other hand you can use panels to separate main from aside content. In this case, you will want to ensure visual prominence of the main content.
Card 1
Cards are panels too.
Card 2
Cards are panels too.
Do: Use the same styles for cards in a row.
Do: Only emphasize the main content panel.
Props
EuiPanel
Prop | Description and type | Default value |
|---|---|---|
Prop element# | Description and type Type: "button" | "div" | Default value |
Prop hasShadow# | Description and type Adds a medium shadow to the panel; boolean | Default value true |
Prop hasBorder# | Description and type Adds a slight 1px border on all edges. boolean | Default value false |
Prop paddingSize# | Description and type Padding for all four sides "xs" | "s" | "m" | "l" | "xl" | "none" | Default value m |
Prop borderRadius# | Description and type Corner border radius "m" | "none" | Default value m |
Prop grow# | Description and type When true the panel will grow in height to match boolean | Default value true |
Prop panelRef# | Description and type Type: Ref<HTMLDivElement> | Default value |
Prop color# | Description and type Background color of the panel; PanelColor | Default value plain |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiSplitPanel.Outer
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop children# | Description and type Any number of _EuiSplitPanelInner components ReactNode | Default value |
Prop direction# | Description and type Changes the flex-direction "column" | "row" | Default value column |
Prop responsive# | Description and type Stacks row display on small screens. false | string[] | Default value ['xs', 's'] |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop hasBorder# | Description and type Adds a slight 1px border on all edges. boolean | Default value |
Prop hasShadow# | Description and type Adds a medium shadow to the panel; boolean | Default value |
Prop borderRadius# | Description and type Corner border radius "m" | "none" | Default value |
Prop grow# | Description and type When true the panel will grow in height to match boolean | Default value |
Prop panelRef# | Description and type Type: Ref<HTMLDivElement> | Default value |
EuiSplitPanel.Inner
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop paddingSize# | Description and type Padding for all four sides "xs" | "s" | "m" | "l" | "xl" | "none" | Default value |
Prop grow# | Description and type When true the panel will grow in height to match boolean | Default value |
Prop panelRef# | Description and type Type: Ref<HTMLDivElement> | Default value |