Built with love using HTML and CSS.
To start using the components in your project, you can add the below <link> inside your <head> section of your page. Make sure to keep this as your first CSS import, if you would be using your own custom CSS classes.
<link
rel="stylesheet"
href="https://powertrain-ui.netlify.app/styles.css"
/>PowertrainUI comprises of the following components. Note that new components/features are always being updated so make sure to keep an eye out for anything new.
Alerts make it possible for user's to be up to date with information that matters the most.
You can check out the various types of alerts here
Types:
- Simple Alert
- Alert with icon
- Alert with link
Avatars give each user their own identity on the ever growing number of social platforms.
You can check out the various types of avatars here
Types:
- Square avatar
- Rounded corner avatar
- Round avatar
- Text-only avatar
Badges are primarily used to quickly convey information without taking up space on screen.
You can check out the various types of badges here
Types:
- Badge on icons
- Badge on avatar
- Badge as border on avatar
Badges are primarily used to quickly convey information without taking up space on screen.
You can check out the various types of buttons here
Types:
- Button sizes
- small
- medium
- large
- extra large
- Button varieties
- solid
- outline
- ghost
- link
- Button with icon
- Floating Action Buttons
Cards are primarily used to convey short information to users.
You can check out the various types of cards here
Types:
- Horizontal card
- Text only card
- Vertical card
- Vertical card with badge
- Vertical card with dismiss
- Vertical card with overlay
Grids allow you to layout your content on your website in a structured manner,
thus allowing flexibility in visual representation across a wide range of sizes.
You can check out the various types of grids here
Types:
- 2 column grid
- 3 column grid
- Other types of grids
Images are the heart and soul of a website.
Without them, websites would become one large collection of text.
You can check out the various types of images here
Types:
- Square image
- Round image
- Responsive image
Inputs allow website users to enter or share their information, across many usecases.
You can check out the various types of input here
Types:
- Text input
- Password input
- Email input
- Text area input
- Checkbox group
- Radio group
- Dropdown list
List are very useful components for handling structure and/or order of text on website.
You can check out the various types of list here
Types:
- Basic list
- Bullet
- Square
- Number
- Roman
- Alphabet
- Emoji
- Stacked list
Navigation helps users of a website to easily access sections of a webpage or access completely different websites.
You can check out the ready to go navigation here
Types:
- Simple navigation
Ratings provide insight about various aspects of your website,
allowing your users to share their opinions about any item or service.
You can check out the simple rating here
Types:
- Simple rating
With sliders, you are able to provide your users with another method of input.
You can check out the simple slider here
Types:
- Simple slider
Snackbars provide brief messages about various processes at the bottom of the screen.
These can range from simple messages to also having trigger buttons.
You can check out the various types of snackbars here
Types:
- Baseline
- Leading
With typography you are provided with various text utlities for your content.
You can use them to style your text, and also position them based on requirement.
You can check out the various typographies here
Types:
- Heading
- Paragraph
- Text alignment
- Text decoration
