Live demo
Agenda Activities
8:30 am - 11:00 am
Annual meeting
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
1:00 pm - 2:00 pm
Lunch with Google Team
Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
5:00 pm - 7:00 pm
Boarding at airport
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_news
* @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="container">
<div class="row">
<div class="recent-activities card">
<div class="card-header text-info text-center">
<h3 class="h4">Agenda Activities</h3> <!-- category title -->
</div>
<div class="card-body no-padding">
<?php foreach ($list as $item) : ?>
<div class="item">
<div class="row">
<div class="col-4 date-holder text-right">
<div class="icon"><i class="fa fa-clock-o"></i></div>
<div class="date">
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="text-info"><?php echo $item->urls->get('urlatext'); ?> <!-- text A url --> - <?php echo $item->urls->get('urlbtext'); ?></span><!-- text B url -->
</div>
</div>
<div class="col-8 content">
<h5>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h5>
<p class="card-text description"><?php echo $item->introtext; ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>CSS
.recent-activities .item {
padding: 0 15px;
border-bottom: 1px solid #eee
}
.recent-activities .item div[class*='col-'] {
padding: 15px
}
.recent-activities h5 {
font-weight: 400;
color: #333
}
.recent-activities p {
font-size: 0.75em;
color: #999
}
.recent-activities .icon {
width: 35px;
height: 35px;
line-height: 35px;
background: #f5f5f5;
text-align: center;
display: inline-block
}
.recent-activities .date {
font-size: 0.75em;
color: #999;
padding: 10px
}
.recent-activities .date-holder {
padding: 0 !important;
border-right: 1px solid #eee
}
