The panel (lk-panel)—and the related header (lk-panel-header), body (lk-panel-body) and footer (lk-panel-footer)—components are the primary means of dividing content into distinct visual sections.
Content in a panel-body component.
Some more content in another panel-body component.
The Panel component implements the margin-bottom is set without any value.
By default the panel has no shadow applied to it. We can add and control the strength of the shadow using the shadow-deep, shadow-medium and shadow-shallow props.
Panel with the shadow-deep prop.
Some more content in another panel-body component.
Panel with the shadow-medium prop.
Some more content in another panel-body component.
Panel with the shadow-shallow prop.
Some more content in another panel-body component.
To make the panel stand out we can make the color of the panel's border darker by using the highlighted prop.
Panel with the highlighted prop.
Some more content in another panel-body component.
The Panel Header component (lk-panel-header)…
Panel body content.
Panel body content.
While not recommended (it is often better to use a distinct panel to separate blocks of content), the panel header can also be used at any point in the panel to distinguish sections.
Panel body content.
Panel body content.
The actionItems slot can be used to place buttons in the panel header.
Panel body content.
The muted or highlighted props can be used to give the panel header a shaded background color.
Panel body content.
Panel body content.
The compact prop can be used to have the panel header using a smaller font size with less spacing.
Panel body content.
Panel body content.
The panel body component (lk-panel-body) is used to vertically divide content within a panel. It does not provide any styling for it's contents.
The Panel Body component implements the padding is set with no value and padding-bottom is set as remainder-content.
By default the Panel Body component has a white background. You can use the muted or light props to give it a light grey background:
The background is muted.
The background is light.
Alternatively we can use the highlighted prop to to highlight the section:
The background is highlighted.
There may be situations where we want to have a thicker border between two panel-body components. This can be achieved using the medium-border and thick-border props.
Thick border, but at the top of the panel, so it will not do anything
Standard border
Thick border
Medium border
We can control the style and color of the border using the dashed-border and light-border props.
Dashed border, but at the top of the panel, so it will not do anything
Dashed border
Light border
Dashed and light border
If we want to be able to align the content of the component we can use the align-content-right and align-content-center props. By default content will be aligned to the left.
Aligned right
Aligned center
Default (aligned left)
The Panel Footer (lk-panel-footer) component is a wrapper around the Panel Body component with some predefined props. As such, refer to the documentation for the Panel Body component.
The props that are predefined are:
align-content-right is set with no value.medium-border is set with no value.padding-bottom is set to content.padding-vertical is set to content.Panel body content.