In the documentation, it is mentioned as Icons.css. The Icon.css is a single element that is responsive and pure CSS icons, there are three types of icons available in spectre object icons, action icons and navigation icons. All of the icons can have different sizes there is three variant of sizes like it can be 2 times larger, 3 times larger or 4 times larger for that we need to use the Spectre Icon size....

Spectre Chips offers tag creation. Chips are complex entities in the tiny blocks, chips can be used to show tags. To create a chip you need to add a container element with the chip class. Add child text elements, buttons or avatars with the avatar class....

Spectre Tiles are used to create components that can be used to replace the grid system. Tiles are repeatable or embeddable information blocks. To create tiles you need to add a container with the tile class and add child elements with the tile-icon, tile-content or/and tile-action classes. The tile-icon and tile-action classes are optional....

Spectre Avatars offers us to include avatar in the figure element. If you want to design a user profile like things then definitely you need to use this feature. To add avatar class to <img> element. There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px). By default, the avatar size is 32px....

The Spectre Divider is used to create a divider between similar kinds of components if you design login and Signup on the page but want to divide them side by side vertically or horizontally, then we can do that....

The button is an important feature of any website or in any app. The Spectre Button size class is used to define the size of the button....

Spectre Variables Colors are used to hold a few evergreen colors like red, green yellow, blue, gray, etc. Each color has an individual specific code, we need a variable to hold that color code to use it in the future....

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

Spectre Position classes are used for useful layout and position things, including clearfix, float, position, margin, and padding utilities. The clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup and the float is used to position the elements to the left, right, of its container along with permitting the text and inline elements to wrap around it....

The Spectre Media element includes responsive images, figures, and video classes....

The Spectre Menu is an important component of an interactive website. A menu is the collection of items that allow users to choose a value from the list....

The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form checkbox. The form checkbox is an important component that is required to get the options from the user as usual it is like a radio button but can get multiple values at a time....