<section class="border p-4 d-flex justify-content-center mb-4">

  <div class="chip bg-secondary" data-mdb-close="true">Text</div>

  <div class="chip" style="background: linear-gradient(to right, rgba(212, 252, 121, 0.5), rgba(150, 230, 161, 0.5))">

    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" />

    John Doe

    <i class="close fas fa-times"></i>

  </div>

​

  <div class="chip  chip-md"style="background: linear-gradient(to right, rgba(252, 203, 144, 0.5), rgba(118, 75, 162, 0.5))">

    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" />

    John Doe

    <i class="close fas fa-times"></i>

  </div>

​

​

  <div class="chip bg-primary chip-lg">

    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" />

    John Doe

    <i class="close fas fa-times"></i>

  </div>

​

  <div class="chip chip-outline bg-light btn-outline-primary" data-mdb-ripple-color="dark">

    Primary

​

    <i class="close fas fa-times"></i>

  </div>

</section>

​

​

​