A pixel perfect component library for your website.
screencast-pixeldesign.netlify.app-2022.02.23-01_02_26.mp4
Import pixel-ui in your project:
https://pixeldesign.netlify.app/pixel-design.cssor
@import 'https://pixeldesign.netlify.app/pixel-design.css- Text-Utilities
- Avatar
- Alerts
- Badge
- Button
- Card
- Image
- Input
- Lists
- Modal
- Toast/Notify/Snackbar
- Navigation
- Simplified Grid
- Typography is an essential component of a website's design. Good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing.
Headings
Paragraph
Text position and gray text
The alert component has six variants alert-primary, alert-secondary, alert-danger, alert-info, alert-success and alert-warning
The avatar component has 5 sizes, avatar-xl, avatar-lg, avatar-md, avatar-sm, avatar-xs, having rd,for round avatar, sq,for square avatar.
The Badge component has 5 sizes, av_badge_lg, av_badge_md, av_badge_sm, having 3 states, online, offline, idle,having rd,for round badge, sq,for square badge.
The Button component i.e. btn, comes in two catagories, solid buttons and outlined buttons.
The Solid button is contained with filled colors inside, has five variants btn-primary, btn-cta, btn-danger, btn-link, btn disabledThe Button component i.e. btn, comes in two catagories, solid buttons and outlined buttons.
The Solid button is contained with filled colors inside, has five variants btn-primary, btn-cta, btn-danger, btn-link, btn disabled
The Solid button is Outlined, and has five variants out-primary, out-cta, out-danger, out-success, out-info
The floating action button fa-btn and button with an icon btn-icon.
The Card component has three variants, 1. basic Card or vertical card, 2. shopping card or horizontal card and 3. pricing card
The basic Card component has 4 catagories, 1. Cards with badges, 2. Cards with dismiss and 3. Cards with text overlay and 4. text only cards.
Card are used to show user related data collectively, like product details.
Pricing card is used in subscription plans
The Image component has two variants img-res, for full size Responsive image.
The Image component has four variants img-xl, for extra large image, img_lg, for large image, img_md, for medium image, img_sm, for small image. with round rd and square edges sq.
The input component has two variants input sizes and input type
inp_lg, inp_md, inp_sm
The input component has one type i.e. Input error inp_err
Modals are used to show some important information to the user and they are closed only when the user selects some option.
Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.
Rating components can be used as read-only badge or in reviews section. Can be used in reviews section as form too.