News Blogs

To help you reach your audience in a personal and more informal way, Space includes several News Blogs to start with.

Classic News Blog

              
                <div class="card-mb card-sm-columns card-sm-2-count">
                  <!-- Blog Grid -->
                  <article class="card mb-3">
                    <img class="card-img-top" src="../assets/img/500x250/img11.jpg" alt="Image Description">
                    <div class="card-body p-5">
                      <small class="d-block text-muted mb-2">April 3, 2018</small>
                      <h3 class="h5">
                        <a href="../html/blog/single-article-classic.html">Respect always comes first</a>
                      </h3>
                      <p>The past years have been remarkable for web technologies.</p>
                    </div>
                    <div class="card-footer bg-gray-100 py-4 px-5">
                      <div class="media">
                        <img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="d-inline-block mb-0">
                            <a class="d-block font-size-13" href="../html/blog/single-article-classic.html">Andrea Gard</a>
                          </h4>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->

                  <!-- Blog Grid -->
                  <article class="card mb-3">
                    <img class="card-img-top" src="../assets/img/500x250/img6.jpg" alt="Image Description">
                    <div class="card-body p-5">
                      <small class="d-block text-muted mb-2">May 22, 2018</small>
                      <h3 class="h5">
                        <a href="../html/blog/single-article-classic.html">Announcing a plan for small teams</a>
                      </h3>
                      <p class="mb-0">We've always believed that by providing a space</p>
                    </div>
                    <div class="card-footer bg-gray-100 py-4 px-5">
                      <div class="media">
                        <img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="d-inline-block mb-0">
                            <a class="d-block font-size-13" href="#">James Austin</a>
                          </h4>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->
                </div>
              
            

Grid News Blog

              
                <div class="card-deck d-block d-lg-flex">
                  <!-- Blog Grid -->
                  <article class="card mb-5">
                    <div class="card-body p-5">
                      <small class="d-block-2">May 15, 2018</small>
                      <h2 class="h5">
                        <a href="../html/blog/single-article-classic.html">InVision design forward fund</a>
                      </h2>
                      <p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
                    </div>
                    <div class="card-footer bg-gray-100 py-4 px-5">
                      <div class="media">
                        <img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                        <div class="media-body">
                          <h3 class="d-inline-block mb-0">
                            <a class="d-block font-size-13" href="#">Andrea Gard</a>
                          </h3>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->

                  <!-- Blog Grid -->
                  <article class="card mb-5">
                    <div class="card-body p-5">
                      <small class="d-block-2">May 22, 2018</small>
                      <h3 class="h5">
                        <a href="../html/blog/single-article-classic.html">Announcing a plan for small teams</a>
                      </h3>
                      <p class="mb-0">We've always believed that by providing a space</p>
                    </div>
                    <div class="card-footer bg-gray-100 py-4 px-5">
                      <div class="media">
                        <img class="u-sm-avatar rounded-circle mr-3" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                        <div class="media-body">
                          <h4 class="d-inline-block mb-0">
                            <a class="d-block font-size-13" href="#">James Austin</a>
                          </h4>
                        </div>
                      </div>
                    </div>
                  </article>
                  <!-- End Blog Grid -->
                </div>
              
            

List News Blog

              
                <div class="card-deck d-block d-lg-flex">
                  <article class="card border-0 mb-5">
                    <div class="card-body row align-items-stretch no-gutters p-0">
                      <!-- News Blog Card -->
                      <div class="col-7 border border-right-0 rounded-left">
                        <div class="p-5">
                          <h2 class="h5 mb-3">
                            <a href="../html/blog/single-article-classic.html">InVision design forward fund</a>
                          </h2>
                          <p class="mb-0">Clark Valberg is the founder and CEO of InVision.</p>
                        </div>
                      </div>
                      <div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img4.jpg"></div>
                    </div>
                    <!-- End News Blog Card -->
                  </article>

                  <article class="card border-0 mb-5">
                    <div class="card-body row align-items-stretch no-gutters p-0">
                      <!-- News Blog Card -->
                      <div class="col-7 border border-right-0 rounded-left">
                        <div class="p-5">
                          <h3 class="h5 mb-3">
                            <a href="../html/blog/single-article-classic.html">Announcing a plan for small teams</a>
                          </h3>
                          <p class="mb-0">We've always believed that by providing a space</p>
                        </div>
                      </div>
                      <div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img6.jpg"></div>
                    </div>
                    <!-- End News Blog Card -->
                  </article>
                </div>

                <div class="card-deck d-block d-lg-flex">
                  <article class="card border-0 mb-5">
                    <div class="card-body row align-items-stretch no-gutters p-0">
                      <!-- News Blog Card -->
                      <div class="col-7 border border-right-0 rounded-left">
                        <div class="p-5">
                          <h3 class="h5 mb-3">
                            <a href="../html/blog/single-article-classic.html">Design principles</a>
                          </h3>
                          <p class="mb-0">The biggest collections of design principles on the internet</p>
                        </div>
                      </div>
                      <div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img3.jpg"></div>
                    </div>
                    <!-- End News Blog Card -->
                  </article>

                  <article class="card border-0 mb-5">
                    <div class="card-body row align-items-stretch no-gutters p-0">
                      <!-- News Blog Card -->
                      <div class="col-7 border border-right-0 rounded-left">
                        <div class="p-5">
                          <h3 class="h5 mb-3">
                            <a href="../html/blog/single-article-classic.html">Touch yourself</a>
                          </h3>
                          <p class="mb-0">Everyone's are different, and they can even change</p>
                        </div>
                      </div>
                      <div class="col-5 card-img-right border border-left-0 bg-img-hero" data-bg-img-src="../assets/img/500x550/img2.jpg"></div>
                    </div>
                    <!-- End News Blog Card -->
                  </article>
                </div>
              
            

Masonry News Blog

              
                <div class="card-mb card-sm-columns card-sm-2-count card-lg-3-count">
                  <!-- News Blog -->
                  <article class="card border-0 mb-3">
                    <div class="card-body bg-primary rounded p-5">
                      <span class="fab fa-instagram fa-2x text-white mb-4"></span>
                      <div class="mb-5">
                        <h2 class="h5 text-white">Love for Space always comes first</h2>
                      </div>
                      <a class="btn btn-sm btn-outline-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Follow @Space</a>
                    </div>
                  </article>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <article class="card mb-3">
                    <div class="card-body">
                      <img class="img-fluid rounded" src="../assets/img/500x330/img20.jpg" alt="Image Description">
                      <div class="p-5">
                        <h3 class="h5 mb-0">
                          <a href="#">A UX strategy for the Ultimate Product Launch</a>
                        </h3>
                      </div>
                    </div>
                  </article>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <article class="card mb-3">
                    <div class="card-body">
                      <img class="img-fluid rounded" src="../assets/img/500x330/img12.jpg" alt="Image Description">
                      <div class="p-5">
                        <h4 class="h5 mb-0">
                          <a href="#">Breathing in the Crisp Air of Lake</a>
                        </h4>
                      </div>
                    </div>
                  </article>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <article class="card border-0 mb-3">
                    <div class="card-body bg-dark rounded p-5">
                      <span class="fab fa-github fa-2x text-white mb-4"></span>
                      <div class="mb-5">
                        <h4 class="h5 text-white">Sit still with ClearMotion</h4>
                      </div>
                      <a class="btn btn-sm btn-outline-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Follow @Space</a>
                    </div>
                  </article>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <article class="card border-0 mb-3">
                    <div class="card-body bg-purple rounded p-5">
                      <span class="fab fa-linkedin fa-2x text-white mb-4"></span>
                      <div class="mb-5">
                        <h4 class="h5 text-white">Design principles</h4>
                      </div>
                      <a class="btn btn-sm btn-outline-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Follow @Space</a>
                    </div>
                  </article>
                  <!-- End News Blog -->

                  <!-- News Blog -->
                  <article class="card mb-3">
                    <div class="card-body">
                      <img class="img-fluid rounded" src="../assets/img/500x330/img4.jpg" alt="Image Description">
                      <div class="p-5">
                        <h4 class="h5 mb-0">
                          <a href="#">The Hypnotic Allure of Cinemagraphic Waves</a>
                        </h4>
                      </div>
                    </div>
                  </article>
                  <!-- End News Blog -->
                </div>
              
            

Card News Blog #1

We're changing how teams work together

Think back to the last time you were deep in the zone—time flew by and the work flowed through you almost effortlessly.

Learn More
              
                <!-- Card News Blog Section -->
                <div class="bg-img-hero" style="background-image: url(../assets/img/bg/bg1.png);">
                  <div class="container space-2 space-3--lg">
                    <!-- Card News Blog -->
                    <div class="w-md-75 w-lg-60 mx-md-auto">
                      <div class="row shadow-sm">
                        <div class="col-6 rounded-left bg-img-hero" data-bg-img-src="../assets/img/500x550/img12.jpg"></div>
                        <div class="col-6 bg-white rounded-right">
                          <div class="p-3 p-sm-5">
                            <div class="mb-4">
                              <h3 class="h4 mb-4">
                                <a href="#">We're changing how teams work together</a>
                              </h3>
                              <p class="mb-0">Think back to the last time you were deep in the zone—time flew by and the work flowed through you almost effortlessly.</p>
                            </div>
                            <a href="#">Learn More</a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Card News Blog -->
                  </div>
                </div>
                <!-- End Card News Blog Section -->
              
            

Slick News Blog #1

News

Read our news & blogs

Our duty towards you is to share our experience we're reaching in our work path with you.

HTML:

              
                <!-- Resources Section - Title -->
                <div class="bg-purple bg-img-hero" style="background-image: url(../assets/img/bg/bg2.png);">
                  <div class="container space-2-top space-3-top--lg space-3-bottom">
                    <!-- Title -->
                    <div class="w-md-80 text-center w-lg-60 mx-lg-auto">
                      <span class="u-label u-label--sm u-label--light mb-3">News</span>
                      <h2 class="text-white">Read our news & blogs</h2>
                      <p class="lead text-light">Our duty towards you is to share our experience we're reaching in our work path with you.</p>
                    </div>
                    <!-- End Title -->
                  </div>
                </div>
                <!-- End Resources Section - Title -->

                <!-- Resources Section - Content -->
                <div class="container space-2-bottom space-3-bottom--lg mt-offset-9">
                  <!-- Slick Carousel -->
                  <div class="js-slick-carousel u-slick u-slick--gutters-3 u-slick--equal-height u-slick--pagination-modern"
                       data-slides-show="3"
                       data-slides-scroll="2"
                       data-pagi-classes="u-slick__pagination mt-2 mr-1"
                       data-responsive='[{
                         "breakpoint": 992,
                         "settings": {
                           "slidesToShow": 2
                         }
                       }, {
                         "breakpoint": 768,
                         "settings": {
                           "slidesToShow": 1
                         }
                       }]'>
                    <!-- Card -->
                    <div class="js-slide">
                      <div class="card border shadow-sm rounded mb-4">
                        <div class="card-header bg-gray-100 p-5">
                          <h3 class="small text-muted text-uppercase">Business</h3>
                          <div class="row">
                            <div class="col-6">
                              <h4 class="h6">
                                <a href="../blog/single-article-classic.html">Gimme that Awwward!</a>
                              </h4>
                            </div>
                            <div class="col-6">
                              <img class="img-fluid" src="../assets/img/500x330/img21.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-5 px-5">
                          <p>Tis the season to be jolly, and Ueno has one more thing to be cheery about in 2017.</p>
                        </div>
                        <div class="card-footer border-0 pt-0 pb-5 px-5">
                          <a class="btn btn-sm btn-primary" href="#">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="js-slide">
                      <div class="card border shadow-sm rounded mb-4">
                        <div class="card-header bg-gray-100 p-5">
                          <h3 class="small text-muted text-uppercase">Webinar</h3>
                          <div class="row">
                            <div class="col-6">
                              <h4 class="h6">
                                <a href="../blog/single-article-classic.html">A win-win-win situation</a>
                              </h4>
                            </div>
                            <div class="col-6">
                              <img class="img-fluid" src="../assets/img/500x330/img11.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-5 px-5">
                          <p>It's nice to win awards. Last night, the Ueno team in Reykjavík came home from the Icelandic Web Awards.</p>
                        </div>
                        <div class="card-footer border-0 pt-0 pb-5 px-5">
                          <a class="btn btn-sm btn-primary" href="#">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="js-slide">
                      <div class="card border shadow-sm rounded mb-4">
                        <div class="card-header bg-gray-100 p-5">
                          <h3 class="small text-muted text-uppercase">Article</h3>
                          <div class="row">
                            <div class="col-6">
                              <h4 class="h6">
                                <a href="../blog/single-article-classic.html">Key benefits of project Space template</a>
                              </h4>
                            </div>
                            <div class="col-6">
                              <img class="img-fluid" src="../assets/img/500x330/img22.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-5 px-5">
                          <p>Test Space on Atlassian Cloud with your own data for free.</p>
                        </div>
                        <div class="card-footer border-0 pt-0 pb-5 px-5">
                          <a class="btn btn-sm btn-primary" href="#">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="js-slide">
                      <div class="card border shadow-sm rounded mb-4">
                        <div class="card-header bg-gray-100 p-5">
                          <h3 class="small text-muted text-uppercase">Start-Up</h3>
                          <div class="row">
                            <div class="col-6">
                              <h4 class="h6">
                                <a href="../blog/single-article-classic.html">InVision design forward fund</a>
                              </h4>
                            </div>
                            <div class="col-6">
                              <img class="img-fluid" src="../assets/img/500x330/img20.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-5 px-5">
                          <p>Clark Valberg is the founder and CEO of InVision.</p>
                        </div>
                        <div class="card-footer border-0 pt-0 pb-5 px-5">
                          <a class="btn btn-sm btn-primary" href="#">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="js-slide">
                      <div class="card border shadow-sm rounded mb-4">
                        <div class="card-header bg-gray-100 p-5">
                          <h3 class="small text-muted text-uppercase">Business</h3>
                          <div class="row">
                            <div class="col-6">
                              <h4 class="h6">
                                <a href="../blog/single-article-classic.html">A new look for Reuters.com</a>
                              </h4>
                            </div>
                            <div class="col-6">
                              <img class="img-fluid" src="../assets/img/500x330/img10.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-5 px-5">
                          <p>We've been working hard with our besties at Reuters to design a new reading experience for Reuters.com.</p>
                        </div>
                        <div class="card-footer border-0 pt-0 pb-5 px-5">
                          <a class="btn btn-sm btn-primary" href="#">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Card -->

                    <!-- Card -->
                    <div class="js-slide">
                      <div class="card border shadow-sm rounded mb-4">
                        <div class="card-header bg-gray-100 p-5">
                          <h3 class="small text-muted text-uppercase">Design</h3>
                          <div class="row">
                            <div class="col-6">
                              <h4 class="h6">
                                <a href="../blog/single-article-classic.html">A UX strategy for the Ultimate Product Launch</a>
                              </h4>
                            </div>
                            <div class="col-6">
                              <img class="img-fluid" src="../assets/img/500x330/img15.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                        <div class="card-body pt-5 px-5">
                          <p>Different stations of elements to reach the ultimate destination of design.</p>
                        </div>
                        <div class="card-footer border-0 pt-0 pb-5 px-5">
                          <a class="btn btn-sm btn-primary" href="#">Learn more</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Slick Carousel -->
                </div>
                <!-- End Resources Section - Content -->
              
            

CSS library:

            
              <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
            
          

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

              <!-- JS Space -->
              <script src="../../assets/js/components/hs.slick-carousel.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of slick carousel
                  $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
                });
              </script>