md-card - Elevation on desktop

[frankspin89]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Cards should have a elevation (dropshadow) of 0dp on desktop.

What is the current behavior?

Cards on desktops are currently following mobile guidelines with a 2dp elevation

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

Be consistent with the Material Guidelines

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

• OS: macOs Sierra
• Chrome: Version 56.0.2924.87 (64-bit)
• Angular: 4.0.0-rc.1
• Material: 2.0.0-beta.2

Is there anything else we should know?

Maybe it would be smart to introduce a option to enable/disable elevation on cards.

[thomaspink]

@frankspin89 Are you sure the elevation should be 0?

I had a look into the guidlines and the elevation of a card is defined as follows:

• 2pt: Card (resting elevation)
• 8px: Card (when picked up)

https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android

[savaryt]

It's not really clear.
https://material.io/guidelines/components/cards.html#cards-content-blocks

The first sentence says:

On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.

While the picture description says:

On desktop, cards have a resting elevation of 0dp (left), and an elevation of 8dp on hover (right)

Same story for Raised Buttons
https://material.io/guidelines/components/buttons.html#buttons-raised-buttons

Raised buttons have a default elevation of 2dp.
On desktop, raised buttons can gain this elevation on hover.

[thomaspink]

@ThibaultSavary @frankspin89 i see your point.
now i am also confused :) but i have to say, i never have seen a card with no elevation.

[frankspin89]

@thomaspink @ThibaultSavary Would be good to introduce a option to enable/disable elevation on card basis. In combination with a global default option. That's the most flexible solution I think.

[savaryt]

@frankspin89
You can use the mat-elevation() mixin, but yeah an elevation attribute, like they did it in Polymer could be great.

@thomaspink
Yep, and it clearly says that any material is 1dp thick in the guidelines so it kinda feel contradictory to set a 0dp elevation to represent 1dp thickness.

[Nodarii]

Hello guys,

Totaly agree, it would be nice to have an ability to regulate an elevation via attribure of <md-card>

[german-bortoli]

It should be nice to fix also the transition effects for hover on cards, right now is very rough

[willshowell]

@Germanaz0 they look smooth here:

https://plnkr.co/edit/RoWV4ou4raej5BiGmaVT?p=preview

[leocaseiro]

They've fixed the mat-elevation-z classes, so you can just set the class .mat-elevation-z0 on your card.

<mat-card class="mat-elevation-z0">
...
<mat-card>

Eq: http://plnkr.co/edit/cK4Q1C?p=preview

If you would you like to set all your cards with z0 elevation by default, you can also use SASS and the mixin mat-elevation(0)

@import '~@angular/material/theming';

mat-card {
  @include mat-elevation(0);
}

[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.

[angular-automatic-lock-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.}