Cards present content and actions about a single subject. There’s a recommended approach to adding images, text and descriptions that present data in the clearest form. Data relevant to the card should be contained within the card and not outside.
Cards should not be combined or split into multiple cards. Cards can have many different elements, including thumbnails, header texts, subheaders, banner images, descriptive text, left align link buttons and right align icon actions. Cards could expand as well. Use a divider to highlight the expanded content.
You could also use a right align down arrow to indicate that this card can be expanded. It’s not recommended that you use cards to show the same information tiled across the screen like a photo gallery. Rather, use cards to show different kinds of data, like you might see on a dashboard.
Let’s add a customer card to our application now. Before we can add a card to our application, I’m going to add an image to use as the banner for the card and I’ve got a file here called robby.png which is on my desktop but it’s also in the exercise folders.
You can use any picture file you want, just remember the name and the extension. I’ve put this under the assets IMG folder, and now you see robby.png. Now that I’ve done that, let’s return to our terminal and let’s create a customer card component. I’m going to use NG generate component customers/customer card. This is going to create our new component. Inside customer card, I want to have a route that actually pulls up this card. Eventually, we’re going to want to do something and have the customer ID actually part of the URL, but, for right now, I’m going to open up the customer routing module and on line nine, I’m going to add a comma and I’m going to copy this old route and make a new route on here, which is going to be called info.
To pull up the customer card, you’ll go to customer/info and this will be the customer card component, which has already been imported. No it has not, I’ll add it myself on line four. Import customer card components from customer card, customer card component. I can close my search here. Now that I’ve saved that, I can go ahead and import some modules that I’m going to use. Command P, go to the customer.module file and you see here we have our components.
I’ll add it. Let’s add the material components we’re going to use for this module, so I’m going to go ahead and add on line eight import the mat button module from @angular material button. Then I’m going to import the mat card module from @angular material card. Last, I’m going to import the mat icon module from @angular material icon. Again, I like to keep these in alphabetical order.
Now that I’ve imported them, go ahead and go down to the actual import rail in line 15, add a comma, let’s add the mat button module, mat card module and the mat icon module. I’ll go ahead and separate these with a comment just to make it clear that these are the material components that we’re using. Now that I’ve done that, I can command P and go to the customer card.html and I see it says card works, which is the name of our component. Let’s go ahead and replace this with the mat card directive I’ve got an extra bracket there.
We’re going to go ahead and break this into a mat card header, a mat card content element on line three and a mat card actions element on line four. Inside the header, we’re going to want to have a little avatar for our customer as well as a heading and a subheading, so I’m going to go ahead and use a div and call it mat card avatar. That’s a directive that I can actually use here inside that div. I can add a mat card title and I’ll just put my name as the title for now, since this is a card about me, and a mat card subtitle.
I’ll just put iamsap.com. Now that I’ve done that, I can actually go below the header, on line seven, and I’m going to add an image for the banner and this will be my mat card image. The source, if you put it in the right place, will be /assets IMG robby.png. If you used a different file name, just change that to whatever you’d like it to be there. Inside my content, on line eight, I’m going to add a P tag, for paragraph, and then I’m going to say, “Robby Millsap is a developer, but you can call him Sap.” Now that I’ve added my content, let’s add some actions.
As I said before, there’s two kind of actions we can add. We can have button links on the left and we can have icons on the right, so let’s go ahead and add the button first. We’ll use the mat button directive and we’ll use color=primary and we’re going to make a like button and then I’ll go ahead and make a delete button next to it. I’m going to add a flex spacer here, so div class flex spacer, just to make sure that these next icons are right aligned. I’m going to go ahead and create that new button here.
I’ll use the mat icon button on line 15 and I’ll put a mat icon inside of this and we’ll use the share or the publish, which actually looks better, then the share for sharing. Save that. Let’s go back to CSS now for this component. I’m going to go ahead and style up this just so it look’s good for our demo. I’m going to use the .mat card class and I’m going to go ahead and just set the max width of our card to 300 pixels. This is just for the look of our demo. I’m going to set that margin to auto, so it’ll be centered on our screen.
On line six, I’m going to go ahead and set the avatar and I’m going to go ahead and use the background image and, for now, I’m just going to use the same image. That’s going to be at assets img robby.png or whatever image that you’re using. I’m going to set the background size to cover. Down below, on line 11, let’s go ahead and add our mat card actions. We’re going to set this to be a flex box. On the mat card actions, space flex spacer, I’m going to go ahead and set the width to 100%.
Now that we’ve done that, let’s go ahead and save this and run our application and see what’s working. Okay, our application’s compiled, returning to Chrome, I see, here, that I can go 4200 card info and it’s not working, so it doesn’t like my route. Let’s go to the inspector and see what went wrong here. I see that I did not do this correctly. It should actually be customers info, so /customers info and there’s my card.
You see I have my name as the heading, I have my avatar and my subheader, I have my image as the banner, I put a little description down here, I’ve put my left actions and I’ve actually put a share icon on the right. You can see how I can use this card element to create information that’s easy to communicate to the user. Everything you need to know about this customer, me, in just a second of looking at it.