CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS. You may use either of the syntax whichever suites you.
Avatar
Avatars are often used to show profile pictures. Use the correct class to easily create customizable avatars
Standard Avatars
The avatar component has 5 different sizes: avatar-xs(3rem), avatar-sm(4rem), avatar-md(6rem), avatar-lg(8rem), avatar-xlg(10rem).
Avatar with badge
Just add a span with class avatar-badge below the avatar image, to get a beautiful badge
Avatar with different Badges
Add different classes to change color of badges: online(green) , offline(grey) , dnd(red).
Alert
Alert messages can be used to notify the user of something important event and grab the users' attntion without interrupting users' flow. Alerts can be used to notify some special events such as Error, Success, warning, information.
Standard alerts
Add classes: alert-success , alert-danger , alert-warning to change style of alert.
The standard buttons have 7 variants: btn-primary ,btn-secondary ,btn-success ,btn-danger ,btn-warning ,btn-light ,btn-dark.
Outline Buttons
Outline buttons are of many types like- Primary outline button, Secondary outline button, Success outline button, Danger outline button, Warning light button, Light outline button, Dark outline button.You can add various colors according to your color scheme using classes like btn-outline-primary, btn-outline-secondary, btn-outline-success btn-outline-danger,btn-outline-warning, btn-outline-light, btn-outline-dark .
Different Sized buttons
Oh ho! You need some larger or smaller buttons? We got you covered. Just add the additional classes
btn-lg,
btn-md,btn-sm
Large , Medium , Small
Card
Cards are used in web apps generally to showcase products, posters, text Content. Here you will get 2 variants of cards
Standard Card , Horizantal card
Heading
Sub Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, error accusantium eius fuga
Heading
Sub Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
Responsive Image
Resize window to see image auto adjust dimension.
Add img-res class to any image to make it responsive.
Toast
Push notification messages to your user using a toast
Default Toast
Welcome User to Plovex UI 😍
Typography
Here are some example of different types of text. Add classes for text to change styles
Heading large
Heading medium
Heading small
Para large
Para medium
Para small