Flora UI

In order to use Flora UI in your project just copy and paste the following code in the head tag of your html document.

    <link rel="stylesheet" href="https://flora-ui.netlify.app/src/app.css">

Flora UI consists of the following components:

• Alerts
• Avatars
• Badges
• Buttons
• Cards
• Images
• Inputs
• Typography
• List
• Navigation
• Modal
• Rating
• Toast
• Grid
• Slider

Alerts

Alerts are used to display an important message to the user.

In Flora UI you will find the following types of alerts.

• Primary Alert
• Info Alert
• Success Alert
• Warning Alert
• Error Alert
• Alert with close button

Avatars

Avatar is a circle that represents a user. Typically used with a user's profile image.

In Flora UI you will find the following types of avatars

• Image Avatars
• Avatars in different sizes
• Fallback Avatar

Badges

Badges can be used for an additional marker for the avatar, card or any other component.

In Flora UI you will find the following types of badges

• Badge on Icon
• Badge on Avatar
• Text Badge

Buttons

Buttons are also called as call to action. We have range of buttons that are listed below .

Following types of buttons are available in Flora UI

• Solid Buttons
• Outlined Buttons
• Link Buttons
• Icon Buttons
• Floating Buttons
• Disabled Buttons

Cards

A card is a sheet used to represent the information related to each other like product details.

Following types of cards are available in Flora UI

• Card with badge
• Card with dismiss
• Card with text overlay
• Text only Card
• Vertical Card and Horizontal Card

Images

Image component are of two types:-

• Responsive Image
• Round Image

Input

Input are used to take input from the user.They let the user interact with the application

Following types of inputs are available in Flora UI

• Textbox
• Textbox with error styling
• Textbox with icon
• A Form Example

Typography

Check out below the text utilites.

• Headings
• Paragraph Text
• Text Alignment
• Extra Text utilites

List

Following types of list styles are available in flora UI

• Unordered List - bullets, disc, square
• Ordered List - numbers, romans, alphabets, reversed
• List with no styling
• Stacked List

Navigation

Navigation component allows the user to navigate to different pages of the website.

Modal

A modal is a dialog box or a popup window that is displayed on top of the current page.

Rating

Rating components can be used as read-only badge and can be used in reviews section as form too.

• Review rating form
• Rating Badge

Toast

Toasts provide brief feedback about an operation through a message. Toasts contain a single line of text directly related to the operation performed.

• Simple Toast
• Toast with close button

Grid

CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers.

• Two Columns Grid
• Two Rows Grid
• Three Columns Grid
• Three Rows Grid

Connect with me