Hello, in this ionic programming video, we're gonna look at the CSS component, which is the card chords have become very, very popular in recent years. If you use up, chances are if you use an application, you've seen chords. But if you use an application that allows you to, let's say, swap something left and right, maybe a dating app, or maybe something else, that thing there is a cord. It's, it's an item that you usually lay on top of each other, or it could be used as some sort of page. This is a great way to be flexible, led to display, display some weird information, wanting some images, and a bit more styling. It's just a great way of just grouping data together.

So called version stuff. Let's get started. So first of all, we want to create a div and this div nice to have a class of you guessed it caught inside here. Do you want to put another div and then this div is to have a class of all you can put it inside the quotation mark. I'm sorry, all you term dash text, dash wrap. This is just the way we're going to have the text aka, it's going to wrap around this very, very simple stuff.

Then inside here, we're just gonna have some random text what I'm going to do go on to we're going to use this in a moment. And we display images. I'm going to put random power graph generator generated I do use websites like this quite a lot. Okie dokie let's see that one wasn't very not password is not password. I'm a paragraph. Okay, oh, yeah, we just use this.

Now. We'll More than big enough. So if we paste that into here, save that now let's build our project. Nope, that's not it on on a bill iOS, but you can obviously build it for whatever project you want. You can test it however you want. But it's just easy to test it by the iOS simulator and showcase that to us well otherwise I'll just be testing it via a physical device whether that's Android or iOS.

So there you go. You can see what a cord is right here for zoom in you can see exactly what one is chances are if you didn't realize what he was it started this video. I'm sure you do. Now. Okay, so the next thing we're going to look at is called headers and footers. Simply put, you can have headers and footers as well.

Just another great way especially if you have loads of card or loading information in it just allows you to group the carburetor Have a bit more information just provide a bit more in depth information. That's really all there is to it. So, before this item, we want to create a number item. So I'll just put a div. And this is a class of item term, void. And then in here, I'm just going to put all together.

Then for the bottom, you can simply copy and paste this. I'm keeping it simple by just putting some text in there, you could put an image in a print icon in there, you could put all the elements in like other tags in there from HTML, you could put your own classes in there styling however you want. Then there's web development. You can customize it however you feel so I'm gonna put a footer filter for save that build out project again. Now let's run it again in our simulator. MC got a header and a footer and it just add a background as well.

So it's just a great way of separating the stuff that we don't have to do outside which is fantastic and looks great whether you're on an iPhone or some sort of phone, or whether you're on a tablet and it doesn't really matter. The landscape has got it adjusted accordingly. That's the benefit of using something like AI on it. The next thing we're going to look at is called lifts. Very similar to just a regular list, but it allows you to look like a car essentially, because it already thora looks like he's got an item. He has an item there and go to Mia but the end of the day, the header and the footer and More complementing the data here instead of it being a nova item, respectively.

So what I'm going to do is just comment this out, I'll leave it because when you access this code via GitHub, I don't want this code to be there so you can see what we've done. So it's sort of a diff. And yet you want a class of list called. It could be an unordered list if you want it to be and then inside here, you could have list items. I'm just going to connect a div, you could have a href. Honestly totally up to you.

And to this another class of our term, I term, dash icon dash left. If we can get it we're going to add an icon is not compulsory, it's totally up to you. We'll add one without an icon as well. For this, but I am for this query class of icon. Then all from the You want on pradesh home, you want more information about ionic icon, this time to Google ionic icon and you'll get a page that shows you all the different classes that you can use, which is fantastic. And now I'm just going to put home later.

I'm going to copy and paste this. I'm going to get rid of the icon. Get rid of classical rolling, no longer needed. And I'm going to call this I turn to and finally copy and paste it again, changes to automation dash icon right, then change it from iron home to ion chain to iron card. We don't have cards so let's put a card item. So rename that core item.

Save that rebuild our project. Now let's just rerun our project. There you go, we've got a list in a chord format. As you can see, we've got two icons on the left one of the work according to our classes that we added. The middle one, middle one has no icon. So you can mix and match however you want by just having center icon is fantastic, because it just gives a bit more context to the user.

It's just a very user experience. Next thing we're going to look at is card images. We're gonna do it within the list, but you could do it within a card that well isn't the list. So what we're going to do, we've already got these items. I'm going to I'm going to add another item here, a call list, Dave. For the class.

I'm going to Put what to put item item dash image. Image Source for the source. Got this image open right to Batman is actually a toy that you can buy a Batman because as you can see it's it's not Ben Affleck it's a toy of him as Batman. paste this into here, save it again rebuild our project. Okay now let's rerun our project. Okie dokie.

As you can see we now I have an image inside here so it's pretty simple. You can Do a bunch of other stuff. You can add text in there. You can add buttons in there. You can add paragraph tags, you can add more images, add headers, whatever you want. totally customizable, and you can create the code that you want and need for your application and have the best user experience possible.

So that's it for cards for ionic. If you have any questions, feel free to post them on our education platform. So no learning Dakota UK during there'll be a link in the description to that plus, there'll be a nova link in the description to source code from this video. If you liked the video, please give it a thumbs up hit that subscribe button and leave us a comment. And as usual, thank you for watching and I hope you have a great day.