{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material2/issues/4245","repository_url":"https://api.github.com/repos/angular/material2","labels_url":"https://api.github.com/repos/angular/material2/issues/4245/labels{/name}","comments_url":"https://api.github.com/repos/angular/material2/issues/4245/comments","events_url":"https://api.github.com/repos/angular/material2/issues/4245/events","html_url":"https://github.com/angular/material2/issues/4245","id":223922901,"number":4245,"title":"md-card does not follow the guidelines.","user":{"login":"ArtisanDuCode","id":25029876,"avatar_url":"https://avatars0.githubusercontent.com/u/25029876?v=3","gravatar_id":"","url":"https://api.github.com/users/ArtisanDuCode","html_url":"https://github.com/ArtisanDuCode","followers_url":"https://api.github.com/users/ArtisanDuCode/followers","following_url":"https://api.github.com/users/ArtisanDuCode/following{/other_user}","gists_url":"https://api.github.com/users/ArtisanDuCode/gists{/gist_id}","starred_url":"https://api.github.com/users/ArtisanDuCode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ArtisanDuCode/subscriptions","organizations_url":"https://api.github.com/users/ArtisanDuCode/orgs","repos_url":"https://api.github.com/users/ArtisanDuCode/repos","events_url":"https://api.github.com/users/ArtisanDuCode/events{/privacy}","received_events_url":"https://api.github.com/users/ArtisanDuCode/received_events","type":"User","site_admin":false},"labels":[{"id":311421688,"url":"https://api.github.com/repos/angular/material2/labels/P3:%20important","name":"P3: important","color":"fad8c7","default":false}],"state":"open","locked":false,"assignee":{"login":"kara","id":3871688,"avatar_url":"https://avatars0.githubusercontent.com/u/3871688?v=3","gravatar_id":"","url":"https://api.github.com/users/kara","html_url":"https://github.com/kara","followers_url":"https://api.github.com/users/kara/followers","following_url":"https://api.github.com/users/kara/following{/other_user}","gists_url":"https://api.github.com/users/kara/gists{/gist_id}","starred_url":"https://api.github.com/users/kara/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kara/subscriptions","organizations_url":"https://api.github.com/users/kara/orgs","repos_url":"https://api.github.com/users/kara/repos","events_url":"https://api.github.com/users/kara/events{/privacy}","received_events_url":"https://api.github.com/users/kara/received_events","type":"User","site_admin":false},"assignees":[{"login":"kara","id":3871688,"avatar_url":"https://avatars0.githubusercontent.com/u/3871688?v=3","gravatar_id":"","url":"https://api.github.com/users/kara","html_url":"https://github.com/kara","followers_url":"https://api.github.com/users/kara/followers","following_url":"https://api.github.com/users/kara/following{/other_user}","gists_url":"https://api.github.com/users/kara/gists{/gist_id}","starred_url":"https://api.github.com/users/kara/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kara/subscriptions","organizations_url":"https://api.github.com/users/kara/orgs","repos_url":"https://api.github.com/users/kara/repos","events_url":"https://api.github.com/users/kara/events{/privacy}","received_events_url":"https://api.github.com/users/kara/received_events","type":"User","site_admin":false}],"milestone":null,"comments":3,"created_at":"2017-04-24T19:14:57Z","updated_at":"2017-05-06T23:37:21Z","closed_at":null,"body":"#### Bug, feature request, or proposal:\r\nBug\r\n\r\n#### What is the expected behavior?\r\n![](https://storage.googleapis.com/material-design/publish/material_v_11/assets/0Bzhp5Z4wHba3RXpZUWE2bV9PdDQ/components_cards33.png)\r\n\r\nI have made a table that summarizes the guidelines at [](https://material.io/guidelines/components/cards.html)\r\n\r\n**type** | default\r\n--------- | -------\r\n**card** | border: 2px, margin: 8dp on mobile, margins can be 8, 16, 24, or 40dp wide.\r\n**actions** | padding: 8px\r\n**rich media** 100% | ratio: 16:9 or 1:1\r\n**rich media specific size** | ratio 1:1, padding-top: 16px\r\n**header** | height: 72px, padding: 16px\r\n**title group** | padding-left-right: 16px, padding-top-bottom: 16px or 24px (if no action or content)\r\n**primary title** | text: 24px\r\n**subtitle title** | text: 14px, padding-top:12px\r\n**content** | text: 14px, padding-left-right: 16px, padding-top-bottom: 16px or 24px (if no action or content)\r\n\r\n#### What is the current behavior?\r\nThe current behavior is reversed.\r\nThis is the card that the padding 16px and all element adjust with margin negative.\r\n$mat-card-default-padding: 24px !default; but the right and left padding must be 16px.\r\n\r\n#### What are the steps to reproduce?\r\nhttp://plnkr.co/edit/7acNEwjZUHxUF3UPp3KB\r\n\r\n#### What is the use-case or motivation for changing an existing behavior?\r\nTo have cards more consistent with the guidelines and to color backgrounds without fixing elements.\r\n\r\n#### Which versions of Angular, Material, OS, browsers are affected?\r\nAll versions are impacted."},"comment":{"url":"https://api.github.com/repos/angular/material2/issues/comments/299672452","html_url":"https://github.com/angular/material2/issues/4245#issuecomment-299672452","issue_url":"https://api.github.com/repos/angular/material2/issues/4245","id":299672452,"user":{"login":"mattheiler","id":1843195,"avatar_url":"https://avatars3.githubusercontent.com/u/1843195?v=3","gravatar_id":"","url":"https://api.github.com/users/mattheiler","html_url":"https://github.com/mattheiler","followers_url":"https://api.github.com/users/mattheiler/followers","following_url":"https://api.github.com/users/mattheiler/following{/other_user}","gists_url":"https://api.github.com/users/mattheiler/gists{/gist_id}","starred_url":"https://api.github.com/users/mattheiler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattheiler/subscriptions","organizations_url":"https://api.github.com/users/mattheiler/orgs","repos_url":"https://api.github.com/users/mattheiler/repos","events_url":"https://api.github.com/users/mattheiler/events{/privacy}","received_events_url":"https://api.github.com/users/mattheiler/received_events","type":"User","site_admin":false},"created_at":"2017-05-06T23:37:21Z","updated_at":"2017-05-06T23:37:21Z","body":"By no means is this an exhaustive, tested list, but... had to add a lot of `!important` styles to fit the spec:\r\n\r\n```\r\n.mat-card {\r\n    padding: 0 !important;\r\n}\r\n\r\n.mat-card-header {\r\n    padding: 24px 16px 16px !important;\r\n}\r\n\r\n.mat-card-header + .mat-card-content {\r\n    padding-top: 0 !important;\r\n}\r\n\r\n.mat-card-header-text {\r\n    margin: 0 !important;\r\n}\r\n\r\n.mat-card-title-group {\r\n    margin: 0 !important;\r\n    padding: 16px !important;\r\n}\r\n\r\n.mat-card-title-group + .mat-card-content {\r\n    padding-top: 0 !important;\r\n}\r\n\r\n.mat-card-avatar {\r\n    margin-right: 16px !important;\r\n}\r\n\r\n.mat-card-title {\r\n    line-height: 20px !important;\r\n    margin: 0 !important;\r\n    font-size: 14px !important;\r\n\r\n    &[large] {\r\n        line-height: 24px !important;\r\n        font-size: 24px !important;\r\n    }\r\n}\r\n\r\n.mat-card-subtitle {\r\n    line-height: 20px !important;\r\n    margin: 0 !important;\r\n    font-size: 14px !important;\r\n}\r\n\r\n.mat-card-image {\r\n    margin: 0 !important;\r\n    width: 100% !important;\r\n}\r\n\r\n.mat-card-content {\r\n    font-size: 24px;\r\n    margin: 0px !important;\r\n    padding: 16px !important;\r\n}\r\n\r\n.mat-card-actions {\r\n    margin: 0 !important;\r\n    padding: 8px !important;\r\n}\r\n\r\n.mat-card-footer {\r\n    margin: 0 !important;\r\n    padding: 16px 16px 24px !important;\r\n    position: static !important;\r\n}\r\n```"}}
{"actor":{"display_login":"mattheiler"}}