Spectre Panels

Last Updated : 30 Jan, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <strong>SPECTRE Panels Class</strong> 
    </center> 
    <div class="panel"> 
    <div class="panel-header"> 
      <div class="panel-title"> 
          <i class="icon icon-emoji"></i> 
              Geeksforgeeks 
      </div> 
    </div> 
    <div class="panel-nav"> 
        <strong>About</strong> 
    </div> 
    <div class="panel-body"> 
        <p> 
            Free Tutorials, Millions of Articles, 
            Live, Online and Classroom Courses , 
            Frequent Coding Competitions ,Webinars  
            by Industry Experts, Internship  
            opportunities and Job Opportunities. 
        </p> 
    </div> 
    <div class="panel-footer"> 
        <p> 
            We provide a variety of services for you  
            to learn, thrive and also have fun! 
        </p> 
    </div> 
</div> 
</body> 
  
</html>