Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding Recent News Boxes to Your Website

One of the many ways to display recent news is through the use of a box and grid based system

One of the most common components to any website is a section that displays a number of your most recent news articles. This helps keep your users engaged and provides the necessary real estate to showcase featured content.

Of course, there are multiple ways to display this type of content, from a vertical list to minimal textual information. An additional way to display recent news is through the use of a box and grid based system. Using this method, you can create the needed space to include a news entry's featured image, the article's posting date, and it's title.

In some designs, it's important to keep the information displayed to a minimum. Showing a date and an entry's title is often the only key information needed. Additionally, images tend to drive better click-through-rates and so it's generally a good idea to showcase a featured image if possible. With this in mind, a simple box container system can accommodate these aspects to a recent news article.

Below is the HTML, CSS, and JavaScript required.

Step 1 - recent-news-boxes.html

Copy and paste the code below into recent-news-boxes.html

<section class="recentNews">
  <div class="container">
    <h2 class="news-title">Recent News</h2>
    <div class="row">
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-1.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>March</span><strong>1</strong>
            </div>
            <h3 class="ct-blog-header">
              WebCorpCo Will Be Visiting a Number of Upcoming Conferences
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-2.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>27</strong>
            </div>
            <h3 class="ct-blog-header">
              WebCorpCo Has Been Named to Inc. 5000
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-3.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>25</strong>
            </div>
            <h3 class="ct-blog-header">
              7 Crtical Factors when Choosing a CMS
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-4.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>23</strong>
            </div>
            <h3 class="ct-blog-header">
              The Best Ways to Leverage Data and Deliver on Your Investment
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-5.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>20</strong>
            </div>
            <h3 class="ct-blog-header">
              Latest API Integrations Available through CMS 8
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-6.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>16</strong>
            </div>
            <h3 class="ct-blog-header">
              WebCorpCo's Latest Release (CMS 8) Available Today
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-news btn-contests">
      <a href="#">VIEW ALL NEWS</a>
    </div>
  </div>
</section>

 
<section class="recentNews">
  <div class="container">
    <h2 class="news-title">Recent News</h2>
    <div class="row">
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-1.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>March</span><strong>1</strong>
            </div>
            <h3 class="ct-blog-header">
              WebCorpCo Will Be Visiting a Number of Upcoming Conferences
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-2.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>27</strong>
            </div>
            <h3 class="ct-blog-header">
              WebCorpCo Has Been Named to Inc. 5000
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-3.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>25</strong>
            </div>
            <h3 class="ct-blog-header">
              7 Crtical Factors when Choosing a CMS
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-4.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>23</strong>
            </div>
            <h3 class="ct-blog-header">
              The Best Ways to Leverage Data and Deliver on Your Investment
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-5.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>20</strong>
            </div>
            <h3 class="ct-blog-header">
              Latest API Integrations Available through CMS 8
            </h3>
          </div>
        </div>
      </div>
      <div class="ct-blog col-sm-6 col-md-4">
        <div class="inner">
          <div class="fauxcrop">
            <a href="#"><img alt="News Entry" src="https://www.solodev.com/assets/recent-news/news-entry-6.jpg"></a>
          </div>
          <div class="ct-blog-content">
            <div class="ct-blog-date">
              <span>February</span><strong>16</strong>
            </div>
            <h3 class="ct-blog-header">
              WebCorpCo's Latest Release (CMS 8) Available Today
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-news btn-contests">
      <a href="#">VIEW ALL NEWS</a>
    </div>
  </div>
</section>

Step 2 - recent-news-boxes.css

Download the CSS below and include it in your web page

recent-news-boxes.css

Step 3 - Add the includes below to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="recent-news-boxes.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

xxxxxxxxxx
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="recent-news-boxes.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>