How to change the color of a card's content in Semantic UI?

Question

To change the color like this:

I don't seem to find how to do it anywhere.

Answer 1

You can give an id for the object and then set the color with CSS, eg:

#header-blue{
    background-color: #1A3E6E;
}

Answer 2

If you want to apply the same color style to all of your cards you can do something like this:

.ui.card,
.ui.cards>.card {
  background-color: #D9499A;
}

The card is divided into 3 div elements: .image, .content, and .extra.content. If you want to change the colors individually do something like:

.ui.card>.content,
.ui.cards>.card>.content {
  background-color: #D9499A;
}

.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
  background-color: #D9499A;
}

Check this example Fiddle out:

HTML

<div class="ui card kristy">
  <div class="image">
    <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
  </div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Kristy is an art director living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i> 22 Friends
    </a>
  </div>
</div>

<div class="ui card matthew">
  <div class="image">
    <img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
  </div>
  <div class="content">
    <a class="header">Matthew</a>
    <div class="meta">
      <span class="date">Joined in 2015</span>
    </div>
    <div class="description">
      Matthew is an in interior designer living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i> 47 Friends
    </a>
  </div>
</div>

<div class="ui card molly">
  <div class="image">
    <img src="https://semantic-ui.com/images/avatar2/large/molly.png">
  </div>
  <div class="content">
    <a class="header">Molly</a>
    <div class="meta">
      <span class="date">Joined in 2010</span>
    </div>
    <div class="description">
      Molly is a personal assistant living in Paris.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i> 12 Friends
    </a>
  </div>
</div>

CSS

.ui.card {
  display: inline-block;
  margin: 10px;
}

.ui.card,
.ui.cards>.card {
  background-color: #5C5D5F;
  color: white;
}

.ui.card.matthew {
  background-color: #2B4B64;
}

.ui.card.kristy {
  background-color: #253E54;
}

.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
  color: white;
}