All right, we're going to start wriggling our way down the worm hole... rabbit hole? Rabbit hole... rabbit hole of nested auto layouts, along the way... and especially in this one is we're going to do a simple nesting... so we're going to put our auto layout, that is Early Bird, inside of the Price...

so that it looks like this, and then we're going to have an option... we're going to turn it into a variable... so that we can go into some of these other ones and say... actually, the Early Bird's not on this one, so we can toggle it off... so that it reflows into the right part, it's quite responsive... it's easy enough to get started, and in the coming videos we'll get more and more...

down our worm/rabbit hole, but for now let's do this one. So I want this component to go inside of this... well, this auto layout to go inside of this auto layout... how do I get that happening? Let's drag it in, here you go... why is it dragging in, go inside of there...

I'll do it over here, I'll go... Early Bird's going to go inside of Price, there it is, there... yeah, why doesn't it do it? You know... because the main components can't go inside other main components... so main component, hang out there...

give me instance of it, and then that'll go inside, kind of... it's hard when they're the same size. So Early Bird instance, which is the little diamond there, go inside Price... here we go... it's kind of working, it's not the layout that I want... so I'm going to click the outer parent, the main component...

I'm going to say, go down, and go in the middle... and let's play around with the spacing, you wait there, let's speed this along... 4 x 4... 4 x 4, I want to just see what it looks like... oh, am I happy with that, it's going to fit down here. So I probably like it down there, but I'm going to have to mess with...

the rounded corners to make them work in there... here we go, happy with it, and that my friend is... auto layouts inside of other auto layouts... throwing in components, to be confusing, but they do get confusing... but that wasn't too hard, right? Next thing I want to do is turn it into a variable...

why? Because I did this kind of auto layout stuff... because I want to be able to turn off Early Bird... because I don't always need it... it's going to be a time when this thing is not an Early Bird sale... what I'd like to do is, my main component selected, I'd like to add a property...

and I want the property to be a variant... and I know I use variant and variables, kind of interchange-ably... it's variant that we want... so rest of the course, when I say variables I mean variant... because they're kind of different things. So this variable is going to be "Early Bird"...

and what do I want? I want two variants... and I want the bottom one to have, no, double clicked it... no Early Bird, excellent, so I've got two of them now... I click on my Parent component set, little dotted line around the outside... you might remember it from the Essentials course...

so it's a component with two different variants... and at the moment they're called default in Early Bird... so I'm going to say, I'm going to click on the--  actually, I'm going to click on this one... I'm going to say, Early Bird, the first value is going to be "On" and "Off"... if you use the words on and off... it'll transform it magically into a toggle switch...

what I mean by that is, let's drag out an instance of this component set... I'm going to go to my 'Assets', let's have a look at the local components... we haven't been in here yet, have we? So I've got this one here, there it is, my Price one, I'm going to drag him out... and now because I use the word on and off... it becomes a variant with this toggle switch...

nice. I also want this component to be inside of here... I want it to be inside this main component for my Event card... I want this text to be smaller so it fits in there, here we go... it's going to kind of break, it's okay, we've got a few things to do with this... and we're going to check it on the other pages...

and what you'll notice is that it's not very responsive... why isn't it in the top right of this one? Oh, you got it, components, constraints... so with it selected I'm going to say, you... need to be constrained to the right... and the top, probably the bottom, no, top, top's going to look better...

it just means, now when it's over here, when I resize this one... it's a lot more responsive... text is broken, it's okay, we'll fix that in another video... but there we go, kind of getting a little bit into it, we had two auto layouts... we stuck them inside of each other, then we wanted a variable... so we made it a component set, which happens automatically...

when you go like this, and just add a property to it... it becomes a component set... so we say, you, want a property of variant... component set, yay, we want at least two of them and then do something different... and it might be that it's dark, or light, or different color, or a different size... but we just turned something on and off, which is the Early Bird thing...

and it'll wrap back up nicely... because it was an auto layout inside of another auto layout... oh yeah, let's do it. So over here we can say, all right, this one is an Early Bird, this one isn't... so I'm going to go into my 'Component', I'm going to find this here called Price... and I can turn this one off, there we go, even wraps up to the top right.

The last thing that I want to do is I want to play around with my spacing... but you don't have to hang around for that... I'm just going to kind of adjust this so that's a bit higher... and I will see you in the next video... like, mess around with how big this all should be, bye.