This Joomla 4 override allows you to display a knowledge base 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="row row-cols-1 row-cols-md-3"> <!-- because we want 3 columns -->
	<?php if ($grouped) : ?>
		<?php foreach ($list as $group_name => $group) : ?>	
           <section class="knowledge-base-section">
		<div class="mod-articles-category-group">
			<h3><?php echo $group_name; ?></h3>
		</div>	
             
		<hr class="slash-2">
             
		<ul class="col list-unstyled article-list">
			<?php foreach ($group as $item) : ?>
          <li>						
				<!-- Article title -->
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
					<i class="fa fa-arrow-circle-right"></i> <?php echo $item->title; ?>
				</a>

              </li>
			<?php endforeach; ?>
		</ul>
        	</section>      
		<?php endforeach; ?>
	<?php endif; ?>
</div>

CSS

.knowledge-base {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.knowledge-base-section {
	padding: 20px; 
	margin-top: 10px;
    width: 33%;
    display: inline-block;
    vertical-align: top;
}
.knowledge-base-section h3 {
    color: #777777;
    font-size: 18px;
    font-weight: 600;
    margin: 25px 0 5px;
    text-transform: uppercase;
}
hr {
  border: 0;
  margin-top: 0px !important;
  margin-bottom: 20px !important;
  margin: 1.35em auto;
  max-width: 100%;
  background-position: 50%;
  box-sizing: border-box;
}
.slash-2 {
  height: 8px;
  background-image: url('data:image/svg+xml,');
  background-size: 4px 4px;
  width: 100%;
}
.article-list li {
  margin-bottom: 10px;
  font-size: 0.85em;
}
.section h3 a {
  color: inherit;
}

This Joomla 3 override allows you to display a knowledge base 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="knowledge-base">	
	<?php if ($grouped) : ?>
		<?php foreach ($list as $group_name => $group) : ?>	
           <section class="knowledge-base-section">
		<div class="mod-articles-category-group">
			<h3><?php echo $group_name; ?></h3>
		</div>		
		<hr class="slash-2">		
		<ul class="list-unstyled article-list">
			<?php foreach ($group as $item) : ?>
			<li>						
				<!-- Article title -->
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
					<i class="fa fa-arrow-circle-right"></i> <?php echo $item->title; ?>
				</a>
              </li>
			<?php endforeach; ?>
		</ul>
        	</section>      
		<?php endforeach; ?>
	<?php endif; ?>
</div>

CSS

.knowledge-base {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.knowledge-base-section {
	padding: 20px; 
	margin-top: 10px;
    width: 33%; /* 3 columns */
    display: inline-block;
    vertical-align: top;
}
.knowledge-base-section h3 {
    color: #777777;
    font-size: 18px;
    font-weight: 600;
    margin: 25px 0 5px;
    text-transform: uppercase;
}
hr {
  border: 0;
  margin-top: 0px !important;
  margin-bottom: 20px !important;
  margin: 1.35em auto;
  max-width: 100%;
  background-position: 50%;
  box-sizing: border-box;
}
.slash-2 {
  height: 8px;
  background-image: url('data:image/svg+xml,');
  background-size: 4px 4px;
  width: 100%;
}
.article-list li {
  margin-bottom: 10px;
  font-size: 0.85em;
}
.section h3 a {
  color: inherit;
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net