Color bar on the left or right side of an ion-card

Ionic Framework ionic-v3
1

On the start page of ionicframework.com, there is an example with cards, that have green, blue or black line on the top of the cards. How to do that for the top or the left or right side?

Can you give me an hint, how to find out, how to change the elements?

Thanks,
Heiko

2

You need create CSS classes and use it.

3

Did it by extending my home.scss (page where the cards are used in):

.home {
    .ion-card-active{
        border-right: 5px solid green;
    };

    .ion-card-inactive{
        border-right: 5px solid red;
    };
}

In my home.html i extended the card definition by following (it is conditional and depens on the result of object.active in a *ngfor - loop):

<ion-card [ngClass]="{true:'ion-card-active', false:'ion-card-inactive'}[object.active]">
    <ion-card-content>
      {{object.active}}
    </ion-card-content>
</ion-card>

Heiko