This Joomla 4 override allows you to display a feature section simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<div class="features-boxes">
	<div class="container">
		
		<div class="pb-4 text-center">
			<h2 class="display-4">Features</h2>
			<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. </p>
		</div>
		
		<div class="row row-cols-1 row-cols-md-3 g-4 feature"> <!-- 3 items in a raw -->
			
			<?php foreach ($list as $item) : ?>
			<?php $item->urls = new JRegistry($item->urls); ?>
			<div class="col text-center">
              
				<div class="border h-100 p-5"><i class="pb-5 text-primary fa-5x <?php echo $item->urls->get('urlatext'); ?> icon"></i>
              
					<h3 class="name">
						<?php if ($params->get('link_titles') == 1) : ?>
						<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						<?php else : ?>
						<?php echo $item->title; ?>
						<?php endif; ?>
					</h3>
                          
					<?php if ($params->get('show_introtext')) : ?>
					<p class="mod-articles-category-introtext description">
						<?php echo $item->displayIntrotext; ?>
					</p>
                    <?php endif; ?>      
					<?php if ($params->get('show_readmore')) : ?>
					<a class="text-primary learn-more mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
						<?php if ($item->params->get('access-view') == false) : ?>
						<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
						<?php elseif ($readmore = $item->alternative_readmore) : ?>
						<?php echo $readmore; ?>
						<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
						<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
						<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
						<?php else : ?>
						<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
						<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
						<?php endif; ?>
					</a>
					<?php endif; ?>
				</div>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
</div>

CSS

.features-boxed {
  color:#313437;
  background-color:#eef4f7;
}
.features-boxed p {
  color:#7d8285;
}
.features-boxed h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}
@media (max-width:767px) {
  .features-boxed h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}
.features-boxed .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto;
}
.features-boxed .intro p {
  margin-bottom:0;
}
.features-boxed .features {
  padding:50px 0;
}
.features-boxed .item {
  text-align:center;
}
.features-boxed .item .box {
  text-align:center;
  padding:30px;
  background-color:#fff;
  margin-bottom:30px;
}
.features-boxed .item .icon {
  font-size:60px;
  color:#1485ee;
  margin-top:20px;
  margin-bottom:35px;
}
.features-boxed .item .name {
  font-weight:bold;
  font-size:18px;
  margin-bottom:8px;
  margin-top:0;
  color:inherit;
}
.features-boxed .item .description {
  font-size:15px;
  margin-top:15px;
  margin-bottom:20px;
}

This Joomla 3 override allows you to highlight your featured articles simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>
<div class="features-boxes">
	<div class="container">
		
		<div class="pb-4 text-center">
			<h2 class="display-4">Features</h2>
			<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. </p>
		</div>
		
		<div class="row row-cols-1 row-cols-md-3 g-4 feature"> <!-- 3 items in a raw -->
			
			<?php foreach ($list as $item) : ?>
			<?php $item->urls = new JRegistry($item->urls); ?>
			<div class="col text-center">
              
				<div class="border h-100 p-5"><i class="pb-5 text-primary fa-5x <?php echo $item->urls->get('urlatext'); ?> icon"></i>
              
					<h3 class="name">
						<?php if ($params->get('link_titles') == 1) : ?>
						<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
						<?php else : ?>
						<?php echo $item->title; ?>
						<?php endif; ?>
					</h3>
                          
					<?php if ($params->get('show_introtext')) : ?>
					<p class="mod-articles-category-introtext description">
						<?php echo $item->displayIntrotext; ?>
					</p>
                    <?php endif; ?>      
					<?php if ($params->get('show_readmore')) : ?>
					<a class="text-primary learn-more mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
						<?php if ($item->params->get('access-view') == false) : ?>
						<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
						<?php elseif ($readmore = $item->alternative_readmore) : ?>
						<?php echo $readmore; ?>
						<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
						<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
						<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
						<?php else : ?>
						<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
						<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
						<?php endif; ?>
					</a>
					<?php endif; ?>
				</div>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
</div>

CSS

.features-boxed {
  color:#313437;
  background-color:#eef4f7;
}
.features-boxed p {
  color:#7d8285;
}
.features-boxed h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}
@media (max-width:767px) {
  .features-boxed h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}
.features-boxed .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto;
}
.features-boxed .intro p {
  margin-bottom:0;
}
.features-boxed .features {
  padding:50px 0;
}
.features-boxed .item {
  text-align:center;
}
.features-boxed .item .box {
  text-align:center;
  padding:30px;
  background-color:#fff;
  margin-bottom:30px;
}
.features-boxed .item .icon {
  font-size:60px;
  color:#1485ee;
  margin-top:20px;
  margin-bottom:35px;
}
.features-boxed .item .name {
  font-weight:bold;
  font-size:18px;
  margin-bottom:8px;
  margin-top:0;
  color:inherit;
}
.features-boxed .item .description {
  font-size:15px;
  margin-top:15px;
  margin-bottom:20px;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net