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.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/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>

Output:

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

Explore