Panel guidelines
So you want to nest 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.
When nesting 3 or more panels, use different panel styles
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.
Limit the use of shadows within a stack of panels
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.
Don’t 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.
Consider the relationship between 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.