Pricing Table

Live Demo 

Pricing Table

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;

?>

<section class="pricing-area" id="pricing">
	<div class="container">
		<div class="row">
			
			<?php foreach ($list as $item) : ?>
			
			<div class="col-xl-4">
				<div class="single-price">
					
					<div class="price-title">
						<h4><?php echo $item->title; ?>	</h4>
					</div>
					
						<?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
							foreach ($customFields as $customField){
							$customFields[$customField->name] = $customField;
						}?>                           
					<?php if ($item->featured == 1) : ?>
   						<div class="price-tag featured-price">
						<h2><?php echo $customFields['prix']->value; ?><span>/month</span></h2>
						</div>
					<?php else : ?>	
						<div class="price-tag">
						<h2><?php echo $customFields['prix']->value; ?><span>/month</span></h2>
						</div>
					<?php endif; ?>
					
					<div class="price-item">
						<?php $customFields = FieldsHelper::getFields('com_content.article', $item, true);
							foreach ($customFields as $customField){
							$customFields[$customField->name] = $customField;
						}?> 
	
                        <ul class="list-group pb-1">
                    	   <li class="list-group-item"><?php echo $customFields['feature-1']->value; ?></li>
                  	      <li class="list-group-item"><?php echo $customFields['feature-2']->value; ?></li>					 
                   	     <li class="list-group-item"><?php echo $customFields['feature-3']->value; ?></li>         
							<li class="list-group-item"><?php echo $customFields['feature-4']->value; ?></li>
							<li class="list-group-item"><?php echo $customFields['feature-5']->value; ?></li>
                          </ul>    
                              
					</div>
                              					
					<p class="mod-articles-category-readmore">
						<a class="mod-articles-category-title box-btn" href="/<?php echo $item->link; ?>">
							Choose plan
						</a>
					</p>	
					
				</div>
			</div>
			
			<?php endforeach; ?>
			
		</div>
	</div>
</section>

CSS

.single-price {
	text-align: center;
	padding: 30px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.price-title h4 {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 600;
}
.price-tag {
  margin: 30px 0;
}
.price-tag {
	margin: 30px 0;
	background-color: #fafafa;
	color: #000;
	padding: 10px 0;
}
.featured-price {
	background-color: tomato;
	color:#fff
}
.featured-price h2 {
    font-size: 45px;
	font-weight: 600;
}
.featured-price span {
  font-weight: 300;
  font-size: 16px;
  font-style: italic;
}
.price-tag h2 {
	font-size: 45px;
	font-weight: 600;
}
.price-tag span {
  font-weight: 300;
  font-size: 16px;
  font-style: italic;
}
.price-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-item ul li {
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px dashed #eee;
  margin: 5px 0;
}
.price-item ul li:last-child {
  border-bottom: 0;
}
.single-price a {
  margin-top: 15px;
}
a.box-btn {
	background-color: tomato;
	padding: 5px 20px;
	display: inline-block;
	color: #fff;
	text-transform: capitalize;
	border-radius: 3px;
	font-size: 15px;
	transition: .3s;
}
a.box-btn:hover, a.border-btn:hover {
	background-color: #d35400;
	color: #fff;
}

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.