Styling the Add Newsletter Component
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Hi welcome back to the reactor cores in the sky. We're going to be styling the newsletter component. So right now it looks like it has taken on some of the styles that we apply to sign a form when we sound like no big deal. We just applied some global styles probably on purpose. If we look at the design here we can see that the media has a lot of the Iraheta components that we've been using the styling components such as this border here and this heter here. So let's go ahead and have these in in this guide and then in the next scan you will get onto the form or the majority of the form. So let's return turning letter digests and what we need to do is just import each CDs so we want to say import add heter border from dot dot flash C slash border. Now the next thing we want to import is the title title from Ghaddar slash Katosi slash title. Okay now pretty simple. All we have to do is get out down here and use the cell as a newsletter is equal to a title and then we want to pass in the component of course and we want to pass in a new newsletter. So basically pretty pretty self-explanatory. Letter is equal to our agency which is taking the component in site giving the title and then it's rendering itself below the title. So pretty straight for now let's go around the top here. Let's say this looks like just make sure it's working. Yeah and we have it in here. [00:02:04][123.4]
[00:02:04] Really awesome really reusable very component like that in the header. So let's say it newsletter's equal to Peadar Werder. And then we just need to pass in the child which is our newsletter. So we're just adding some functionality. Well in this case and styles but it's the same idea. So that works. We added it in there and it looks really nice. So that's it for this guy and the next guy we will hop into the styles for the component itself. Yes. Let's go ahead real quick let's actually remove the bootstrap styles from our component Obelix so let's get rid of the Button button primary on the button Save button and then let's give it a form control in our input up here and let's save the eye and then let's go back to here and look zero exciting. All right so it's already looking really close to what we want. Let's go ahead and finish up in the next guy. I'm going to say good status. Good and good comment and I'm going to say ad agencies to a newsletter like let's see news letter component and remove bootstrap styling from before. Ok I'll see in the next guy. We will finish up this component. [00:02:04][0.0]
[123.4]