From the course: Building a Mobile App with AngularJS 1 and Ionic

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Creating cards and inset lists

Creating cards and inset lists

- Ionic has a couple of design elements for mobile applications that are called cards or inset lists. They are really just lists in disguise with a few classes added to them. But they have a slightly different look and feel so let's take a look at what it would take to add those into our application. I'm gonna go ahead and get rid of everything inside ion content so that I can start from scratch. And what I'm gonna do is just go ahead and create a div with a class of list and also list inset. And then inside that I'm gonna create another div with a class of item just like we did for lists, and just put something in there. So, some Lorem ipsum text. And if I save that, you can see that inset lists are just like lists but they have a little bit of padding around them as well as a border. Now, cards are exactly like inset lists so if you modify this div right here to just say card, you're gonna get the same thing except that it has a little bit of a drop shadow. Since inset lists do not…

Contents