Skip to content

README.md

Latest commit

 

History

History
128 lines (105 loc) · 4.03 KB

README.md

File metadata and controls

128 lines (105 loc) · 4.03 KB

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

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