# 5.5: Add Member Cards

We're just displaying a list of the usernames right now. Let's improve that by giving our members cards.

## Add MemberCardComponent

In the root of your `SPA` project, run the following command to generate a component inside of the `/members` folder.

```
ng g c members/member-card --no-spec
```

## Access User Data from Parent Component

Each card will hold the data and template of one individual user. We'll grab the data from the parent component.

Open the newly created `member-card.component.ts` file and add an input property for a user:

```typescript
export class MemberCardComponent implements OnInit {

  @Input() user: User;

  constructor() { }

  ngOnInit() {
  }

}
```

That's all we'll need here for now.

## Member Card Template

Next, we'll add the styling for our cards.

Open `member-card.component.html` and add the following layout:

## Add Member Cards to the Member List Template

Now, we need to update our `MemberList` to use our cards instead of just our paragraphs with usernames.

In `member-list.component.html`, move the `*ngFor` into the parent `<div>` and replace the paragraph element with `<app-member-card>`, passing in the user as the input property.

```markup
<div class="container">
  <div class="row">
    <div *ngFor="let user of users" id="card" class="col-xl-2 col-lg-3 col-md-6">
      <app-member-card [user]="user"></app-member-card>
    </div>
  </div>
</div>
```

It's starting to come together!

![LoadingUserCards](https://122480229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfVcpLNVPaSQtyc%2F-LEoXBIjxiJ9_48lrXMp%2F-LEoXDal3Ctcqx8oWsGS%2Floadusercards.png?generation=1528816006429923\&alt=media)

It still could use some more styling, though. We'll work on that next.