This Joomla 4 override allows you to display a lead article plus 4 others articles aside simply by 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\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;

if (!$list)
{
	return;
}

?>

<div class="blog-home3 py-5">
	
	<div class="contain">

		<div class="row">
		
			<div class="col-md-12">
				<?php 
					$article_image   = [];
					$article_image_alt   = [];
				?>
				<?php foreach ($list as $item) : ?>
					<?php
						$article_images  = json_decode($item->images);
						
						if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
							$article_image[$item->id]  = $article_images->image_intro;
							$article_image_alt[$item->id]  = $article_images->image_intro_alt;
						} else {
							$article_image[$item->id]  = 'images/assets/grey-bg.png'; // image placeholder
							$article_image_alt[$item->id]  = 'No image'; // alt image placeholder
						}
					?> 

				<?php endforeach; ?>
				<div class="row">
			
					<!-- lead article -->
					<div class="col-lg-6">
						<div class="border mb-4">
							<!-- intro image -->
							<a class="" href="<?php echo $list[0]->link; ?>">
								<img class="card-img-top" src="<?php echo $article_image[$list[0]->id]; ?>" alt="<?php echo $article_image_alt[$list[0]->id]; ?>" />
							</a>	
							
							<!-- author + publish date -->
							<div class="date-pos text-center text-white p-3 bg-success-gradiant">
								<span class="px-2 text-uppercase fs-6"><?php echo $list[0]->displayAuthorName; ?></span>
								<span class="px-2 text-uppercase fs-6"><?php echo $list[0]->displayDate; ?></span>
							</div>
							
                          	<div class="card-body">
							<!-- article title -->
							<h4 class="font-weight-medium mt-3">
								<a href="<?php echo $list[0]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[0]->active; ?>"><?php echo $list[0]->title; ?></a>
							</h4>
							
							<!-- introtext -->
							<p class="pt-3 m-t-20"><?php echo $list[0]->displayIntrotext; ?></p>
                            </div>
                          
						</div>
					</div>
			
					<!-- articles column -->
					<div class="col-lg-6">
						<div class="row">
						
							<!-- article #2 -->
							<div class="col-md-6">
								<div class="border mb-4">
									<a class="" href="<?php echo $list[1]->link; ?>">
										<img class="card-img-top" src="<?php echo $article_image[$list[1]->id]; ?>" alt="<?php echo $article_image_alt[$list[1]->id]; ?>" />
									</a>	
									<div class="date-pos text-center text-white p-3 bg-success-gradiant">
										<span class="px-2 text-uppercase"><?php echo $list[1]->displayAuthorName; ?></span>
										<span class="px-2 text-uppercase"><?php echo $list[1]->displayDate; ?></span>
									</div>
									<div class="card-body">
									<h5 class="font-weight-medium mt-3">								
										<a href="<?php echo $list[1]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[1]->active; ?>"><?php echo $list[1]->title; ?></a>
									</h5>
									</div>
								</div>
							</div>
							
							<!-- article #3 -->
							<div class="col-md-6">
								<div class="border mb-4">
									<a class="" href="<?php echo $list[2]->link; ?>">
										<img class="card-img-top" src="<?php echo $article_image[$list[2]->id]; ?>" alt="<?php echo $article_image_alt[$list[2]->id]; ?>" />
									</a>	
									<div class="date-pos text-center text-white p-3 bg-success-gradiant">
										<span class="px-2 text-uppercase"><?php echo $list[2]->displayAuthorName; ?></span>
										<span class="px-2 text-uppercase"><?php echo $list[2]->displayDate; ?></span>
									</div>
									<div class="card-body">
									<h5 class="font-weight-medium mt-3">								
										<a href="<?php echo $list[2]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[2]->active; ?>"><?php echo $list[2]->title; ?></a>
									</h5>
									</div>
								</div>
							</div>
							
							<!-- article #4 -->
							<div class="col-md-6">
								<div class="border mb-4">
									<a class="" href="<?php echo $list[3]->link; ?>">
										<img class="card-img-top" src="<?php echo $article_image[$list[3]->id]; ?>" alt="<?php echo $article_image_alt[$list[3]->id]; ?>" />
									</a>	
									<div class="date-pos text-center text-white p-3 bg-success-gradiant">
										<span class="px-2 text-uppercase"><?php echo $list[3]->displayAuthorName; ?></span>
										<span class="px-2 text-uppercase"><?php echo $list[3]->displayDate; ?></span>
									</div>
									<div class="card-body">
									<h5 class="font-weight-medium mt-3">								
										<a href="<?php echo $list[3]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[3]->active; ?>"><?php echo $list[3]->title; ?></a>
									</h5>
									</div>
								</div>
							</div>
							
							<!-- article #5 -->
							<div class="col-md-6">
								<div class="border mb-4">
									<a class="" href="<?php echo $list[4]->link; ?>">
										<img class="card-img-top" src="<?php echo $article_image[$list[4]->id]; ?>" alt="<?php echo $article_image_alt[$list[4]->id]; ?>" />
									</a>	
									<div class="date-pos text-center text-white p-3 bg-success-gradiant">
										<span class="px-2 text-uppercase"><?php echo $list[4]->displayAuthorName; ?></span>
										<span class="px-2 text-uppercase"><?php echo $list[4]->displayDate; ?></span>
									</div>
									<div class="card-body">
									<h5 class="font-weight-medium mt-3">								
										<a href="<?php echo $list[4]->link; ?>" class="link text-decoration-none mod-articles-category-title <?php echo $list[4]->active; ?>"><?php echo $list[4]->title; ?></a>
									</h5>
									</div>
								</div>
							</div>

						</div>
					</div>
			
				</div>
		
			</div>
		
		</div>
	
	</div>
	
</div>

CSS

.blog-home3 h1,
.blog-home3 h2,
.blog-home3 h3,
.blog-home3 h4,
.blog-home3 h5,
.blog-home3 h6 {
  color: #3e4555;
}
.blog-home3 h5 {
    line-height: 22px;
    font-size: 18px;
}
.blog-home3 a.link {
    color: #3e4555;
}
.blog-home3 a.link:hover {
    color: #316ce8;
}
.blog-home3 .font-weight-medium {
  font-weight: 500;
}
.blog-home3 .bg-light {
  background-color: #f4f8fa !important;
}
.blog-home3 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}
.blog-home3 .card.card-shadow {
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.blog-home3 .on-hover {
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}
.blog-home3 .on-hover:hover {
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}
.blog-home3 .bg-success-gradiant {
  background: #2cdd9b;
  background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
  background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
  background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
  background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
  background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
}
.blog-home3 .date-pos {
  font-size: 12px;
}
.blog-home3 a {
  overflow: hidden;
}
.blog-home3 a img {
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}
.blog-home3 a img:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net