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/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 >w3wiki</ h1 > < strong >SPECTRE Panels Class</ strong > </ center > < div class = "panel" > < div class = "panel-header" > < div class = "panel-title" > < i class = "icon icon-emoji" ></ i > w3wiki </ 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