To start using the components in your project, Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link
rel="stylesheet"
href="https://framer-ui.netlify.app/components/framer.css"
/>Alerts can be used to show a message to the user.
You will find the following types of Alert on https://framer-ui.netlify.app/docs/alert.html
- Simple Alerts (primary,success,danger,dark,warning)
- Alerts with Icons and Text link
- Alert bar with close button
Avatars can be used for user profile picture.
You will find the following types of Avatar on https://framer-ui.netlify.app/docs/avatar.html
- Image and Text Initials Avatars
- Different Sized Avatars
- Stacked Avatar group
Badge can be used to show either status of the user (online, offline or dnd) or you can use it show notification count.
You will find the following types of Badge on https://framer-ui.netlify.app/docs/badges.html
- Text badges with notification
- Status Badges
Buttons can be used to make your web page interactive to your user. You can use them to take user action.
You will find the following types of Button on https://framer-ui.netlify.app/docs/button.html
- Simple button
- Outlined Buttons
- Large buttons
- Small Buttons
- Different Shapes of Buttons
- Link Button
- Icon Button & Icon button with Text
- Floating Button
Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a social media app. You can also use them to show user feedback in the form of text-only card on your site.
You will find the following types of Card on https://framer-ui.netlify.app/docs/cards.html
- Simple Cards
- Card With half width/full width & close Button
- Simple Text Card with button
- Cards with vertical size and shadows
- Text Overlay Card
- Cards with (horizontals & verticals) -- It grows and shrink based on devices screen.
CSS Grid can be used to structure elements in rows and columns.
You will find the following types of Grid on https://framer-ui.netlify.app/docs/grid.html
- 50-50 grids
- Three Columns Grid
- 70-30 Layout Grid
- 30-70 Layout Grid
Image can be used to display large picture on the website.
You will find the following types of Image on https://framer-ui.netlify.app/docs/image.html
- Image banner
- Round Image & Squared Image
Input can be used to take input from your user. It can make your site more interactive.
You will find the following types of Input on https://framer-ui.netlify.app/docs/form.html
- Responsive Input Field
- Responsive Input Field on Errors
- Input with Icon as a Label
- disabled Inputs
- Sliders with stylings
- Form Login Page.
List can be used to show a list of items.
You will find the following types of List on https://framer-ui.netlify.app/docs/list.html
- Styled Ordered List (bullets, No-bullets)
- Styled Unordered List
- Inline Lists
- Notification Stacked List
Modal can be used for creating dialog boxes, to communicate with user.
You will find the following types of Modal on https://framer-ui.netlify.app/docs/modal.html
- Simple Modal
- Footer Modal
Navigation can be used to give the user facility to navigate between different pages.
You will find the following types of Navigation on https://framer-ui.netlify.app/docs/navigation.html
- Navbars with (primary,danger,dark) colors.
- Sidebar/Drawer
Rating can be used to show ratings on the product, or it can also be used for taking ratings from the user.
You will find the following types of Rating on https://framer-ui.netlify.app/docs/rating.html
- Filled Rating with 5 Stars
Toast can be used to show notifications to the user.
You will find the following types of Toast on https://framer-ui.netlify.app/docs/toast.html
- Toast On Left Side
- Toast On Right Side
- Toast On Centered.
Use Typography to format text content on your web site.
You will find the following types of Typography on https://framer-ui.netlify.app/docs/typography.html
- Headings
- Inline text elements
- Gray text with center
- Blockquote Text
Have a look at the implementation of Framer UI Components.