Open In App

Spectre Components Complete Reference

Improve
Improve
Like Article
Like
Save
Share
Report

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.


Last Updated : 02 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads