Phoenix UI

Components

Phoenix UI

Introduction
Just add the following code segment in your html index file and you are good to go.

Note: You may also consider to add google material icons in your index file for convenient access to wide range of icons :D

Avatar
Avatars are graphical representation of users, signifying their profile and personality. Different sizes of avatars are displayed below.
Alert
Alerts are used to attract user's attention for important information without interrupting the user's flow.
This is a success alert!
This is a an error alert!
This is a warning alert!
Button

Buttons allow users to take actions, and make choices, with a single tap.

Primary buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app.

Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content.

Card
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Adidas X Speedflow
Rs. 12,000
favorite_border
Adidas X Speedflow
Rs. 12,000
0
delete
Modal
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
List
Alerts are used to attract user's attention for important information without interrupting the user's flow.

Unordered List

Disc bullets

  • Item One
  • Item Two
  • Item THree

Square bullets

  • Item One
  • Item Two
  • Item Three

Circle bullets

  • Item One
  • Item Two
  • Item Three

No bullets

  • Item One
  • Item Two
  • Item Three

No bullets

  • One
  • Two
  • Three

Ordered List

Numeral bullets

  1. Item One
  2. Item Two
  3. Item Three

Roman bullets

  1. Item One
  2. Item Two
  3. Item Three

Roman bullets(Uppar Case)

  1. Item One
  2. Item Two
  3. Item Three
Batch
Batches are marks on profiles, buttons, etc. They could indicate a notifcation, status or quantity with the intention of sustaining their message on users mind as long as the user is using the app.

Note: You can override the properties of the batch-parent and batch classes with inline style

1
1
Navigation
Batches are marks on profiles, buttons, etc. They could indicate a notifcation, status or quantity with the intention of sustaining their message on users mind as long as the user is using the app.
Input Field
Coming Soon..