Why result from my web not same example on document

In the examples we use code for Font Awesome 5 icons. You need to install '@fortawesome/fontawesome-free' package and add those imports to the styles array in your angular.json file:

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "src/styles.scss"
],

The only difference between code from documentation and example is photo of first card. Please try to use this code:

<div class="row">
  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" wider="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/photo6.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <!--Title-->
        <h4 class="card-title">
          <strong>Alice Mayer</strong>
        </h4>
        <h5 class="indigo-text">
          <strong>Photographer</strong>
        </h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Linkedin-->
        <a class="px-2 icons-sm li-ic">
          <i class="fab fa-linkedin-in"> </i>
        </a>
        <!--Twitter-->
        <a class="px-2 icons-sm tw-ic">
          <i class="fab fa-twitter"> </i>
        </a>
        <!--Dribbble-->
        <a class="px-2 icons-sm fb-ic">
          <i class="fab fa-facebook-f"> </i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>

  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true" narrower="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h5 class="pink-text">
          <i class="fas fa-utensils"></i> Culinary</h5>
        <!--Title-->
        <h4 class="card-title">Cheat day inspirations</h4>
        <!--Text-->

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>

  <div class="col-md-4">
    <!--Card-->
    <mdb-card cascade="true">

      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h4 class="card-title">
          <strong>Billy Cullen</strong>
        </h4>
        <h5>Web developer</h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Facebook-->
        <a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
          <i class="fab fa-facebook-f"></i>
        </a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
          <i class="fab fa-twitter"></i>
        </a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect>
          <i class="fab fa-dribbble"></i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card-->
  </div>
</div>

Hi, Arkadiusz Idzikowski

I mean style Card (Wider, Narrower, Regular) in example not same my website. In example is beautiful Cards style but my website is just normal style like example

My style card Just normal like this

Dear stylemaxz,

I have copied your code, but it's incomplete. You're missing there a mdb-card opening tags, and grid (div.row and div.col-md-4).

When I have added those missing elements, everything works fine.

Could you please try to copy the below code, and check if the problem still exist?

<div class="row">
  <div class="col-md-4">
    <mdb-card cascade="true" wider="true">
      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <!--Title-->
        <h4 class="card-title">
          <strong>Alice Mayer</strong>
        </h4>
        <h5 class="indigo-text">
          <strong>Photographer</strong>
        </h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Linkedin-->
        <a class="px-2 icons-sm li-ic">
          <i class="fab fa-linkedin-in"> </i>
        </a>
        <!--Twitter-->
        <a class="px-2 icons-sm tw-ic">
          <i class="fab fa-twitter"> </i>
        </a>
        <!--Dribbble-->
        <a class="px-2 icons-sm fb-ic">
          <i class="fab fa-facebook-f"> </i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
  </div>
  <div class="col-md-4"><!--/.Card-->
    <mdb-card cascade="true" narrower="true">
      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h5 class="pink-text">
          <i class="fas fa-utensils"></i> Culinary</h5>
        <!--Title-->
        <h4 class="card-title">Cheat day inspirations</h4>
        <!--Text-->

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <a class="btn btn-unique waves-light" mdbWavesEffect>Button</a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card--></div>
  <div class="col-md-4">
    <mdb-card cascade="true">
      <!--Card image-->
      <div class="view view-cascade overlay waves-light" mdbWavesEffect>
        <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/men.jpg"></mdb-card-img>
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>
      <!--/Card image-->

      <mdb-card-body cascade="true" class="text-center">
        <!--Card content-->
        <h4 class="card-title">
          <strong>Billy Cullen</strong>
        </h4>
        <h5>Web developer</h5>

        <mdb-card-text>
          Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam.
        </mdb-card-text>

        <!--Facebook-->
        <a type="button" class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
          <i class="fab fa-facebook-f"></i>
        </a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
          <i class="fab fa-twitter"></i>
        </a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-small btn-dribbble waves-light" mdbWavesEffect>
          <i class="fab fa-dribbble"></i>
        </a>

      </mdb-card-body>
      <!--/.Card content-->

    </mdb-card>
    <!--/.Card--></div>
</div>

Best Regards,

Damian

Dear Damian

After I npm install everything is fine

Thank you for support