Get Started

Add this library by including the following CSS and JavaScript files from CDN


CSS

Inlcude the stylesheets link: "https://stylesup.netlify.app/styles/components.css"

Javascript

Inlcude the script tag after body with src as: "https://stylesup.netlify.app/scripts/script.js"

Avatar

Round

avatar avatar avatar

Square

avatar avatar avatar

Text

SM SM SM

Alert

--Alert--
Sucess alert
Failure alert
Light alert
Dark alert

Badge

--Badge-- Primary Secondary Light Dark

Badge on Icon

2

Badge on Avatar

avatar avatar

Button

Link

Link

Icon button

Floating Action Button

Card

card-image

Vidhana Soudha

The Vidhana Soudha in Bangalore, India, is the seat of the bicameral state legislature of Karnataka. It is constructed in a style sometimes described as Mysore Neo-Dravidian, and incorporates elements of Dravidian styles. The construction was completed in 1956.

Card with badge and shadow

card-image

Marks & Spenser

Women Black Solid A-Line Dress
₹ 1789/- New

Card with dismiss & overlay text

card-image

Nature Photography

"Nature" can refer to the phenomena of the physical world, and also to life in general. The study of nature is a large, if not the only, part of science. Although humans are part of nature, human activity is often understood as a separate category from other natural phenomena.

Bachalpsee in the Swiss Alps

Horizontal Card

card-image

Vidhana Soudha

The Vidhana Soudha in Bangalore, India, is the seat of the bicameral state legislature of Karnataka. It is constructed in a style sometimes described as Mysore Neo-Dravidian, and incorporates elements of Dravidian styles. The construction was completed in 1956.

Text only card

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Image

image

Responsive Image

image

Round Image

image

Input & Textarea

Textarea

Validation and errors styled

Radio button

Checkbox




List

  • Point 1
  • Point 2
  • Point 3
  • Point 4

Stacked list

  • Notification 1
  • Notification 2
  • Notification 3
  • Notification 4
  • Notification 5
  • Notification 6
  • Notification 7
  • Notification 8

Inline list

  • Point 1
  • Point 2
  • Point 3

Navigation

Modal


Modal Demo

A modal is a dialog box/popup window that is displayed on top of the current page. When the modal is open, the background of the remaining page is made to be translucent.

Rating

3.5

Star rating

Checked rating

Slider

Simplified Grid

Two Items

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Three Items

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Motivational quotes can help you reach your potential each day. Sure, they’re just words. But they’re positive words. And if you’re on the verge of giving up or struggling to push yourself to the next level, sometimes that’s just what you need. So whether you’re trying to finish a project, start a new side hustle, or hit that big life goal, knowing how to motivate yourself and train your brain for success can help.

Text Utilities

Headings

Main Heading

Topic Heading

Sub Heading

Small text

Small text paragraph

Small text default

Grey text

This is an example of grey text.

Center text

Centered Heading

Some text which is aligned to the center. Motivation is your desire to do something with your personal life, at work, in school, in sports, or in any hobbies. Having the motivation to do something can help you achieve your big goals and dreams, whatever they may be.

Toast/Notify/Snackbar

Toast Heading

This is a toast message!