component.timeline

timeline-mirror

Mirror Timeline

Now Task 08:00

Adrian Demian
adrian@ennovation.ie

Added a new milestone named MosaicPro
Comment 11:00

MosaicPro said: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...
27may Photo 08:00
Adrian Demian
adrian@ennovation.ie
Added photos to the album MosaicPro

<h5 class="strong innerAll margin-none">Mirror Timeline</h5>
<div class="relativeWrap overflow-hidden">
<div class="row row-merge border-bottom border-top layout-timeline layout-timeline-mirror">
	<div class="col-md-6"></div>
	<div class="col-md-6">
		<div class="innerAll">
			
			<ul class="timeline">
				<li class="active">
					<div class="separator bottom">
						<span class="date box-generic">Now</span>
						<span class="type glyphicons suitcase">Task <i></i><span class="time">08:00</span></span>
						<button type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle fa-fw"></i> Add event</button>
					</div>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">Adrian Demian</a><br/>
									<span class="muted">adrian@ennovation.ie</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info margin-none"><i></i> Added a new milestone named <a href="">MosaicPro</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
				<li class="active">
					<span class="type glyphicons comments">Comment <i></i><span class="time">11:00</span></span>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<p class="glyphicons user margin-none"><i></i> <strong><a href="">MosaicPro</a> said</strong>: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...</p>
						</div>
					</div>
				</li>
				<li>
					<div class="separator">
						<span class="date box-generic"><strong>27</strong>may</span>
						<span class="type glyphicons picture">Photo <i></i><span class="time">08:00</span></span>
					</div>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">Adrian Demian</a><br/>
									<span class="muted">adrian@ennovation.ie</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info"><i></i> Added photos to the album <a href="">MosaicPro</a></p>
								
								<!-- Gallery Layout -->
								<div class="gallery gallery-2 separator top">
									<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
																				<li class="col-md-4 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-4 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-4 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-4"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-4"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-4"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" alt="photo" class="img-responsive" /></a></li>
																			</ul>
								</div>
								<!-- // Gallery Layout END -->
								
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
			</ul>
			
		</div>
	</div>
</div>
</div>

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

timeline-navigation

Timeline with navigation

Now Task 08:00

Adrian Demian
adrian@ennovation.ie

Added a new milestone named MosaicPro
Task 09:00

Adrian Demian
adrian@ennovation.ie

Added a new milestone named MosaicPro
Comment 11:00

MosaicPro said: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...
27may Photo 08:00
Adrian Demian
adrian@ennovation.ie
Added photos to the album MosaicPro

<h5 class="strong innerAll margin-none">Timeline with navigation</h5>



<div class="row row-merge border-bottom border-top layout-timeline innerLR">
	<div class="col-md-4">
		<div class="innerAll">
		
			<div class="row margin-none">
				<div class="col-md-7">
					<ul class="nav nav-pills nav-stacked nav-timeline">
						<li class="active"><a href="">Now</a></li>
						<li><a href="">Yesterday</a></li>
						<li><a href="">2 Weeks Ago</a></li>
						<li><a href="" class="glyphicons calendar">Custom<i></i></a></li>
					</ul>
				</div>
			</div>

		</div>
	</div>
	<div class="col-md-8">
		<div class="innerAll">
			
			<ul class="timeline">
				<li class="active">
					<div class="separator bottom">
						<span class="date box-generic">Now</span>
						<span class="type glyphicons suitcase">Task <i></i><span class="time">08:00</span></span>
						<button type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle fa-fw"></i> Add event</button>
					</div>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">Adrian Demian</a><br/>
									<span class="muted">adrian@ennovation.ie</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info margin-none"><i></i> Added a new milestone named <a href="">MosaicPro</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
				<li class="active">
					<span class="type glyphicons suitcase">Task <i></i><span class="time">09:00</span></span>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">Adrian Demian</a><br/>
									<span class="muted">adrian@ennovation.ie</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info margin-none"><i></i> Added a new milestone named <a href="">MosaicPro</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
				<li class="active">
					<span class="type glyphicons comments">Comment <i></i><span class="time">11:00</span></span>
					<div class="widget widget-heading-simple widget-body-gray margin-none">
						<div class="widget-body">
							<p class="glyphicons user margin-none"><i></i> <strong><a href="">MosaicPro</a> said</strong>: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...</p>
						</div>
					</div>
				</li>
				<li>
					<div class="separator">
						<span class="date box-generic"><strong>27</strong>may</span>
						<span class="type glyphicons picture">Photo <i></i><span class="time">08:00</span></span>
					</div>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">Adrian Demian</a><br/>
									<span class="muted">adrian@ennovation.ie</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info"><i></i> Added photos to the album <a href="">MosaicPro</a></p>
								
								<!-- Gallery Layout -->
								<div class="gallery gallery-2 separator top">
									<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
																				<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" alt="photo" class="img-responsive" /></a></li>
																			</ul>
								</div>
								<!-- // Gallery Layout END -->
								
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
			</ul>
			
		</div>
	</div>
</div>

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";
@import "assets/components/modules/admin/widgets/widget-stats/assets/less/widget-stats.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

timeline-orders

Now 08:00
John Doe
doe@johny.com

Booked $499.99 for Secret Meeting

John Doe
doe@johny.com

Booked $499.99 for Secret Meeting
John Doe
doe@johny.com

Ordered $1299.09 worth of Lorem Ipsum Dolor
09:00

Jane Doe
doe@jane.com

Paid $399.99 with Credit card for Secret Meeting
25june 08:00
John Doe
doe@notaperson.com
Ordered $1299.09 worth of Lorem Ipsum Dolor

<div class="row row-merge margin-none border-bottom border-top layout-timeline">
	<div class="col-md-3">
		<div class="innerAll">
		
			<div class="row margin-none">
				<div class="col-md-8">
					<ul class="nav nav-pills nav-stacked nav-timeline">
						<li class="active"><a href="">Now</a></li>
						<li><a href="">Yesterday</a></li>
						<li><a href="">2 Weeks Ago</a></li>
						<li><a href="" class="glyphicons calendar">Custom<i></i></a></li>
					</ul>
					<div class="separator bottom"></div>
					
					<!-- Stats Widget -->
<a href="" class="widget-stats widget-stats-2">
	<span class="count">30</span>
	<span class="txt">Bookings</span>
</a>
<!-- // Stats Widget END -->

					<!-- Stats Widget -->
<a href="" class="widget-stats widget-stats-primary widget-stats-1">
	<span class="glyphicons cart_in"><i></i><span class="txt">Sales</span></span>
	<div class="clearfix"></div>
	<span class="count">20</span>
</a>
<!-- // Stats Widget END -->

					
				</div>
			</div>

		</div>
	</div>
	<div class="col-md-9">
		<div class="innerAll">
			
			<ul class="timeline">
				<li class="active">
					<div class="separator bottom">
						<span class="date box-generic">Now</span>
						<span class="type glyphicons cart_in">&nbsp; <i></i><span class="time">08:00</span></span>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="widget widget-heading-simple widget-body-white">
								<div class="widget-body">
									<p><a class="author">John Doe</a><br/><span class="muted">doe@johny.com</span></p>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Booked &dollar;499.99 for <a href="">Secret Meeting</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<p><a class="author">John Doe</a><br/><span class="muted">doe@johny.com</span></p>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Booked &dollar;499.99 for <a href="">Secret Meeting</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<p><a class="author">John Doe</a><br/><span class="muted">doe@johny.com</span></p>
									<div class="alert alert-gray">
										<div class="gallery">
											<ul class="row">
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/1.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/2.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/3.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/4.jpg" alt="photo" class="img-responsive" /></a></li>
																							</ul>
										</div>
										<p class="glyphicons circle_info margin-none"><i></i> Ordered &dollar;1299.09 worth of <a href="../front/shop_product.html?lang=en">Lorem Ipsum Dolor</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li class="active">
					<span class="type glyphicons credit_card">&nbsp; <i></i><span class="time">09:00</span></span>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<p><a class="author">Jane Doe</a><br/><span class="muted">doe@jane.com</span></p>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info margin-none"><i></i> Paid &dollar;399.99 with Credit card for <a href="">Secret Meeting</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
				<li>
					<div class="separator">
						<span class="date box-generic"><strong>25</strong>june</span>
						<span class="type glyphicons cart_in">&nbsp; <i></i><span class="time">08:00</span></span>
					</div>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">John Doe</a><br/>
									<span class="muted">doe@notaperson.com</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<div class="gallery">
									<ul class="row">
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/1.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/2.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/3.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/4.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/5.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/6.jpg" alt="photo" class="img-responsive" /></a></li>
																			</ul>
								</div>
								<p class="glyphicons circle_info margin-none"><i></i> Ordered &dollar;1299.09 worth of <a href="../front/shop_product.html?lang=en">Lorem Ipsum Dolor</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
			</ul>
			
		</div>
	</div>
</div>

Code

@import "assets/components/modules/admin/widgets/widget-stats/assets/less/widget-stats.less";
@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

timeline-widget

21/03 Martin Glades registered at Jane Doe's suggestion.
21/03 Martin Glades registered at Martin Glades's suggestion.
21/03 Martin Glades registered at Darius Jackson's suggestion.
21/03 Jane Doe registered at Darius Jackson's suggestion.
21/03 John Doe registered at Melisa Ragae's suggestion.
21/03 Melisa Ragae registered at John Doe's suggestion.

View all

<div class="row">
	<div class="col-md-12">
		
		<!-- Timeline Widget -->
		<div class="widget-timeline">
			<ul class="list-timeline">
				
												<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Martin Glades</a> registered at <a href="">Jane Doe's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Martin Glades</a> registered at <a href="">Martin Glades's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Martin Glades</a> registered at <a href="">Darius Jackson's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Jane Doe</a> registered at <a href="">Darius Jackson's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">John Doe</a> registered at <a href="">Melisa Ragae's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">John Doe's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								
			</ul>
			<a href="" class="btn btn-primary view-all">View all</a>
		</div>
		<!-- Timeline Widget END -->
		
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/timeline/assets/less/widget-timeline.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

timeline-work-history

Bill got a review for Coral UI Interface Design from Andrew M.
2 days ago

Andrew Good Job. Congrats and hope to see more admin templates like this in the future.
2 days ago
Bill got a review for Support & Ticket System from Andrew M.
2 days ago

Bogdan Good Job. Congrats and hope to see more admin templates like this in the future.
2 days ago
Bill got a review for Project Management from Andrew M.
2 days ago

John Good Job. Congrats and hope to see more admin templates like this in the future.
2 days ago
Bill got a review for Coral UI Interface Design from Andrew M.
2 days ago

Andrew Good Job. Congrats and hope to see more admin templates like this in the future.
2 days ago

<ul class="timeline-activity list-unstyled">
	<li class="active">
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">Coral UI Interface Design</a> from <a href="#"><img src="../assets/images/people/80/8.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/8.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Andrew</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

	<li>
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">Support &amp; Ticket System</a> from <a href="#"><img src="../assets/images/people/80/20.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/20.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Bogdan</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

	<li>
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">Project Management</a> from <a href="#"><img src="../assets/images/people/80/12.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/12.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">John </a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

	<li>
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">Coral UI Interface Design</a> from <a href="#"><img src="../assets/images/people/80/10.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/10.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Andrew</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

</ul>

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

timeline-activity-tasks

mosaicpro assigned Company Presentation to 10 members

14:59 3 October 2013
mosaicpro added Company Presentation task due on 6 Oct 2013

14:50 3 October 2013
mosaicpro assigned Home Page Development to Bogdan L.

11:00 2 October 2013
mosaicpro added Home Page Development task due on 5 Oct 2013

10:00 1 October 2013

<ul class="timeline-activity list-unstyled">
	<li>
		<i class="list-icon fa fa-group"></i>
		<div class="block">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> assigned <a href="" class="text-primary">Company Presentation</a> to 10 members
				</div>
				<div class="innerLR innerB">
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/10.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/11.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/12.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/13.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/14.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/15.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/16.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/17.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/18.jpg" alt="photo" width="20"/></a>	
										<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/19.jpg" alt="photo" width="20"/></a>	
										<div class="clearfix"></div>
				</div>
			</div>
			<div class="timeline-bottom">
				<i class="fa fa-clock-o"></i> 14:59 &nbsp;
				<i class="fa fa-calendar"></i> 3 October 2013
			</div>
			<div class="separator bottom"></div>
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-plus"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> added <a href="" class="text-primary">Company Presentation</a> task due on 6 Oct 2013
				</div>
			</div>
			<div class="timeline-bottom">
				<i class="fa fa-clock-o"></i> 14:50 &nbsp;
				<i class="fa fa-calendar"></i> 3 October 2013
			</div>
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-user"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> assigned <a href="" class="text-primary">Home Page Development</a> to <a href="#"><img src="../assets/images/people/80/10.jpg" alt="photo" width="20"></a> <a href="">Bogdan L.</a>
				</div>
			</div>
			<div class="timeline-bottom">
				<i class="fa fa-clock-o"></i> 11:00 &nbsp;
				<i class="fa fa-calendar"></i> 2 October 2013
			</div>
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-plus"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> added <a href="" class="text-primary">Home Page Development</a> task due on 5 Oct 2013
				</div>
			</div>
			<div class="timeline-bottom">
				<i class="fa fa-clock-o"></i> 10:00 &nbsp;
				<i class="fa fa-calendar"></i> 1 October 2013
			</div>
		</div>
	</li>
</ul>

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

timeline-activity

mosaicpro replied to Having A Great Day! from Andrew M.
2 days ago

Andrew Good Job. Congrats and hope to see more admin templates like this in the future.
2 days ago

mosaicpro Thanks, I apreciate it!
5 days ago
mosaicpro visited Dracula's Castle

Bran Castle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, aspernatur ut fuga eum cumque delectus voluptate impedit quaerat sapiente officiis fugit voluptates sit neque quibusdam beatae est modi repudiandae unde.
3.5

2 days ago 25 Oct 2013
mosaicpro wrote a comment to Jane S.
6 days ago

Good Job. Congrats and hope to see you soon.
mosaicpro is following Jane S.

Jane Smith www.domain.com

mosaicpro is following Jane S.

Jane Smith www.domain.com
mosaicpro has uploaded 10 photos in Album Name #2

<ul class="timeline-activity list-unstyled">
	<li class="active">
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> replied to <a href="" class="text-primary">Having A Great Day!</a> from <a href="#"><img src="../assets/images/people/80/8.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/8.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Andrew</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		     	<div class="media innerAll margin-none bg-gray border-top border-bottom">
			       	<a class="pull-left" href="#"><img src="../assets/images/people/80/2.jpg" alt="photo" width="35" class="media-object"></a>
			        <div class="media-body">
			        	<a href="" class="strong">mosaicpro</a> Thanks, I  apreciate it!
			     		<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 5 days ago   
						</div>
			        </div>
		      	</div>
				<div class="innerAll">
					<input class="form-control" placeholder="Comment here..."/>
				</div>
			</div>
			
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-map-marker"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> 
					<a href="">mosaicpro</a> visited 
					<a href="" class="text-primary"><i class="text-primary fa fa-location-arrow"></i> Dracula's Castle</a>
				</div>
				<div class="media margin-none">
					<div class="row innerLR innerB">
						<div class="col-sm-4 col-lg-3">
							<div class="innerT">
								<div class="icon-block text-center ">
									<span class="glyphicons tower"><i></i></span>
								</div>
							</div>
						</div>
						<div class="col-sm-8 col-lg-9">
							<div class="innerT">
								<h5 class="strong">Bran Castle</h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, aspernatur ut fuga eum cumque delectus voluptate impedit quaerat sapiente officiis fugit voluptates sit neque quibusdam beatae est modi repudiandae unde.</p>
								<i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> 3.5
							</div>
						</div>
					</div>
				</div>		
			</div>
			<div class="timeline-bottom innerT half">
				<i class="fa fa-clock-o"></i> 2 days ago  <span class="innerL"><i class="fa fa-calendar fa-fw"></i> 25 Oct 2013</span>
			</div>
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-comments"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> wrote a <a href="" class="text-primary">comment</a> to <a href="#"><img data-src="holder.js/20x20/dark"/></a> <a href="">Jane S.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 6 days ago  
					</div>
				</div>
				<div class="content-filled">Good Job. Congrats and hope to see you soon.</div>
			</div>
		
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-user"></i>
		<div class="block">
			<div class="caret"></div>
			<!-- <div class="box-generic "> -->
				<div class="inline-block box-generic">
					<div class="timeline-top-info content-filled border-bottom">
						<i class="fa fa-user"></i> <a href="">mosaicpro</a> is following <a href="#"><img  src="../assets/images/people/80/1.jpg" width="20"/></a> <a href="">Jane S.</a>
					</div>			
					<div class="media innerAll margin-none">
				        <a class="pull-left" href="#">
				          <img src="../assets/images/people/80/1.jpg" alt="photo" class="media-object" width="35">
				        </a>
				        <div class="media-body">
				          <a href="" class="strong">Jane Smith</a>
				          <a href="" class="clearfix text-primary strong">www.domain.com</a>
				     	<div class="media-icons">
								<a href=""><i class="fa fa-clock-o"></i></a>
								<a href=""><i class="fa fa-calendar"></i></a>
								<a href=""><i class="fa fa-user"></i></a>
								<a href=""><i class="fa fa-star"></i></a>
							</div>
				        </div>
			      </div>
				</div>

				<div class="inline-block box-generic">
					<div class="timeline-top-info content-filled border-bottom">
						<i class="fa fa-user"></i> <a href="">mosaicpro</a> is following <a href="#"><img  src="../assets/images/people/80/1.jpg" width="20"/></a> <a href="">Jane S.</a>
					</div>	
					
					<div class="media innerAll margin-none ">
				        <a class="pull-left" href="#">
				          <img src="../assets/images/people/80/1.jpg" alt="photo" class="media-object" width="35">
				        </a>
				        <div class="media-body">
				          <a href="" class="strong">Jane Smith</a>
				          <a href="" class="clearfix text-primary strong">www.domain.com</a>
				     	<div class="media-icons">
								<a href=""><i class="fa fa-clock-o"></i></a>
								<a href=""><i class="fa fa-calendar"></i></a>
								<a href=""><i class="fa fa-user"></i></a>
								<a href=""><i class="fa fa-star"></i></a>
							</div>
				        </div>
			      </div>
				</div>

			<!-- </div> -->
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-camera"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info">
					<i class="fa fa-user"></i> <a href="">mosaicpro</a> has uploaded 10 photos in <a href="" class="text-primary"><i class="text-primary fa fa-location-arrow"></i> Album Name #2</a>
				</div>
				<div class="innerLR innerB">
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/1.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/2.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/3.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/4.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/5.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/6.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/7.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/8.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/9.jpg" alt="photo" width="35"/></a>	
					  	
					<a href="#" class="thumbnail pull-left border-none"><img src="../assets/images/people/80/10.jpg" alt="photo" width="35"/></a>	
										<div class="clearfix"></div>
				</div>
			</div>
			<div class="separator bottom"></div>
		</div>
	</li>
</ul>

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>

timeline-medical-patient-history

Upcoming procedure (consectetur adipisicing elit) with Dr. Dignissimos

17:00 3 October 2013
Consultation with Dr. Dignissimos

10:00 2 October 2013

Lab Test Results
1 MB

Notes
24 KB

<ul class="timeline-activity list-unstyled">
	<li>
		<i class="list-icon fa fa-scissors"></i>
		<div class="block">
			<div class="caret"></div>
			<div class="box-generic bg-primary-light">
				<div class="timeline-top-info border-bottom">
					<a href="" class="text-regular">Upcoming procedure</a> <span class="text-muted2">(consectetur adipisicing elit)</span> with <i class="fa fa-stethoscope"></i> <a href="">Dr. Dignissimos</a>
				</div>
				<div class="innerAll half inline-block">
					<i class="fa fa-clock-o text-primary"></i> 17:00 &nbsp;
					<i class="fa fa-calendar text-primary"></i> 3 October 2013
				</div>
			</div>
			<div class="separator bottom"></div>
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-stethoscope"></i>
		<div class="block">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info border-bottom">
					<a href="" class="text-regular">Consultation</a> with <i class="fa fa-stethoscope"></i> <a href="">Dr. Dignissimos</a>
				</div>
				<div class="innerAll half inline-block">
					<i class="fa fa-clock-o"></i> 10:00 &nbsp;
					<i class="fa fa-calendar"></i> 2 October 2013
				</div>
			</div>
			<div class="separator bottom"></div>
		</div>
		<div class="block block-inline">
			<div class="box-generic">
				<div class="innerT innerR">
					<button class="btn btn-primary btn-xs pull-right"><i class="fa fa-download"></i></button>
					<div class="media inline-block margin-none">
						<div class="innerLR">
							<i class="fa fa-stethoscope pull-left text-primary fa-2x"></i>
							<div class="media-body">
								<div><a href="" class="strong text-regular">Lab Test Results</a></div>
								<span>1 MB</span>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="block block-inline">
			<div class="box-generic">
				<div class="innerT innerR">
					<button class="btn btn-primary btn-xs pull-right"><i class="fa fa-eye"></i></button>
					<div class="media inline-block margin-none">
						<div class="innerLR">
							<i class="fa fa-file-text-o pull-left text-primary fa-2x"></i>
							<div class="media-body">
								<div><a href="" class="strong text-regular">Notes</a></div>
								<span>24 KB</span>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>

Code

@import "http://localhost/shared/components/common/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "assets/components/common/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

Create a new LESS file (eg. styles.less)
Copy & paste the above imports in the LESS file.
Place the file in your project's document root.
Load the LESS file into the <head> section of your HTML document, before any JavaScript files:
```
<link type="stylesheet/less" href="styles.less" />
```
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>
<script src="assets/components/common/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.0.2&sv=v0.0.1"></script>