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

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

 recent-news-boxes.css

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.

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.