[Music] welcome back to the ui builder series and in the last video we saw that how we can add a new page route for knowledge article and how we can bind that knowledge article page with our data brokers in this video we gonna see that how we can add our rating component so mila if you want to talk about the outer box rating component or do you want to build the customer uh let's let's build the let's use the out of the box right because it's pretty handy i mean uh it has a few properties which you can use and yeah i would just go right now for these entire series whatever is possible definitely out of the box so let's go with the out of the box okay so uh what we're gonna do is that in this container this knowledge content one we're gonna add one uh article sorry uh we're gonna add one rating component so for that what i'm gonna do is is there any reading component yep yeah but but but hold on so what we'll do is we'll not just uh add this so let's add a container and there is a reason why i'm saying that so let's add a container yeah and see so far what we have done is like for every container you have this main section right can you go yeah you see here most of the time we just kept it as it is but now i'm i'm gonna show you like uh different properties which you can use to do the flat or to play around the flags direction so what what would happen is our content would be you know it's like uh earlier it's all all or every component what we had that was like a block component but now let's do a inline so we will have a label and we'll have a rating component itself so from column let's change it to row right and now let's add the uh component the first one would be a label something like you know rate or something whatever you would like but i would just kept keep it as like a rate yep so i'll add one text property and your favorite one stylize text exactly so what i'll say is that rating okay we'll put it as h4 yeah that looks fine and then so so you observe one thing here you see when we had these uh column structure your component was like horizontal and you get that plus symbol plus button on the top and the bottom to add a component there right but now you see it's it's on the side so basically which will let you create uh uh your component side by side it's it's like an inline flavor right so let's add one component there let's add rating component yeah yep we have this rating number of components number of star is this what size you want medium or small let's have it large yeah and then we need to add some style because right now we see that it's on the top right so let's go into the style let's put margin and again we gonna have it one rem zero rem again let's have it zero and then one so it's somewhere here it's look good now save it and let's view it so now it's look good that we have this rate so we can still have it further down uh so if you go back uh we can say instead of zero rem uh on the second parameter no the third parameter oh no no no so okay let's uh in instead of one let's put two from the first one first one sorry you want to have further up 1.5 yep that would be better still some chances but that's fine let's not uh play move around with css so that's it folks that how we can add our new rating component and then the next one what we gonna see is that how we can bind this rating component with our data broker to actually have a update and get effect for this knowledge article thank you thank you