MDB 8 - .card style is missing

Dear @mdb2

You SHOULDN'T definitely create new ticket for every thing about which we were discussing in your previous post.

About your problem: As I said to you before, and this was described in the Migration Guide, the div.card and every similar element has been deprecated - from MDB 8 this is neccessary to use mdb-card component, because those components contains stylesheet which holds every .card style about which you're talking about.

If you're using mdb-card and there's still a problem with the .card styles, please show me the code.

Best Regards,

Damian

I created new tickets because they referred to different issues.

I have a lot of div.card elements. Gonna be challenging to convert them all

I still cannot find in the Migration Guide instructions about div.card. There is one about card animations, which seems irrelevant. Can you please share a link to div.card being deprecated ?

Dear @mdb2

Oh sorry, my bad. The deprecation of div.card isn't described in the Migration Guide. I'll update it.

But there's no other option like to change every occurrence of the .card, .card-body, .card-text, .card-header, .card-footer elements to corresponsing mdb-card-* component.

Card styles are included in mdb-card-* components, so if you won't use them, you won't get material design styles for cards.

Best Regards,

Damian

Dear @mdb2

You can find them in Card and Panel documentation.

Best Regards,

Damian

I started preparing for changing "card-*" styles with mdb-card then I saw a great variety of styles that I don't know how to convert:

.contact-card with-padding
.h3-responsive text-xs-center
.card-cascade 
.narrower
.card-block
.card-body
.card-header
.card-title
.card-text
.card-up

I understand that there are new:

<mdb-card>
<mdb-card-img>
<mdb-card-body>
<mdb-card-title>
<mdb-card-text>

A migration guide will be much helpful, of any other guide describing all the new components

What are the exact problems with updating these elements?

You need to replace div with .card class with <mdb-card> component, div with class .card-body with <mdb-card-body> component and so on.

If you need to use cascade/wider/narrower cards then use Angular inputs as explained in the documentation:

https://mdbootstrap.com/docs/angular/components/cards/

With what should I replace:

.contact-card with-padding
.card-block
.card-header
.card-up

I copied the code in the first example here: https://mdbootstrap.com/docs/angular/components/cards/

This is what I got: https://imgur.com/a/NYEmgXT

As if all the styles are missing. mdbBtn is also not activated. There are no runtime errors

Looking closer, I see that mdb-card is not expanded when inside basic sub components

instead of

<mdb-card>
<div class="card" ...>
<mdb-card-body>

What I get is:

<mdb-card>
<mdb-card-body>

when placed inside other components.

What am I missing ?

It appeared as if MDBBootstrapModule was not referenced for the specific module of the component, so now the styles work