Components: md-card does not follow the guidelines.

[lsaudon]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I have made a table that summarizes the guidelines at

type | default
--------- | -------
card | border: 2px, margin: 8dp on mobile, margins can be 8, 16, 24, or 40dp wide.
actions | padding: 8px
rich media 100% | ratio: 16:9 or 1:1
rich media specific size | ratio 1:1, padding-top: 16px
header | height: 72px, padding: 16px
title group | padding-left-right: 16px, padding-top-bottom: 16px or 24px (if no action or content)
primary title | text: 24px
subtitle title | text: 14px, padding-top:12px
content | text: 14px, padding-left-right: 16px, padding-top-bottom: 16px or 24px (if no action or content)

What is the current behavior?

The current behavior is reversed.
This is the card that the padding 16px and all element adjust with margin negative.
$mat-card-default-padding: 24px !default; but the right and left padding must be 16px.

What are the steps to reproduce?

http://plnkr.co/edit/7acNEwjZUHxUF3UPp3KB

What is the use-case or motivation for changing an existing behavior?

To have cards more consistent with the guidelines and to color backgrounds without fixing elements.

Which versions of Angular, Material, OS, browsers are affected?

All versions are impacted.

[mmalerba]

@kara can you check the card spacing against the spec?

[lsaudon]

I updated my post.
I think it would be best to take inspiration from the repository card angularjs

[mattheiler]

This would make the card a lot more flexible. I currently can't add tabs, a toolbar, a list, etc. to my cards.

Might I add that the footer should not be positioned absolutely. I have to give my cards a fixed height just to use it, which I don't want to do. If the cards are in a collection, then the body should fill the height and scroll, if the height has a max.

[mattheiler]

By no means is this an exhaustive, tested list, but... had to add a lot of !important styles to fit the spec:

.mat-card {
    padding: 0 !important;
}

.mat-card-header {
    padding: 24px 16px 16px !important;
}

.mat-card-header + .mat-card-content {
    padding-top: 0 !important;
}

.mat-card-header-text {
    margin: 0 !important;
}

.mat-card-title-group {
    margin: 0 !important;
    padding: 16px !important;
}

.mat-card-title-group + .mat-card-content {
    padding-top: 0 !important;
}

.mat-card-avatar {
    margin-right: 16px !important;
}

.mat-card-title {
    line-height: 20px !important;
    margin: 0 !important;
    font-size: 14px !important;

    &[large] {
        line-height: 24px !important;
        font-size: 24px !important;
    }
}

.mat-card-subtitle {
    line-height: 20px !important;
    margin: 0 !important;
    font-size: 14px !important;
}

.mat-card-image {
    margin: 0 !important;
    width: 100% !important;
}

.mat-card-content {
    font-size: 24px;
    margin: 0px !important;
    padding: 16px !important;
}

.mat-card-actions {
    margin: 0 !important;
    padding: 8px !important;
}

.mat-card-footer {
    margin: 0 !important;
    padding: 16px 16px 24px !important;
    position: static !important;
}

[lsaudon]

I do not think we have to put everything in !important.

[mattheiler]

Definitely not, but I had to put it in there as a workaround.

[Juchar]

Additional point from my side here:

It seems that using the card header without an avatar (only title & description) keeps an additional margin of 8px on the left side that should not be there.

[jelbourn]

Closing this since everything discussed here is superseded by the 2018 update to the Material Design spec. Updates for that will be tracked separately.

[simeyla]

@jelbourn Is there going to be a push in 2018 to get some better example code, that correspond to the actual spec. As of May 2018 the card spec has ONE relatively simple example*.

Then I look at the cards spec and it looks like it must have cost several thousand dollars just to create all the animation videos.

I'm hoping someday the angular examples page will looks anything like the spec at all and we can just cut and paste from it. The lack of parity has been going on for way too long and none of the docs have changed in months.

* well technically there are two samples, but one of them is this <mat-card>Simple card</mat-card> !

[jelbourn]

We'll be incrementally making updates for some things, but others are a larger undertaking (like shapes, which aren't well-supported on all the browsers we support).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}