flash

LightUi

Usage

To use the component you can import the style sheet in your css file or add the link in your html file.

Alert

Alert displays feedback message upon a user action.

The alert component has four variants alert on success, error, warning and info

Alerts are available for any length of text.

Standard Alert

This is a simple success alert!
This is a simple error alert!
This is a simple warning alert!
This is a simple info alert!

Avatar

Avatar displays user's profile picture on profile page or social media handles or navigation bar.

The avatar component has three variants based on the size avatar large, medium and small.

Avatar with Image

avatar
avatar
avatar

Avatar with Text

PS
MT
VK

Badge

Badge can be used on Avatars and Icons to display count and status.

Badge on Avatar

avatar
avatar
avatar

Badge on Icon

count
5
count
3

Button

Button has multiple uses like call to action in forms, dialogs, modals and comes with different styles

Solid Buttons

Outline Buttons

Disabled Buttons

Link Buttons

Icon Button

Floating Action Button

Card

A card is for onboarding messages that need a more flexible layout or to display data about something like a product on Ecommerce website.

Card with Text

Card Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Vertical Card

Note: To add showdaow effect to card, add the shadow class in the parent div.

shoes
Premium Collection

Men Sneakers

Rs. 1750 Rs. 2499 (30% OFF)

Card with Badge

card Trending
Premium Collection

Men Sneakers

Rs. 1750 Rs. 2499 (30% OFF)

Card with Dismiss

card Trending
Premium Collection

Men Sneakers

Rs. 1750 Rs. 2499 (30% OFF)

Card with Text Overlay

shoes Trending
Premium Collection

Men Sneakers

Rs. 1750 Rs. 2499 (30% OFF)

Out of Stock

Horizonntal Card

shoes Trending
Premium Collection

Men Sneakers

Rs. 1750 Rs. 2499 (30% OFF)

Quantity:

1

Simplified Grid

Grid component has two variants Two column grid, and Three colummn grid

Two column Grid

Box 1
Box 2

Three column Grid

Box 1
Box 2
Box 3

Image

Image component has two variants Responsive Image, and Round Image

Responsive Image

shoes

Round Image

shoes

Input

Input component allows user to input information like Email-Id, Password, and other information

Standard Input

Input with Validation

The input validation component has three variants success, error and warning

Note: To use warning and success validation replace class error with warning or success

List

Lists are continuous, vertical indexes of text or images.

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Nested List

    1. Title 1
      • Sub Title 1
      • Sub Title 2
        1. Paragraph Text
    2. Title 2
      1. Sub Title 1
      2. Sub Title 2
        • Paragraph Text
    3. Title 3
      1. Sub Title 1
      2. Sub Title 2
        • Paragraph Text

Stacked List with Icon

Stacked List with Avatar

image
List Item 1
image
List Item 2
image
List Item 3

Rating

Rating components are used to review something like rating a product or an item.

Standard Rating

Note:To add the color to the star add the class checked and to increase/decrease the size use fa-3x, fa-4x and so on.

Text Utilities

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Typography (Heading)

Note:Typography titles have different size than the regular size for heading element for h1 fontsize is 64px and line height is 48px, for h2 fontsize is 40px and line height is 32px, for h3 fontsize is 32px and line height is 24px, for h4 fontsize is 24px and line height is 16px, for h5 fontsize is 16px and line height is 8px,

Top level heading - Title 1

Second top level heading - Title 2

Third top level heading - Title 3

Forth top level heading - Title 4

Fifth top level heading - Title 5

Typography (Text)

Note:Typography text have different size than the regular size for heading element for h1 fontsize is 64px and line height is 48px, for h2 fontsize is 40px and line height is 32px, for h3 fontsize is 32px and line height is 24px, for h4 fontsize is 24px and line height is 16px, for h5 fontsize is 16px and line height is 8px,

This is top level paragraph - Para 1

Second top level paragraph - Para 2

Third top level paragraph - Para 3

Forth top level paragraph - Para 4

Fifth top level paragraph - Para 5

Typography (Small Text)

This is a smaller text This is a smaller semibold text This is a smaller bold text

Typography (Center Text)

This is a center text

Typography (Gray Text)

This is a gray text

Toast

Toast displays notification to a user.

Standard Toast

Toast can appear on any four corners of the screen or at the bottom center of the screen

Add the class bottom-left, bottom-right, bottom-center, top-left or top-right accordingly

Connection timed out. Retry after 5 seconds.
Loading failed. Try after sometime.