As a Default Avatar is our square profile picture. We can keep it as it is or use styling with it.
We used class as avatar-image

As a Circular Avatar we are making avatar in round shape. We are using class as avatar-image and round-image. Usinground-image class image's border radius is set to 50% because of it changes into circular.

As Avatar with border, we have added a border to the avatar image, as it is adding styling to our profile picture.
We can add a border to both circular as well as square shapes using the class name avatar-image and border-image classes.

In Primary ALert we are using class as msg-alert
IT is a simple and informative message that popped up for the user.

As a success alert, we have background color as green and a success sign which done symbol used.
The color and symbol themselves give the message as it is completed/ successful. We used class msg-alert and success.

As a Warning alert, we have a background color as red and a warning symbol used. The color and symbol themselves give the message as is warning us that the action is undone.
We used class as msg-alert and danger.

As an error alert, we have a background color as yellow and an error symbol used.
We have used class as msg-alert and error.

Badge can be used on icons , for that we have to set parent elements position as relative and badge position to be absolute which will keep badge on that icon.
Here we have inclosed badge withing the icon element with class as badge-on-icon

For Badge on Avatar we have make avatar position as relative and badge position as absolute.
We have used class as badge-on-avatar

Using a simple Button, the button is used in black and white form with the border as radius 0.2rem which makes it a little curved at the corner of the button.
We use class btn and type submit with it.

Using Primary Button, the background is colored using the Primary color of our theme of Website. Here we have used purple background color and text color as white.
We use class btn and primary-btn.

The link button means the link is enclosed in the button tag, which makes it a link Button. Sometimes we need to direct a user to the other page with the button click, then we use the link button.
We use our btn and link-btn class to style it.

Here we are using simple button with Icon to show the direct message to the user.
We use class btn and icon-btn.

Floating action means if a user hovers or click on the button it should show some action or click on that button, so we added hover to the button to show float on to the button
We use class btn and float-btn with it.

Default card is made up of little markup and syles as possible, but still manages to deliver a ton of control and customization. Below is an basic card which can contain image, infomation and buttons.
Here we have image used class as img, heading text uses text class, more information which is enclosed inside para class.
For the card buttons we have used class card-btn which kepps button on the left side using property justify-content : flex-start.
We have used icons of whishlist, share and more details for card. card-icons class contains icons and they are placed at the left of the flexbox. Using justify content property by setting it to flex-end.

Every card uses the default card structure only some changes are made to make it style in different way.
For card with badge we have to place image and badge in same block and make image position as relative and badge position as absolute. Using justify-content we can place the badge at left, right or center position on to the image.
Using class img and img-badge we have created it.

Similar to card with badge we have styled card with text too. We just have to place text and image in same block. Define image positio as relative and text position as absolute, justify-content for text flex-end.
By using class img and text-overlay we can implement it.

In the text only card we don't have image to style and place. Using class text , para, card-buttons and card-icons we have created it.

We have created verticle card yet, now we have Hosrizontal cards, in which we have not included paragraph because it should be minimize card structure.
Using class container as container-horizonto style it in a hosrizontal form, we have divided image and text in a onle side and button and icons on other side. USing img-horizon, text-hosrizon we have reduced their size to be fit in hosrizontal card, for other side we used same classes as before card-btn and card-icons.

We have added shadow to the default card directly using class shadow-cont and added shadow to the card.

Responsive image means it should be self adjustable as per the screen width. We can make it using width to be set with percentage, it will work best, but sometimes the image can be of different sizing, so we need to add media query for different scrren width. using class img-feat we have implement it.

For round image we made the border-radius of the iage as 50%, because of it becaomes round in shape. USing class img-round we did it.

For textbox input we have to use input tag and simply add styling to it. We used input-ele class.

FOr Password as input we show user the star for every alphabet or number, using type password and class input-ele we can use it.

Label is used for scrren readers , whoch is a good practice to have. Using label for input input-ele class we can implement it.

For input to be checked or to show that the input is wrong, we can show red light or red background from that user will understand that input to be changes. Using class input-check you can implement it.

We have 6 types of heading tags which we can use at different places as per our need. using h1, h2, h3, h5 and h6

We have different text sizes in css such as small, smaller, lage, larger, medium. We have used different classes to style with these text sizes medium-text, small-text, extra-small-text and large-text.

We need grey text using grey-text class , for small text or subheading.

Using properties of text transform we can change text-styles as Uppeercase and lowercase using class lower-text and upper-text

Using text-align property in css we can change the alignment for text using classes text-align-center, text-align-right and text-align-left.

For Normal List we create unordered list using ul tag. We used class list-ele to style list.

For Stacked / nested lists we put list inside list. We used same class list-ele and just created new list as sub menu for list item.

To create simple navigation we have to add logo/name at one side and other part is links to direct through our website.
We divided them into two parts such as oneside and other-side.. Two parts are used flex, and justify-content property to align them on start and end of the navbar.

For a Modal we have using onclick event handler to check if it clicked and if clicked follow the instruction specified.
We created first modal button where controls added to display the block. And other part to display the dialog box, bydeafult it is not displayed but afterclicking on to the modal button the other box visible.

Using fontawesome icons, we can create ratings component. To show the rating we used checked class to show the star check.

Toast is short message shown at the bottom of the page which can be hidden by clicking on the button cross.
We used toast class to include the toast items. which are message, Retry button and icon-cross.

To display items using grid, we have to position them as grid. Using property grid-template-columns we allocate space for them in 1fr. We used grid-2 and for items grid-items.

For three items in grid we used grid-3 and for items one, two and three. It is because We are specifying their position on webpage.
Using Property grid-template areas we specified their places.

Slider is used to increase or reduce size or width wih sliding cursor with value.
We used slider class to add stying and also default-slider class to make it visible as a slider component.