Built Awesome Lit User Interfaces using SPECTRE component Library.
Simply copy the below line into your project & your good to go 🚀
Typography
Display text using well-defined typographic styles.
H1 HEADING
H2 HEADING
H3 HEADING
H4 HEADING
H5 HEADING
H6 HEADING
left aligned
Center aligned
right aligned
This text GREY COLORED
Underline text
This is large text
This is medium text
This is small text
This is Default text
Avatars
Avatar can be used to show a user's profile picture on profile information page, on navigation bar, in blogs grid items.
Text Avatars
Normal Avatar
BADGES
Badges are being used to display the status information or the notification count to a user.
Avatar with badges
Text, Icon and Button Badges
Notification
Messages
Alerts
Alerts are used to attract user's attention for important information without interrupting the user's flow.
NEOG-ALERT.COM: Success Alert
highlight_offNEOG-ALERT.COM: Info Alert
highlight_offNEOG-ALERT.COM: Danger Alert
highlight_offNEOG-ALERT.COM: Warning Alert
highlight_offButtons
Buttons allow users to take actions, and make choices, with a single tap.
Cards
Cards are used to show user related data collectively.It can be product card in E-com.
Simple vertical Card
Last of US
PEGI Rating: Ages 16 and Above
₹2,970Card with badge
Last of US
PEGI Rating: Ages 16 and Above
₹2,970Gamer's choice
card with dismiss
Last of US
PEGI Rating: Ages 16 and Above
₹2,970OUT OF STOCK
Cards with text overlay
Text only cards
This is text only card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam expedita laudantium qui libero omnis praesentium veritatis dicta
Horizontal card
Last of US
PEGI Rating: Ages 16 and Above
₹2,970Cards with shadow
Last of US
PEGI Rating: Ages 16 and Above
₹2,970Images
Image Components are used to display images on websites.This images can be made screen responsive.
Responsive image
Round and Responsive image
Input
inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data.
Snackbar
Display an important message globally.It can be warning or alert.
RATING
A CSS rating system that changes the expression/feedback of user based on how many stars are chosen
LISTS
The CSS list properties allow you to: Set different list item markers for ordered lists. Set different list item markers for unordered lists. Set an image as the list item marker.
NORMAL LIST
-
The quantity of mangoes:
18 -
The quantity of bananas:
10 -
The quantity of apples :
12
STACKED LIST
-
1 hour agoTop story
Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
1 hour agoTop story
Est perspiciatis beatae facilis voluptatem iste? Necessitatibus corrupti minus
-
1 hour agoTop story
nulla blanditiis, quia, numquam nihil quo facilis, amet id recusandae? Nihil, cum aspernatur?
GRIDS
Simply said, it is a table on steroids. It can also align elements by columns and rows. However, using css grid you can create way more complex layouts than with tables.
Grid-3: with 3 item
Grid-2: with 2 items
NAVIGATION
Navigation component represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.Having easy-to-use navigation is important for any web site.
SLIDER
A slider is a set of frames in a sequence that can be traversed respectively.
₹0
₹2500
₹5000
MODAL
A modal window creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it.