Spectre Components Complete Reference - Coding

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= 
"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 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.

Reffered: https://www.geeksforgeeks.org

CSS

Related
Onsen UI Dialog CSS Components
Onsen UI CSS Component Basic Tabbar
Onsen UI CSS Component Underbar Text Input
Onsen UI CSS Component Textarea in List Item
Onsen UI CSS Component Right Label in List Item

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	8