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.
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 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}.
Split panels
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.