This Joomla 4 override allows you to highlight your featured articles with a nice ribbon simply using Joomla's mod_articles_latest 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_latest
 * @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\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
use Joomla\Component\Content\Site\Helper\RouteHelper;

if (!$list)
{
	return;
}

?>

<section class="blog-me py-5" id="blog">
	
	<div class="container">
		
		<div class="row">				
			
			<?php foreach ($list as $item) : ?>
              
			<div class="col-lg-4 col-md-6 h-100">  <!-- setup for 3 columns -->
				<div class="single-blog">
					<div class="blog-img">
						
						<!-- Intro image -->
						<?php
							$article_images  = json_decode($item->images);
							$article_image   = '';
							$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
								$article_image  = $article_images->image_intro;
								$article_image_alt  = $article_images->image_intro_alt;
							}?> 
                              
						<!-- Featured ribbon -->	
						<?php if ($item->featured == 1) : ?>
						
						<div class="ribbon-wrapper-orange"><div class="ribbon-orange"><?php echo JText::_('MOD_OVERRIDE_FEATURED') ?></div></div> 
                        <a href="<?php echo $item->link; ?>">
							<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
						</a>
						
                        <?php else : ?>
                          
                        <a href="<?php echo $item->link; ?>">
							<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
						</a>
                        <?php endif; ?> 
					</div>
					
					<div class="blog-content">								
						<div class="blog-title">									
							<h4>								
								<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
							</h4>

						</div>
						
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">						
							<a href="/<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
								<?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>
						</p>
						<?php endif; ?>
						
					</div>
				</div>
			</div>	
			<?php endforeach; ?>
			
		</div>
	</div>
</section>

CSS

.ribbon-wrapper-orange {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -3px;
 right: -3px;
 z-index: 90;
}
.ribbon-orange {
 font: bold 15px Sans-Serif;
 color: #FFF;
 text-align: center;
 text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 position: relative;
 padding: 7px 0;
 left: -5px;
 top: 15px;
 width: 120px;
 background-color: #e85311;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01)); 
 background-image: -webkit-linear-gradient(top, #e85311, #d26d01); 
 background-image: -moz-linear-gradient(top, #e85311, #d26d01); 
 background-image: -ms-linear-gradient(top, #e85311, #d26d01); 
 background-image: -o-linear-gradient(top, #e85311, #d26d01); 
 color: #FFF;
 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-orange:before, .ribbon-orange:after {
 content: "";
 border-top: 3px solid #c26400; 
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
}
.ribbon-orange:before {
 left: 0;
}
.ribbon-orange:after {
 right: 0;
}

This Joomla 3 override allows you to highlight your featured articles with a nice ribbon simply using Joomla's mod_articles_latest 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_latest
		* @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;
?>
<section class="blog-me pt-100 pb-100" id="blog">
	<div class="container">
		<div class="row">
			<div class="col-xl-6 mx-auto text-center">
				<div class="section-title mb-5">
					<h4>Latest blog</h4>
				</div>
			</div>
		</div>
		<div class="row">				
			<?php foreach ($list as $item) : ?>
			<div class="col-lg-4 col-md-6">  <!-- setup for 3 columns -->
				<div class="single-blog">
					<div class="blog-img">
						<!-- Intro image -->
						<?php
							$article_images  = json_decode($item->images);
							$article_image   = '';
							$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
								$article_image  = $article_images->image_intro;
								$article_image_alt  = $article_images->image_intro_alt;
							}?> 
						<!-- Featured ribbon -->	
						<?php if ($item->featured == 1) : ?>
						<div class="ribbon-wrapper-orange"><div class="ribbon-orange"><?php echo JText::_('MOD_OVERRIDE_FEATURED') ?></div></div> 
                        <a href="<?php echo $item->link; ?>">
							<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
						</a>
                        <?php else : ?>
                        <a href="<?php echo $item->link; ?>">
							<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
						</a>
                        <?php endif; ?> 
					</div>
					<div class="blog-content">								
						<div class="blog-title">									
							<h4>								
								<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
							</h4>
						</div>
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">						
							<a href="/<?php echo $item->link; ?>" class="box_btn mod-articles-category-title <?php echo $item->active; ?>">
								<?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>
						</p>
						<?php endif; ?>
					</div>
				</div>
			</div>	
			<?php endforeach; ?>
		</div>
	</div>
</section>

CSS

.ribbon-wrapper-orange {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -3px;
 right: -3px;
 z-index: 90;
}
.ribbon-orange {
 font: bold 15px Sans-Serif;
 color: #FFF;
 text-align: center;
 text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 position: relative;
 padding: 7px 0;
 left: -5px;
 top: 15px;
 width: 120px;
 background-color: #e85311;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01)); 
 background-image: -webkit-linear-gradient(top, #e85311, #d26d01); 
 background-image: -moz-linear-gradient(top, #e85311, #d26d01); 
 background-image: -ms-linear-gradient(top, #e85311, #d26d01); 
 background-image: -o-linear-gradient(top, #e85311, #d26d01); 
 color: #FFF;
 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-orange:before, .ribbon-orange:after {
 content: "";
 border-top: 3px solid #c26400; 
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
}
.ribbon-orange:before {
 left: 0;
}
.ribbon-orange:after {
 right: 0;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net