Spectre Components Complete Reference
Spectre is a lightweight, responsive, and modern CSS framework, which provides extensible with faster development. There are various components available in the Spectre framework.
Below example illustrate the example of Spectre Accordion:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= <link rel="stylesheet" href= <link rel="stylesheet" href= </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Accordion Class</strong> <br><br> <div class="accordion"> <input type="checkbox" id="accordion-1" hidden> <label class="accordion-header" for="accordion-1"> <i class="icon icon-arrow-right mr-1"></i> Geeksforgeeks </label> <div class="accordion-body"> <p> Image result for Geeksforgeeks description We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. Knowledge is power! </p> </div> </div> </center> </body> </html> |
Output:
Spectre Components: In the below table, all the components are listed and briefly described to give you a basic idea of that particular component.
| Components | Description |
|---|---|
| Spectre Accordions | The Spectre Accordions provide simple accordion by extending the panel component. |
| Spectre Avatars | Spectre Avatars offer us to include an avatar in the figure element. |
| Spectre Badges | Spectre Badges are simple and basic components that are used to display an indicator or count a number. |
| Spectre Bars | Spectre Bars are used to represent the progress of the task, the value within the known range. |
| Spectre Breadcrumbs | Spectre Breadcrumbs offers us to design breadcrumbs |
| Spectre Cards | Spectre Cards offers us to design cards |
| Spectre Chips | Spectre Chips offer tag creation. |
| Spectre Empty states | The Spectre Empty states are important as a placeholder when you have an uploading layout. |
| Spectre Menu | The Spectre Menu is an important component of an interactive website |
| Spectre Modals | Spectre Modals are flexible dialogue prompts, the Spectre Modal component is a dialogue box/popup window |
| Spectre Nav | The Spectre Nav is an important component used to create a tree view. |
| Spectre Pagination | It’s basically used to enable navigation between pages in a website. |
| Spectre Panels | Spectre Panels are the flexible view container with an auto-expand content section. |
| Spectre Popovers | The Spectre Popovers are one of the useful components of the Spectre |
| Spectre Steps | Spectre Steps is used to design a progress bar consisting of, as you have seen in shopping platforms or any company’s job portals. |
| Spectre Tabs | Spectre Tabs are used to create tabs for showing content on the page. |
| Spectre Tiles | Spectre Tiles are used to create components that can be used to replace the grid system. |
| Spectre Toats | Spectre Toasts are used to display notifications to the user. |
| Spectre Tooltips | Spectre Tooltips are quite useful for showing the description of different elements in the webpage. |
Please Login to comment...