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 =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ 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:
Spectre Panels
Reference: https://picturepan2.github.io/spectre/components/panels.html
Share your thoughts in the comments
Please Login to comment...