How to change the background color of the header of the listcard

i want to change the deafult color of the header and remove the white border around the full screen image

You should be able to do something like this:

<div class="card">
  <div class="item item-balanced item-divider">
    I'm a Header in a Card!
  <div class="item item-text-wrap" style="padding: 0 !important">
    This is a basic Card with some text.

Adding the item-balanced class to the item-divider class will change the color to the balanced class.


the color trick item-balanced worked but how can i make the image take the entire width of the image and remove this thing white border

Just need to remove the padding.


@fady Sorry I didn’t specify what this code did, there is padding on the item class so you have to remove the padding.

1 Like

thank you very much for your help it worked

1 Like

thank you very much , i have tried many frameworks before , and i think ionic is the best , and even when something get complicated i always get answers from the forum

1 Like

“item-balanced class to the item-divider class will change the color to the balanced class” - What is the balanced class? I realize that this is probably a very trivial question, so if you can just point me towards some documentation, that’ll suffice. Clearly, I’m very new to this. Thanks.

Here is the documentation for the different colors:

These colors are used in different classes to change the components (bar-balanced, item-balanced, toggle-balanced, etc).

Here is a large list of resources that you may find useful as you develop:

Thank you . that works :slight_smile: (y)