Spectre Panels

Spectre Panels are the flexible view container with an auto-expand content section. Panels are similar to the card component with more flexibility. For example, it can be used to create a conversation layout.

To create a panel we need to add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer classes. The panel-body can be auto-expanded and vertically scrollable.

Spectre Panels Class:

• panel: This class is used to create a panel container.
• panel-header: This class is used to set the panel header section.
• panel-nav: This class is used to create panel nav.
• panel-body: This class is used to set the panel body section.
• panel-footer: This class is used to set the panel footer section.

Syntax:

<div class="panel">
 <div class="panel-header">
 <div class="panel-title">..</div>
 </div>
 <div class="panel-nav">
 ...
 </div>
 <div class="panel-body">
 ...
 </div>
 <div class="panel-footer">
 ...
 </div>
</div>

The below example illustrates the Spectre Panels:

Example: In this example, we will create a panel that contains all the sections of a footer like a header, nav, body and footer.

Output:

👁 Spectre Panels

Reference: https://picturepan2.github.io/spectre/components/panels.html