Changing color for the "Card Showcase" example



So lets say I have a card as shown here:

I have a transparent/overlay kind of theme for my design. I do so by setting the background image of components to a translucent image pixel like this:

background: url(’…/img/translucent_black_1X1.png’);

So, now I want to make the background for this card transparent as well. How do I do so? Or just change the color of the card background in general? I have tried adding custom class to the list element, but it didn’t work:

.custom-card {
background: url(’…/img/translucent_black_1X1.png’);

What am I doing wrong here? Feels like it should be simple. Thanks in advance!


A card is made up of items, so you have to take that into consideration.

.card .item{
  background: red;


Hello ,

How can we make multiple cards with different background colors?


you could make a few different classes,

.card-red .item{
  background: red;

.card-blue .item{
  background: blue;

.card-green .item{
  background: green;

And then conditionally apply the classes with ng-class.


@mhartington can you please provide me working example for this i am also struggling and i am new to ionic