Angular Bootstrap Magazine sections

Angular magazine sections - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

MDB provides you multiple sections and components typical for magazines.


Required styles import

Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global styles.scss stylesheet file.

        
            
          @import "~ng-uikit-pro-standard/assets/scss/core/colors";
          @import "~ng-uikit-pro-standard/assets/scss/core/variables";
          @import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";
  
          @import "~ng-uikit-pro-standard/assets/scss/sections-pro/_magazine-pro.scss";
        
        
    

Magazine newsfeed v.1 MDB Pro component

Section title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.

Travels

20/08/2018

Title of the news

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Lifestyle

24/08/2018

Title of the news

Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

        
            
            <!--Section: Magazine v.1-->
            <section class="magazine-section my-5">
  
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold text-center my-5">Section title</h2>
              <!-- Section description -->
              <p class="text-center dark-grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
                voluptate
                velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.</p>
  
              <!-- Grid row -->
              <div class="row">
  
                <!-- Grid column -->
                <div class="col-lg-6 col-md-12">
  
                  <!-- Featured news -->
                  <div class="single-news mb-4">
  
                    <!-- Image -->
                    <div class="view overlay rounded z-depth-1-half mb-4">
                      <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/82.webp" alt="Sample image">
                      <a>
                        <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                      </a>
                    </div>
  
                    <!-- Data -->
                    <div class="news-data d-flex justify-content-between">
                      <a href="#!" class="light-blue-text">
                        <h6 class="font-weight-bold">
                          <mdb-icon fas icon="plane" class="pr-2"></mdb-icon>Travels</h6>
                      </a>
                      <p class="font-weight-bold dark-grey-text">
                        <mdb-icon far icon="clock" class="pr-2"></mdb-icon>20/08/2018</p>
                    </div>
  
                    <!-- Excerpt -->
                    <h3 class="font-weight-bold dark-grey-text mb-3">
                      <a>Title of the news</a>
                    </h3>
                    <p class="dark-grey-text">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
                      quo
                      minus id quod maxime placeat
                      facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
  
                  </div>
                  <!-- Featured news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/photo8.webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">19/08/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/54.webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">18/08/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">Soluta nobis est eligendi optio cumque nihil impedit quo
                              minus</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-lg-0 mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-lg-0 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/49.webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">17/08/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-lg-0 mb-3">
                            <a href="#!" class="dark-grey-text">Voluptatem accusantium doloremque</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-lg-6 col-md-12">
  
                  <!-- Featured news -->
                  <div class="single-news mb-4">
  
                    <!-- Image -->
                    <div class="view overlay rounded z-depth-1-half mb-4">
                      <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/84.webp" alt="Sample image">
                      <a>
                        <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                      </a>
                    </div>
  
                    <!-- Data -->
                    <div class="news-data d-flex justify-content-between">
                      <a href="#!" class="pink-text">
                        <h6 class="font-weight-bold">
                          <mdb-icon fas icon="home" class="pr-2"></mdb-icon>Lifestyle</h6>
                      </a>
                      <p class="font-weight-bold dark-grey-text">
                        <mdb-icon far icon="clock" class="pr-2"></mdb-icon>24/08/2018</p>
                    </div>
  
                    <!-- Excerpt -->
                    <h3 class="font-weight-bold dark-grey-text mb-3">
                      <a>Title of the news</a>
                    </h3>
                    <p class="dark-grey-text">Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem
                      accusantium
                      doloremque laudantium,
                      totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
  
                  </div>
                  <!-- Featured news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/86.webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">23/08/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">Itaque earum rerum hic tenetur a sapiente delectus</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/48.webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">22/08/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">Soluta nobis est eligendi optio cumque nihil impedit quo
                              minus</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-md-0 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(56).webp"
                            alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">21/08/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0">
                            <a href="#!" class="dark-grey-text">Maiores alias consequatur aut perferendis</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                </div>
                <!-- Grid column -->
  
              </div>
              <!-- Grid row -->
  
            </section>
            <!--/Section: Magazine v.1-->
          
        
    

Magazine newsfeed v.2 MDB Pro component

Section title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.

Culinary

27/02/2018

Title of the news

Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

        
            
            <!--Section: Magazine v.2-->
            <section class="magazine-section my-5">
  
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold text-center my-5">Section title</h2>
              <!-- Section description -->
              <p class="text-center dark-grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
                voluptate
                velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.</p>
  
              <!-- Grid row -->
              <div class="row">
  
                <!-- Grid column -->
                <div class="col-lg-6 col-md-12">
  
                  <!-- Featured news -->
                  <div class="single-news mb-lg-0 mb-4">
  
                    <!-- Image -->
                    <div class="view overlay rounded z-depth-1-half mb-4">
                      <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Slides/1.webp" alt="Sample image">
                      <a>
                        <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                      </a>
                    </div>
  
                    <!-- Data -->
                    <div class="news-data d-flex justify-content-between">
                      <a href="#!" class="deep-orange-text">
                        <h6 class="font-weight-bold">
                          <mdb-icon fas icon="utensils" class="pr-2"></mdb-icon>Culinary</h6>
                      </a>
                      <p class="font-weight-bold dark-grey-text">
                        <mdb-icon far icon="clock" class="pr-2"></mdb-icon>27/02/2018</p>
                    </div>
  
                    <!-- Excerpt -->
                    <h3 class="font-weight-bold dark-grey-text mb-3">
                      <a>Title of the news</a>
                    </h3>
                    <p class="dark-grey-text mb-lg-0 mb-md-5 mb-4">Sed ut perspiciatis unde voluptatem omnis iste natus
                      error sit
                      voluptatem accusantium doloremque laudantium,
                      totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                      explicabo.
                      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p>
  
                  </div>
                  <!-- Featured news -->
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-lg-6 col-md-12">
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img%20(29).webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">26/02/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">At vero eos et accusamus et iusto odio dignissimos ducimus
                              qui
                              blanditiis</a>
                          </div>
                          <a>
                            <i class="fas fa-angle-double-right"></i>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).webp"
                            alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">25/02/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">Itaque earum rerum hic tenetur a sapiente delectus</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-4">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/87.webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">24/02/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-3">
                            <a href="#!" class="dark-grey-text">Soluta nobis est eligendi optio cumque nihil impedit quo
                              minus</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news">
  
                    <!-- Grid row -->
                    <div class="row">
  
                      <!-- Grid column -->
                      <div class="col-md-3">
  
                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 mb-md-0 mb-4">
                          <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img%20(27).webp" alt="Sample image">
                          <a>
                            <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                      <!-- Grid column -->
                      <div class="col-md-9">
  
                        <!-- Excerpt -->
                        <p class="font-weight-bold dark-grey-text">23/02/2018</p>
                        <div class="d-flex justify-content-between">
                          <div class="col-11 text-truncate pl-0 mb-lg-3">
                            <a href="#!" class="dark-grey-text">Duis aute irure dolor in reprehenderit in voluptate</a>
                          </div>
                          <a>
                            <mdb-icon fas icon="angle-double-right"></mdb-icon>
                          </a>
                        </div>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                  </div>
                  <!-- Small news -->
  
                </div>
                <!--Grid column-->
  
              </div>
              <!-- Grid row -->
  
            </section>
            <!--Section: Magazine v.2-->
          
        
    

Magazine newsfeed v.3 MDB Pro component

Section title

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.

        
            
            <!--Section: Magazine v.3-->
            <section class="magazine-section my-5">
  
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold text-center my-5">Section title</h2>
              <!-- Section description -->
              <p class="text-center w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in voluptate velit
                esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint
                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit id laborum.</p>
  
              <!-- Grid row -->
              <div class="row">
  
                <!-- Grid column -->
                <div class="col-lg-4 col-md-12 mb-lg-0 mb-5">
  
                  <!-- Featured news -->
                  <div class="single-news mb-3">
  
                    <!-- Image -->
                    <div class="view overlay rounded z-depth-2 mb-4">
                      <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/86.webp" alt="Sample image">
                      <a>
                        <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                      </a>
                    </div>
  
                    <!-- Grid row -->
                    <div class="row mb-3">
  
                      <!-- Grid column -->
                      <div class="col-12">
  
                        <!-- Badge -->
                        <a href="#!">
                          <mdb-badge color="pink">
                            <mdb-icon fas icon="camera" class="pr-2" aria-hidden="true"></mdb-icon>Adventure</mdb-badge>
                        </a>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a class="font-weight-bold">This is title of the news</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Featured news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>24 Food Swaps That Slash Calories.</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>How to Make a Beet Cocktail?</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>8 Sneaky Reasons You're Always Hungry.</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0">
                        <a>5 Pressure Cooker Recipes You Need to Try.</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-lg-4 col-md-6 mb-md-0 mb-5">
  
                  <!-- Featured news -->
                  <div class="single-news mb-3">
  
                    <!-- Image -->
                    <div class="view overlay rounded z-depth-2 mb-4">
                      <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/31.webp" alt="Sample image">
                      <a>
                        <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                      </a>
                    </div>
  
                    <!-- Grid row -->
                    <div class="row mb-3">
  
                      <!-- Grid column -->
                      <div class="col-12">
  
                        <!-- Badge -->
                        <a href="#!">
                          <mdb-badge color="deep-orange">
                            <mdb-icon fas icon="plane" class="pr-2" aria-hidden="true"></mdb-icon>Travel</mdb-badge>
                        </a>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a class="font-weight-bold">This is title of the news</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Featured news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>Trends in the blogosphere for 2016.</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>Where you eat the best lunch in Warsaw?</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>What camera take for holidays?</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0">
                        <a>Why you should visit Lisbon?</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                </div>
                <!-- Grid column -->
  
                <!-- Grid column -->
                <div class="col-lg-4 col-md-6 mb-0">
  
                  <!-- Featured news -->
                  <div class="single-news mb-3">
  
                    <!-- Image -->
                    <div class="view overlay rounded z-depth-2 mb-4">
                      <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/52.webp" alt="Sample image">
                      <a>
                        <div class="mask rgba-white-slight waves-light" mdbWavesEffect></div>
                      </a>
                    </div>
  
                    <!-- Grid row -->
                    <div class="row mb-3">
  
                      <!-- Grid column -->
                      <div class="col-12">
  
                        <!-- Badge -->
                        <a href="#!">
                          <mdb-badge success="true">
                            <mdb-icon fas icon="plane" class="pr-2" aria-hidden="true"></mdb-icon>Nature</mdb-badge>
                        </a>
  
                      </div>
                      <!-- Grid column -->
  
                    </div>
                    <!-- Grid row -->
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a class="font-weight-bold">This is title of the news</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Featured news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>How to recognize the footsteps of wild animals?</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>National Parks in Poland.</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news mb-3">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0 mb-3">
                        <a>Traveling without littering the planet.</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                  <!-- Small news -->
                  <div class="single-news">
  
                    <!-- Title -->
                    <div class="d-flex justify-content-between">
                      <div class="col-11 text-truncate pl-0">
                        <a>How to protect rainforests?</a>
                      </div>
                      <a>
                        <mdb-icon fas icon="angle-double-right"></mdb-icon>
                      </a>
                    </div>
  
                  </div>
                  <!-- Small news -->
  
                </div>
                <!-- Grid column -->
  
              </div>
              <!-- Grid row -->
  
            </section>
            <!--Section: Magazine v.3-->
          
        
    

Angular Magazine - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular magazine 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.

        
            
          import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'