How to customize cards in Angular Material

Question

Im using Angular Material for a web app as a hobby project. I checked the official reference and couldn't figure out how to customize the appearance of cards. For instance, consider my use case: I'd like the card image to fill the entire card and have some text overlay on it. How to do that? The code illustration provided in the reference is currently like:

<md-card>
      <img src="img/washedout.png" class="md-card-image" alt="Washed Out">
      <md-card-content>
        <h2 class="md-title">Paracosm</h2>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </md-card-content>
    </md-card>

The above code will render as shown in like https://material.angularjs.org/#/demo/material.components.card

Do I have to override the css or is there any other way?

Answer 1

In a couple of days they are releasing angular material version 0.10 - this will include new layouts for cards; previous versions need to do this via css & custom directives/divs.