Angular Bootstrap Social sections

Angular social sections - Bootstrap 4 & Material Design

Enhance your project with a variety of Social sections such as news feed, comments, and post cards.

Social newsfeed v.1 MDB Pro component

John Doe added you as a friend
1 hour ago
Anna Smith added 2 new illustrations
4 hours ago
Danny Moore added you as a friend
7 hours ago
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
Kate Harrison added 2 new photos of you
3 days ago


        <!-- Section: Social newsfeed v.1 -->
        <section class="my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12">

              <!-- Newsfeed -->
              <div class="mdb-feed">

                <!-- First news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">John Doe</a> added you as a friend
                      <div class="date">1 hour ago</div>
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fas fa-heart"></i>
                        <span>5 likes</span>
                      </a>
                    </div>

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- First news -->

                <!-- Second news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Anna Smith</a> added
                      <a> 2 new illustrations</a>
                      <div class="date">4 hours ago</div>
                    </div>

                    <!-- Added images -->
                    <div class="added-images">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/71.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/74.jpg" class="z-depth-1 rounded">
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fas fa-heart"></i>
                        <span>18 likes</span>
                      </a>
                    </div>

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- Second news -->

                <!-- Third news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Danny Moore</a> added you as a friend
                      <div class="date">7 hours ago</div>
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fas fa-heart"></i>
                        <span>11 likes</span>
                      </a>
                    </div>

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- Third news -->

                <!-- Fourth news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Lili Rose</a> posted on his page
                      <div class="date">2 days ago</div>
                    </div>

                    <!-- Added text -->
                    <div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore,
                      iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat
                      voluptate.</div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fas fa-heart"></i>
                        <span>7 likes</span>
                      </a>
                    </div>

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- Fourth news -->

                <!-- Fifth news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt mb-0">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Kate Harrison</a> added
                      <a> 2 new photos</a> of you
                      <div class="date">3 days ago</div>
                    </div>

                    <!-- Added images -->
                    <div class="added-images">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg" class="z-depth-1 rounded">
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="like">
                        <i class="fas fa-heart"></i>
                        <span>53 likes</span>
                      </a>
                    </div>

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- Fifth news -->

              </div>
              <!-- Newsfeed -->

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Social newsfeed v.1 -->

Social newsfeed v.2 MDB Pro component

John Doe added you as a friend
1 hour ago
· 7
Anna Smith added 2 new illustrations
4 hours ago
· 31
Danny Moore added you as a friend
7 hours ago
· 12
Lili Rose posted on his page
2 days ago
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore, iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat voluptate.
· 25
Kate Harrison added 2 new photos of you
3 days ago
· 47 


        <!-- Section: Social newsfeed v.2 -->
        <section class="my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-lg-6">

              <!-- Newsfeed -->
              <div class="mdb-feed">

                <!-- First news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-1-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">John Doe</a> added you as a friend
                      <div class="date">1 hour ago</div>
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="comment" data-toggle="collapse" href="#collapseExample-1" aria-expanded="false"
                        aria-controls="collapseExample-1">Comment</a> &middot;
                      <span>
                        <a>7</a>
                      </span>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
                        <i class="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas fa-thumbs-down"></i>
                      </a>
                      <div class="collapse" id="collapseExample-1">
                        <div class="card card-body mt-1">

                          <!-- Add comment -->
                          <div class="md-form mt-1 mb-1">
                            <textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-1"
                              aria-expanded="false" aria-controls="collapseExample-1">Cancel</button>
                            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-1"
                              aria-expanded="false" aria-controls="collapseExample-1">Reply</button>
                          </div>

                        </div>
                      </div>
                    </div>
                    <!-- Feed footer -->

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- First news -->

                <!-- Second news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Anna Smith</a> added
                      <a> 2 new illustrations</a>
                      <div class="date">4 hours ago</div>
                    </div>

                    <!-- Added images -->
                    <div class="added-images">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/50.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" class="z-depth-1 rounded">
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="comment" data-toggle="collapse" href="#collapseExample-2" aria-expanded="false"
                        aria-controls="collapseExample-2">Comment</a> &middot;
                      <span>
                        <a>31</a>
                      </span>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
                        <i class="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas fa-thumbs-down"></i>
                      </a>
                      <div class="collapse" id="collapseExample-2">
                        <div class="card card-body mt-1">

                          <!-- Add comment -->
                          <div class="md-form mt-1 mb-1">
                            <textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-2"
                              aria-expanded="false" aria-controls="collapseExample-2">Cancel</button>
                            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-2"
                              aria-expanded="false" aria-controls="collapseExample-2">Reply</button>
                          </div>

                        </div>
                      </div>
                    </div>
                    <!-- Feed footer -->

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- Second news -->

                <!-- Third news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Danny Moore</a> added you as a friend
                      <div class="date">7 hours ago</div>
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="comment" data-toggle="collapse" href="#collapseExample-3" aria-expanded="false"
                        aria-controls="collapseExample-3">Comment</a> &middot;
                      <span>
                        <a>12</a>
                      </span>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
                        <i class="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas fa-thumbs-down"></i>
                      </a>
                      <div class="collapse" id="collapseExample-3">
                        <div class="card card-body mt-1">

                          <!-- Add comment -->
                          <div class="md-form mt-1 mb-1">
                            <textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-3"
                              aria-expanded="false" aria-controls="collapseExample-3">Cancel</button>
                            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-3"
                              aria-expanded="false" aria-controls="collapseExample-3">Reply</button>
                          </div>

                        </div>
                      </div>
                    </div>
                    <!-- Feed footer -->

                  </div>

                </div>
                <!-- Third news -->

                <!-- Fourth news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(18)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt">
                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Lili Rose</a> posted on his page
                      <div class="date">2 days ago</div>
                    </div>
                    <!-- Added text -->
                    <div class="added-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero inventore,
                      iste quas libero eius? Vitae sint neque animi alias sunt dolor, accusantium ducimus, non placeat
                      voluptate.</div>
                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="comment" data-toggle="collapse" href="#collapseExample-4" aria-expanded="false"
                        aria-controls="collapseExample-4">Comment</a> &middot;
                      <span>
                        <a>25</a>
                      </span>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
                        <i class="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas fa-thumbs-down"></i>
                      </a>
                      <div class="collapse" id="collapseExample-4">
                        <div class="card card-body mt-1">
                          <!-- Add comment -->
                          <div class="md-form mt-1 mb-1">
                            <textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-4"
                              aria-expanded="false" aria-controls="collapseExample-4">Cancel</button>
                            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-4"
                              aria-expanded="false" aria-controls="collapseExample-4">Reply</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <!-- Fourth news -->

                <!-- Fifth news -->
                <div class="news">

                  <!-- Label -->
                  <div class="label">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20)-mini.jpg" class="rounded-circle z-depth-1-half">
                  </div>

                  <!-- Excerpt -->
                  <div class="excerpt mb-0">

                    <!-- Brief -->
                    <div class="brief">
                      <a class="name">Kate Harrison</a> added
                      <a> 2 new photos</a> of you
                      <div class="date">3 days ago</div>
                    </div>

                    <!-- Added images -->
                    <div class="added-images">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/81.jpg" class="z-depth-1 rounded mb-md-0 mb-2">
                      <img src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" class="z-depth-1 rounded">
                    </div>

                    <!-- Feed footer -->
                    <div class="feed-footer">
                      <a class="comment" data-toggle="collapse" href="#collapseExample-5" aria-expanded="false"
                        aria-controls="collapseExample-5">Comment</a> &middot;
                      <span>
                        <a>47</a>
                      </span>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I like it">
                        <i class="fas fa-thumbs-up"></i>
                      </a>
                      <a class="thumbs" data-toggle="tooltip" data-placement="top" title="I don't like it">
                        <i class="fas fa-thumbs-down"></i>
                      </a>
                      <div class="collapse" id="collapseExample-5">
                        <div class="card card-body mt-1">

                          <!-- Add comment -->
                          <div class="md-form mt-1 mb-1">
                            <textarea type="text" id="form7" class="form-control md-textarea" rows="3"></textarea>
                            <label for="form7">Add comment</label>
                          </div>
                          <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-flat waves-effect" data-toggle="collapse" data-target="#collapseExample-5"
                              aria-expanded="false" aria-controls="collapseExample-5">Cancel</button>
                            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample-5"
                              aria-expanded="false" aria-controls="collapseExample-5">Reply</button>
                          </div>

                        </div>
                      </div>
                    </div>
                    <!-- Feed footer -->

                  </div>
                  <!-- Excerpt -->

                </div>
                <!-- Fifth news -->

              </div>
              <!-- Newsfeed -->

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Social newsfeed v.2 -->

Personal card MDB Pro component

Card image cap

Clara

Joined in 2013

Clara is an photographer living in Madrid.

22 Friends 


        <!-- Section: Personal card -->
        <section class="my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-6 col-lg-4">

              <!-- Card -->
              <mdb-card class="card-personal">

                <!-- Card image-->
                <mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg"></mdb-card-img>
                <!-- Card image-->

                <!-- Card content -->
                <mdb-card-body class="card-body">
                  <!-- Title-->
                  <mdb-card-title>
                    <a>
                      <h4 class="card-title title-one">Clara</h4>
                    </a>
                  </mdb-card-title>
                  <p class="card-meta">Joined in 2013</p>
                  <!-- Text -->
                  <mdb-card-text>
                    Clara is an photographer living in Madrid.
                  </mdb-card-text>
                  <!-- <p class="card-text"></p> -->
                  <hr>
                  <a class="card-meta"><span><i class="fas fa-user"></i>22 Friends</span></a>
                </mdb-card-body>
                <!-- Card content -->

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

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Personal card -->

Social news card MDB Pro component

14 h
Kate
Card image cap 


        <!-- Section: Social news card -->
        <section class="my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-6 col-lg-4">

              <!-- Card -->
              <mdb-card class="news-card">

                <!-- Heading-->
                <mdb-card-body>
                  <div class="content">
                    <div class="right-side-meta">14 h</div>
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(17)-mini.jpg" class="rounded-circle avatar-img z-depth-1-half">Kate
                  </div>
                </mdb-card-body>

                <!-- Card image-->
                <mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/girl1.jpg"></mdb-card-img>

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

                  <!-- Social meta-->
                  <div class="social-meta">
                    <p>Another great adventure! </p>
                    <span><i class="far fa-heart"></i>25 likes</span>
                    <p><i class="fas fa-comment"></i>13 comments</p>
                  </div>
                  <hr>
                  <!-- Comment input -->
                  <div class="md-form">
                    <i class="far fa-heart prefix"></i>
                    <input placeholder="Add Comment..." type="text" id="form5" class="form-control">
                  </div>

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

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

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Social news card -->

Social card with video MDB Pro component

2 h
Tony 


        <!-- Section: Social card with video-->
        <section class="my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-6 col-lg-4">

              <!-- Card -->
              <mdb-card class="news-card">

                <!-- Heading-->
                <mdb-card-body>
                  <div class="content">
                    <div class="right-side-meta">2 h</div>
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle avatar-img z-depth-1-half">Tony
                  </div>
                </mdb-card-body>

                <!-- Card video-->
                <div class="embed-responsive embed-responsive-1by1">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/37pwbUp8t1I" allowfullscreen></iframe>
                </div>

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

                  <!-- Social meta-->
                  <div class="social-meta">
                    <p class="blue-text">#awesome #bboy #battle #breaking #cool</p>
                    <span><i class="far fa-heart"></i>265 likes</span>
                    <p><i class="fas fa-comment "></i>89 comments</p>
                  </div>

                  <hr>

                  <!-- Comment input -->
                  <div class="md-form ">
                    <i class="far fa-heart prefix"></i>
                    <input placeholder="Add Comment..." type="text" id="form555" class="form-control">
                  </div>

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

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

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Social card with video-->

Group of personal card MDB Pro component

Card image cap

Anna

 Friends

Anna is a web designer living in New York.

83 Friends

Joined in 2012

Card image cap

John

 Coworker

John is a copywriter living in Seattle.

48 Friends

Joined in 2015

Card image cap

Sara

 Coworker

Sara is a video maker living in Tokyo.

127 Friends

Joined in 2014



        <!-- Section: Group of personal cards -->
        <section class="my-5">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12">

              <!-- Card group-->
              <div class="card-group">

                <!-- Card -->
                <mdb-card class="card-personal mb-md-0 mb-4">

                  <!-- Card image-->
                  <div class="view overlay">
                    <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" alt="Card image cap">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>
                  <!-- Card image-->

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

                    <!-- Title-->
                    <mdb-card-title>
                      <a>
                        <h4 class="card-title">Anna</h4>
                      </a>
                    </mdb-card-title>

                    <a class="card-meta">Friends</a>
                    <!-- Text -->
                    <mdb-card-text>Anna is a web designer living in New York.</mdb-card-text>
                    <hr>
                    <a class="card-meta"><span><i class="fas fa-user"></i>83 Friends</span></a>
                    <p class="card-meta float-right">Joined in 2012</p>

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

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

                <!-- Card -->
                <mdb-card class="card-personal mb-md-0 mb-4">

                  <!-- Card image-->
                  <div class="view overlay">
                    <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="Card image cap">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>
                  <!-- Card image-->

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

                    <!-- Title-->
                    <mdb-card-title>
                      <a>
                        <h4 class="card-title">John</h4>
                      </a>
                    </mdb-card-title>

                    <a class="card-meta">Coworker</a>
                    <!-- Text -->
                    <mdb-card-text>John is a copywriter living in Seattle.</mdb-card-text>
                    <hr>
                    <a class="card-meta"><span><i class="fas fa-user"></i>48 Friends</span></a>
                    <p class="card-meta float-right">Joined in 2015</p>

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

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

                <!-- Card -->
                <mdb-card class="card-personal mb-md-0 mb-4">

                  <!-- Card image-->
                  <div class="view overlay">
                    <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(28).jpg" alt="Card image cap">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>
                  <!-- Card image-->

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

                    <!-- Title-->
                    <mdb-card-title>
                      <a>
                        <h4 class="card-title">Sara</h4>
                      </a>
                    </mdb-card-title>

                    <a class="card-meta">Coworker</a>
                    <!-- Text -->
                    <mdb-card-text class="card-text">Sara is a video maker living in Tokyo.</mdb-card-text>
                    <hr>
                    <a class="card-meta"><span><i class="fas fa-user"></i>127 Friends</span></a>
                    <p class="card-meta float-right">Joined in 2014</p>

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

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

              </div>
              <!-- Card group-->

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!-- Section: Group of personal cards -->

Angular Social - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular social sections.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

// MDB Angular Pro
import { CardsFreeModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
Import example Modules list