md-card should have an md-card-image directive

[programming-kid]

According to Google design spec a cad has following components
An image, a title text inside image, card content and card-footer
i md-card should have following structure
example

<md-card>
 <md-card-image src="img.png">
 <md-card-title>
 this is card title
 </md-card-title>
 </md-card-image>
 <md-card-content>
 this is card content
 </md-card-content>
 </md-card-footer>
 cta-button | cta-button
 </md-card-footer>
</md-card>

this would make life of a mobile app designer very easy

thanks

[vacarsu]

This is a good idea, I actually designed my own card header for images for this purpose,

[epelc]

@programming-kid You just put your image above md-card-content

Example

<md-card>
 <img src="somepic.png" />
 <md-card-content>
 ...
 </md-card-content>
</md-card>

[vacarsu]

I think he is asking for something that is more declarative and styled by default to material specifications for momentum.

[programming-kid]

@epelc yes i know we can do that , but as @vacarsu am looking for a more standard way to build cards. 👍

[epelc]

I think it'd be good if there was an md-card-header much like md-card-footer. It'd be declarative and you wouldn't need to remember that cards don't have a header element. Then you could just put the img inside of the header and either have a special class to style it this way or more likely just default it to this.

[WhiteAbeLincoln]

I agree that there should be a md-card-header. That would help it match the specification a little more, allowing for an Avatar, Title and Subtitle area as shown in the example, and making the card a little more versatile out of the box

Right now, you have to provide your own custom styling to achieve this, and that just gets messy.

Ideally, there would be an element for every one of these content blocks (Title Area [md-card-header], Media area [md-card-image or md-card-media], Supporting text [md-card-content], Actions [md-card-footer, should be md-card-actions]), and we could configure their view order by the order we define them in the html (or using layout-align). Allowing for a layout like this
but still using the same components.

To further follow the specification, there could be an option (md-aspect-ratio) on the Media element to make the Media section 1:1 vs 16:9 to match the different layouts in the specification.

Here are all of the content blocks, that can be used in different orders to make a variety of card layouts

[ThomasBurleson]

Love these idea. Let's make something happen in 0.10.

[programming-kid]

👍 @WhiteAbeLincoln excellent points