Adding Recent News Boxes to Your Website

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

Step 2 - recent-news-boxes.css

Download the CSS below and include it in your web page

Step 3 - Add the includes below to your web page

In this tutorial we showed you how to create a section showcasing a number of featured news articles, each contained in it's own box.