Components

Introduction
Get started with Flash UI, a framework for building projects faster.
Quick start
Looking to quickly add FlashUI to your project?
CSS
Copy-paste the stylesheet into your before all other stylesheets to load my CSS.
Alerts
An alert displays a short,important message in a way that attracts the user's attention without interrupting the users task
Simple alert
There are 4 types of simple alerts - Primary, Secondary, Success, Warning, and Error alerts. To create an alert use the base class alert, and add any one of the following class variations to it- alert-success, alert-failure, alert-warning, and alert-danger.
Success alert
Error alert
Warning alert
Danger alert

Paste the code below to use the alert

Outline alert
There are 4 types of outline alerts - Success, Warning, and Error alerts. To create an alert use the base class alert, and add any one of the following class variations to it- alert-primary, alert-secondary, alert-success, alert-warning, and alert-error.
Success alert
Error alert
Warning alert
Danger alert

Paste the code below to use the outline alert

Avatars
Avatars are user profile pictures, usually found in circular shapes. Avatars can be used for 'container' objects — projects, spaces, repositories, etcetera — to give them a recognisable visual identity
Circle avatar
This is the circle avatar .You can use the avatar according to the screen size by using xl,lg,md,sm.

Paste the code below to use the circle avatar

Square avatar
This is the square avatar .You can use the avatar according to the screen size by using xl,lg,md,sm.

Paste the code below to use the square avatar

Text avatar
This is the text avatar .You can use the avatar according to the screen size by using xl,sm..
IY
IY
IY
IY

Paste the code below to use different variant of text avatar

Badges
Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge can be used to display numbers, online / offline status, depending on where they are used
Avatar Badge
Avatar Badge is used to show the current status of a user.

Paste the code below to use the Avatar-badge

Icon-badge
Icon-badge is used to show the notification.
4
4
4

Paste the code below to use the icon badge

Buttons
Buttons are components user can click to perform an action and interact with the website.
Primary Button
To generate a primary button, use the base class btn.btn-primary and add any of the following supporting classes to get different variations for a primary button- btn-primary, btn-success, btn-error, btn-default.

Paste the code below to use the Primary Button

Outline Button
To generate a outline button, use the base class btn.btn-primary and add any of the following supporting classes to get different variations for a primary button- outline-primary,outline-sucsess, outline-error,outline-default.

Paste the code below to use the Outline Button

Link Button
This is the Link Button .

Paste the code below to use Link Button

Icon Button
To generate a icon button, use the base class btn.btn-primary and add any of the following supporting classes to get different variations for a primary button- btn-solid, btn-outline, btn-link, btn-icon, and btn-text-icon

Paste the code below to use the Icon Button

Floating Button
Floating-action buttons can be customized by adding the font-awesome icon of your choice

Paste the code below to use the Floating Button

Images
Image Components are used to dsiplay Images on websites.
Square Image
Square Images are the square shaped, with a default dimension of 150px X 150px.

Paste the code below to use the Image Component

Round Image
Round Images are the circular, with a default dimension of 150px X 150px.

Paste the code below to use the Round Image

Responsive Image
Responsive Image Components are used to display Images on websites, which are screen responsive. They expand upto the width of the container they are in.

Paste the code below to use the Responsive Image

Inputs
Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly
Labeled Input
Label Input has a label present at the top of the input field. They can be customized to show error error-message, and change color accordingly.
Password don't match.

Paste the code below to use the Labeled Input

Validation Input
Validation input are used to validate the input
Label
Label
Label

Paste the code below to use the Validation Input

Typography
Example of headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is a small text

This is colored text

Paste the code below to use different version of Headings

Rating
Normal Rating

Paste the code below to use the Normal Rating

Number Rating
4.4

Paste the code below to use the Number Rating

Card
Card with badge
NEW

Nikemax Sneakers

Price: $126

Paste the code below to use the Card with badge

Card with dismiss

Nikemax Sneakers

Price: $126

Paste the code below to use the Card with dismiss

Card with text overlay

OUT OF STOCK

Nikemax Sneakers

Price: $126

Paste the code below to use the Card with text-overlay

Horiontal Card

Nikemax Sneakers

Price: $126

Paste the code below to use the Horiontal Card