Parts

Parts is a component library, using which one can build components at rocket speed.

---

The components which are available in Parts are as follows:
Avatar
Alert
Badge
Button
Card
Image
Input
Text-utility
List
Navigation
Rating
Toast
Modal
Simplified Grid

---

Avatar

The Avatar is used to represent a user, and displays the profile picture. Here, we have 3 avatar components:

1. Basic avatar icon

2. Fallback: In case user pic is not available

3. Avatars with different sizes

You can find more about it at this link: https://parts-builder.netlify.app/docs/avatar.html

---

Alert

Alert is used to communicate an important message to the user in a way that it attracts the user's attention. There are various types of alerts such as:

1. Error

2. Warning

3. Info

4. Success

You can find more about it at this link: https://parts-builder.netlify.app/docs/alert.html

---

Badge

Badges are used to highlight an item's status for quick recognition. There are many use cases of the badge: you must have seen that when we have something unread on WhatsApp, Twitter, Quora, etc. a badge icon with a number appears on the top right of the app to let us know how many messages are unread or to show how many items are there in our cart of an e-commerce website. Below we have 2 knids of badge Components:

1. Badge on icon

2. Badge on avatar

You can find more about it at this link: https://parts-builder.netlify.app/docs/badge.html

---

Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons are a quite frequent occurance in most websites such as in e-commerce sites for buying an item or adding an item to the cart, in social media sites to follow or connect with someone or as call-to-action element in most fo the sites. Various types of buttons are as follows:

1. Basic button- text, contained, outlined

2. Icon button

3. Floating action button: A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

You can find more about it at this link: https://parts-builder.netlify.app/docs/button.html

---

Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. for example product display on an ecommerce website is generally a card component. Below are few variations of card component:

1. Text only card

2. Card with shadow

3. Vertical card

4. Horizontal card

5. Card with text overlay

You can find more about it at this link: https://parts-builder.netlify.app/docs/card.html

---

Image

Today, we cannot imagine a website without images. Here, are a few image blueprints that you can use in your website.

1. Square image: use "img-square" class

2. Round image: use "img-round" class

3. Responsive image: use "img-responsive" class

You can find more about it at this link: https://parts-builder.netlify.app/docs/image.html

---

Input

The Input component is a way by which user interacts with the webiste. We can take input from user either in writing or let user select from a list of options. Below are the various input components:

1. Basic input

2. Input with validation: used to tell user whether a input follows a set of rules or not.

3. Radio button: Radio buttons are normally presented in groups. Only one radio button in a group can be selected at the same time.

4. Checkbox: Checkbox is used to take multiple inputs for a same field.

5. Dropdown

You can find more about it at this link: https://parts-builder.netlify.app/docs/input.html

---

Text utilities

Below are the various text utility classes which will help you modify your text at rocket speed:

1. Headings: all HTML headings are available.

2. Text sizes: Different text sizes are available. You can use classes such as text-xs, text-s, text-m, text-l, text-xl

3. Text decoration: you can have decorative text such as grey text using class .gray-text and line through text using .line-through-text class.

4. Text center: you can Align your text at center using .text-center class

You can find more about it at this link: https://parts-builder.netlify.app/docs/text-utilities.html

---

List

As the name suggests it is a list of items, major types of lists are as follows:

1. Basic list: They can ordered(numbers) or unordered(bullets).

2. Bullet-less list: bullets or numbers are removed from the basic list.

3. Horizontal list: Rather than rendering vertically, this list renders horizontally (along x-axis.)

4. Stacked list: Best example of these lists is a notifications tab in any app.

You can find more about it at this link: https://parts-builder.netlify.app/docs/list.html

---

Navigation

A navigation bar is a navigation header that is placed at the top of the page. It helps user to navigate better across the website.

You can find more about it at this link: https://parts-builder.netlify.app/docs/navigation.html

---

Modal

An element is considered modal if it blocks interaction with the rest of the application. Modals are separate windows within an application, most often as a dialog box. They are a common user interface pattern for providing information or requiring confirmation.

You can find more about it at this link: https://parts-builder.netlify.app/docs/modal.html

---

Rating

Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own. You can find ratings in ecommerce websites, travel package websites, educational content website, hotel aggregator website etc. You can use below ratings in your website

1. Basic rating: user can rate in full stars.

2. Rating precision: user can also rate in terms of half stars.

You can find more about it at this link: https://parts-builder.netlify.app/docs/rating.html

---

Toast

Toasts provide brief notifications. The component is also known as a snackbar. Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen.

They shouldn't interrupt the user experience, and they don't require user input to disappear. Toasts contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.

You can find more about it at this link: https://parts-builder.netlify.app/docs/toast.html

---

Grid Grid allow us to arrange our content efficiently using rows and columns which was used to be a headache before grid was introduced. here we have two basic grid components:

1. Two column grid

2. Three column grid

You can find more about it at this link: https://parts-builder.netlify.app/docs/simplified-grid.html

---

Click on the link below to see Parts in action: https://parts-builder.netlify.app/