uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
1,133 lines (737 loc) • 72.6 kB
HTML
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Timeline - Uix Kit</title>
<!-- Compatibility Settings
============================================= -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Compatibility Settings end -->
<!-- Web Fonts
============================================= -->
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet"> -->
<!-- Web Fonts end -->
<!-- Core & Theme CSS
============================================= -->
<!-- Basic -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.2.3" media="all"/>
<link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>
<!-- Icons -->
<link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css?ver=5.7.0">
<link rel="stylesheet" href="assets/fonts/fontawesome/css/v4-shims.min.css?ver=5.7.0">
<!-- Theme -->
<link rel="stylesheet" href="../dist/css/uix-kit.min.css?ver=oBL6UJILNcsxGifiirVQ"/>
<!--[if lt IE 10]>
<link rel="stylesheet" href="assets/css/IE.css?ver=oBL6UJILNcsxGifiirVQ" />
<![endif]-->
<!-- Core & Theme CSS end -->
<!-- Vendor
============================================= -->
<script src="assets/js/min/jquery.min.js?ver=3.6.1"></script>
<script src="assets/js/min/modernizr.min.js?ver=3.5.0"></script>
<!-- Vendor end -->
<!-- Break free from CSS prefix hell!
============================================= -->
<script src="assets/js/min/prefixfree.min.js?ver=1.0.7"></script>
<!-- SEO
============================================= -->
<meta name="description" content="A free web kits for fast web design and development, compatible with Bootstrap v5.">
<meta name="generator" content="Uix Kit" />
<meta name="author" content="UIUX Lab">
<!-- SEO end -->
<!-- Favicons
============================================= -->
<link rel="icon" href="assets/images/favicon/favicon-32x32.png" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/favicon/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="assets/images/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png">
<!-- Favicons end -->
</head>
<body class="page">
<!-- Loader
============================================= -->
<div class="uix-loader">
<!--[if lt IE 10]>
<span>Loading...</span>
<![endif]-->
<svg class="uix-loader__spinner is-hide-IE" viewBox="0 0 52 52">
<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
</svg>
</div>
<div class="uix-loader-progress" data-txt="{progress}%"><span>0%</span></div>
<div class="uix-loader-progress__line"></div>
<!-- .uix-loader end -->
<!-- Mobile Menu Toggle Trigger
============================================= -->
<div class="uix-menu-mobile__toggle">
<span></span>
<span></span>
<span></span>
</div>
<div class="uix-menu-mobile__mask"></div>
<!-- .uix-menu-mobile__toggle end -->
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
<div class="uix-brand">
<a href="index.html"><img src="assets/images/logo.png" alt="Uix Kit"></a>
</div>
<!-- .uix-brand end -->
<!-- Navigation Start-->
<nav class="uix-menu__container">
<div class="uix-menu__inner">
<span class="uix-brand--mobile"><img src="assets/images/logo-colorful.png" alt="Uix Kit"></span>
<ul class="uix-menu">
<li class="multi-column current-menu-item is-active"><a href="index.html">Components</a>
<ul class="sub-menu">
<li>
<span class="multi-column-title">Web Elements (Basic)</span>
<ul class="sub-menu">
<li><a href="helper-classes.html">Helper Classes</a></li>
<li><a href="uix-grid.html">Uix Grid</a></li>
<li><a href="bootstrap-grid.html">Bootstrap Grid</a></li>
<li><a href="bootstrap-24-grid.html">Bootstrap 24 Grid</a></li>
<li><a href="blended-grid-layout.html">Blended Grid</a></li>
<li><a href="gallery-grid-layout.html">Gallery Grid</a></li>
<li><a href="spacing.html">Spacing</a></li>
<li><a href="material-container.html">Material Container</a></li>
<li><a href="striking.html">Striking</a></li>
<li><a href="button.html">Buttons</a></li>
<li><a href="overlay.html">Overlay</a></li>
<li><a href="video.html">Video</a></li>
<li><a href="video-background.html">Video BG</a></li>
<li><a href="heading.html">Heading</a></li>
<li><a href="dividing-line.html">Dividing Line</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="responsive-images.html">Responsive Images</a></li>
<li><a href="background-interaction.html">Background</a></li>
<li><a href="parallax.html">Parallax</a></li>
<li><a href="parallax2.html">Parallax 2</a></li>
<li><a href="vertical-centering.html">Vertical Centering</a></li>
<li><a href="equal-width-columns.html">Equal-width Columns</a></li>
<li><a href="equal-height-columns.html">Equal-height Columns</a></li>
<li><a href="align-wide-and-full-element.html">Align Wide/Full Element</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Web Elements (Part 1)</span>
<ul class="sub-menu">
<li><a href="toast.html">Toast</a><span class="uix-bubble">new</span></li>
<li><a href="navs.html">Navs</a></li>
<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="modal-dialog.html">Modal Dialog</a></li>
<li><a href="modal-dialog-auto.html">Modal Dialog Auto-open</a></li>
<li><a href="social-meida-icons.html">Social Media Icons</a></li>
<li><a href="form.html">Form Elements</a></li>
<li><a href="form2.html">Form Elements 2</a></li>
<li><a href="form-layout.html">Form Layout</a></li>
<li><a href="form-progress.html">Form Progress</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="progress-bar.html">Progress Bar</a></li>
<li><a href="progress-line.html">Progress Line</a></li>
<li><a href="vertical-text.html">Vertical Text</a></li>
<li><a href="circle-text.html">Circle Text</a></li>
<li><a href="coach-mark.html">Coach Mark</a></li>
<li><a href="separator-of-rule-with-text.html">Separator of Rule With Text</a></li>
<li><a href="wave-background.html">Wave Background</a></li>
<li><a href="shape-animation.html">Shape Animation</a></li>
<li><a href="image-animation.html">Image Animation</a></li>
<li><a href="svg-map.html">SVG Map</a></li>
<li><a href="floating-side-element.html">Floating Side Element</a></li>
<li><a href="infinite-scrolling-element.html">Infinite Scrolling Element</a></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Web Elements (Part 2)</span>
<ul class="sub-menu">
<li><a href="tooltip.html">Tooltip</a></li>
<li><a href="ribbon.html">Ribbon</a></li>
<li><a href="footer-templates.html">Footer Templates</a></li>
<li><a href="login-templates.html">Login Templates</a><span class="uix-bubble">new</span></li>
<li><a href="pagination.html">Pagination</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="mouse-animation-scroll.html">Mouse Animation Scroll</a></li>
<li><a href="periodical-scroll.html">Periodical Scroll</a></li>
<li><a href="image-shapes.html">Image Shapes</a></li>
<li><a href="rotating-elements.html">Rotating Elements</a></li>
<li><a href="dotted-line.html">Dotted Line</a></li>
<li><a href="swiper.html">Swiper<small style="font-size: 10px;background: #51B801; color:#fff; border-radius: 5px;padding: 2px 3px;display: inline-block;margin-left: 3px;">Third-party plugin</small></a></li>
<li><a href="advanced-slider.html">Advanced Slider (Basic)</a></li>
<li><a href="advanced-slider-brightness.html">Advanced Slider Brightness</a></li>
<li><a href="advanced-slider-liquid.html">Advanced Slider Liquid</a></li>
<li><a href="advanced-slider-liquid2.html">Advanced Slider Liquid 2</a></li>
<li><a href="advanced-slider-liquid3.html">Advanced Slider Liquid 3</a></li>
<li><a href="advanced-slider-parallax.html">Advanced Slider Parallax</a></li>
<li><a href="hybrid-content-slider.html">Hybrid Content Slider</a><span class="uix-bubble">new</span></li>
<li><a href="svg-mask-slider.html">SVG Mask Slider</a><span class="uix-bubble">new</span></li>
<li><a href="3D-explosive-particle-slider.html">3D Explosive Particle Slider</a></li>
<li><a href="3D-liquid-scrollspy-slider.html">3D Liquid Scrollspy Slider</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Contents (Part 1)</span>
<ul class="sub-menu">
<li><a href="content-placeholder-animated.html">Content Placeholder Animated</a></li>
<li><a href="list-posts.html">Posts List</a></li>
<li><a href="fullwidth-column-to-edge.html">Full Width Column to Edge</a><span class="uix-bubble">new</span></li>
<li><a href="list-side-by-side.html">Side by Side List</a></li>
<li><a href="list-side-by-side-img.html">Side by Side List With Photo</a></li>
<li><a href="list-bulleted.html">Bulleted List</a></li>
<li><a href="list-brands.html">Brands List</a></li>
<li><a href="list-maintain-aspect-ratio.html">Maintain Aspect Ratio List</a></li>
<li><a href="single-post.html">Single Post</a></li>
<li><a href="sidebar.html">Sidebar</a></li>
<li><a href="contact.html">Contact Form With Map</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordion.html">Accordion</a></li>
<li><a href="accordion-img.html">Accordion Background Images</a></li>
<li><a href="gallery.html">Gallery Normal</a></li>
<li><a href="gallery-filter.html">Gallery Filterable</a></li>
<li><a href="gallery-masonry.html">Gallery Masonry</a></li>
<li><a href="gallery-masonry-ajax.html">Gallery Masonry With Ajax</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Contents (Part 2)</span>
<ul class="sub-menu">
<li><a href="card.html">Cards</a></li>
<li><a href="table-series.html">Table</a></li>
<li><a href="table-sorter.html">Table Sorter</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="multi-items-carousel.html">Multiple Items Carousel</a></li>
<li><a href="team-fullwidth.html">Team Fullwidth</a></li>
<li><a href="team-grid.html">Team Grid</a></li>
<li><a href="team-focus.html">Team Focus</a></li>
<li><a href="circle-layout.html">Circle Layout</a></li>
<li><a href="3D-carousel.html">3D Carousel</a></li>
<li><a href="3D-gallery.html">3D Gallery (threejs)</a></li>
<li><a href="cascading-dropdown-list.html">Cascading DropDown List</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Interaction (Part 1)</span>
<ul class="sub-menu">
<li><a href="sticky-elements.html">Sticky Elements</a></li>
<li><a href="scroll-reveal.html">Scroll Reveal</a></li>
<li><a href="scrollspy-animate.html">Scrollspy Animate</a><span class="uix-bubble">new</span></li>
<li><a href="skew-on-scroll.html">Skew on Scroll</a><span class="uix-bubble">new</span></li>
<li><a href="text-effect.html">Text Effect</a><span class="uix-bubble">new</span></li>
<li><a href="smooth-scrolling-page.html">Smooth Scrolling Page</a></li>
<li><a href="list-posts-with-ajax.html">Ajax Load Posts</a></li>
<li><a href="list-posts-with-ajax2.html">Ajax Load Posts 2</a></li>
<li><a href="list-posts-with-ajax-infinitescroll.html">Infinite Scroll Posts</a></li>
<li><a href="show-more-less.html">Show More Less</a></li>
<li><a href="mousewheel-interaction.html">Mousewheel Interaction</a></li>
<li><a href="hover-delay-interaction.html">Hover Delay Interaction</a></li>
<li><a href="one-page.html">Full Page/One Page</a></li>
<li><a href="one-page2.html">Full Page/One Page 2</a></li>
<li><a href="ajax-page-loader.html">Ajax Page Loader</a></li>
<li><a href="ajax-push-content.html">Ajax Push Content</a></li>
<li><a href="3D-background.html">3D Background</a></li>
<li><a href="3D-specular.html">3D Specular (threejs)</a><span class="uix-bubble">new</span></li>
<li><a href="3D-background-three.html">3D Background 1 (threejs)</a></li>
<li><a href="3D-background-three2.html">3D Background 2 (threejs)</a></li>
<li><a href="3D-background-three3.html">3D Background 3 (threejs)</a></li>
<li><a href="3D-simulate-html-layout.html">Simulate HTML Layout (threejs)</a></li>
</ul>
<!-- .sub-menu end -->
</li>
<li>
<span class="multi-column-title">Interaction (Part 2)</span>
<ul class="sub-menu">
<li><a href="3D-pages.html">3D Pages</a></li>
<li><a href="3D-particle-effect.html">3D Particle Effect</a></li>
<li><a href="3D-sphere-three.html">3D Sphere Rotation</a></li>
<li><a href="3D-obj-anim-interaction.html">3D Object Anim Interaction</a></li>
<li><a href="3D-image-transition.html">3D Image Transition (threejs)</a></li>
<li><a href="3D-mouse-interaction.html">3D Mouse Interaction (threejs)</a></li>
<li><a href="3D-mouse-interaction2.html">3D Mouse Interaction2 (threejs)</a></li>
<li><a href="3D-model.html">3D Model</a></li>
<li><a href="3D-filmic-effects.html">3D Filmic Effects</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
</ul>
</li>
<li><a href="#">Menu</a>
<ul class="sub-menu">
<li><a href="mega-menu.html">Mega Menu</a></li>
<li><a href="mega-menu-rtl.html">Mega Menu(RTL)</a></li>
<li><a href="dropdown-menu.html">Dropdown Menu</a></li>
<li><a href="dropdown-menu2.html">Dropdown Menu 2(Multi-level)</a></li>
<li><a href="vertical-menu.html" target="_blank">Vertical Menu</a></li>
<li><a href="lava-lamp-style-menu.html">Lava-Lamp Style Menu</a><span class="uix-bubble">new</span></li>
</ul>
<!-- .sub-menu end -->
</li>
<li><a href="typography.html">Typography</a>
<ul class="sub-menu">
<li><a href="typography.html">LTR</a></li>
<li><a href="typography-rtl.html">RTL</a></li>
<li><a href="typography-cn.html">中文</a></li>
</ul>
</li>
<li><a href="sample-page-1.html">Sample Pages</a>
<ul class="sub-menu">
<li><a href="sample-page-1.html">Sample Page 1</a></li>
<li><a href="sample-page-2.html">Sample Page 2</a></li>
</ul>
</li>
</ul>
<div class="uix-menu__right-box">
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Twitter" href="https://twitter.com/uiux_lab" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Follow us on Facebook" href="https://www.facebook.com/uiuxlabhome" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="uix-social-btn uix-social-btn--small uix-social-btn--circle uix-social-btn--thin uix-social-btn--white" title="Fork on Github" href="https://github.com/xizon/uix-kit" target="_blank">
<i class="fa fa-github"></i>
</a>
</div>
</div><!-- /.uix-menu__inner -->
</nav>
<!-- .uix-menu__container end -->
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Timeline (Vertical)</h3>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-timeline__container-wrapper is-vertical">
<div class="uix-timeline__container">
<div class="uix-timeline">
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit .</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
</div>
<!-- .uix-timeline end -->
</div><!-- /.uix-timeline__container -->
</div><!-- /.uix-timeline__container-wrapper -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Timeline (Vertical & Reversed)</h3>
<p>Based on the above vertical timeline. Overlay the class <code>.is-reversed</code> on the <code>.is-vertical</code> to use this style.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div class="row">
<div class="col-12">
<div class="uix-timeline__container-wrapper is-vertical is-reversed">
<div class="uix-timeline__container">
<div class="uix-timeline">
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit .</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
</div>
<!-- .uix-timeline end -->
</div><!-- /.uix-timeline__container -->
</div><!-- /.uix-timeline__container-wrapper -->
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Timeline Interaction (Horizontal)</h3>
<p>Add a wrapper <code><div class="uix-timeline__container-wrapper is-horizontal">...</div></code> around the content inside <code><div class="uix-timeline__container">...</div></code>. And overlay the class <code>.js-uix-timeline</code> on the <code>.uix-timeline__container-wrapper</code> to enable interaction.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="uix-timeline__container-wrapper is-horizontal js-uix-timeline">
<div class="uix-timeline__container">
<div class="uix-timeline" data-show-ele="">
<div class="uix-timeline__item is-active">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span class="uix-timeline__item__date">Jan 13</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 3</h3>
<p>Lorem ipsum dolor sit amet</p>
<span class="uix-timeline__item__date">Jan 12</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.</p>
<span class="uix-timeline__item__date">Jan 11</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="uix-timeline__item__date">Jan 10</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span class="uix-timeline__item__date">Jan 9</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="uix-timeline__item__date">Jan 2</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
</div>
<!-- .uix-timeline end -->
</div><!-- /.uix-timeline__container -->
<a href="javascript:" class="uix-timeline__btn uix-timeline__btn--prev"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a>
<a href="javascript:" class="uix-timeline__btn uix-timeline__btn--next"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div><!-- /.uix-timeline__container-wrapper -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Timeline Interaction (Horizontal & Reversed)</h3>
<p>Based on the above horizontal timeline. Overlay the class <code>.is-reversed</code> on the <code>.is-horizontal</code> to use this style.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="uix-timeline__container-wrapper is-horizontal is-reversed js-uix-timeline">
<div class="uix-timeline__container">
<div class="uix-timeline" data-show-ele="">
<div class="uix-timeline__item is-active">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span class="uix-timeline__item__date">Jan 13</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 3</h3>
<p>Lorem ipsum dolor sit amet</p>
<span class="uix-timeline__item__date">Jan 12</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.</p>
<span class="uix-timeline__item__date">Jan 11</span>
</div>
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="uix-timeline__item__date">Jan 10</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span class="uix-timeline__item__date">Jan 9</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
<span class="uix-timeline__item__date">Jan 2</span>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
</div>
<!-- .uix-timeline end -->
</div><!-- /.uix-timeline__container -->
<a href="javascript:" class="uix-timeline__btn uix-timeline__btn--prev"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a>
<a href="javascript:" class="uix-timeline__btn uix-timeline__btn--next"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div><!-- /.uix-timeline__container-wrapper -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Timeline Interaction (Horizontal & Only 1 Description Block Display)</h3>
<p>Add a wrapper <code><div class="uix-timeline__container-wrapper is-horizontal">...</div></code> around the content inside <code><div class="uix-timeline__container">...</div></code>. And overlay the class <code>.js-uix-timeline</code> on the <code>.uix-timeline__container-wrapper</code> to enable interaction.</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="uix-timeline__container-wrapper is-horizontal uix-timeline__container-wrapper--classic js-uix-timeline">
<h2 class="uix-t-c" id="timeline-number-show">Jan 14</h2>
<div class="uix-timeline__container">
<div class="uix-timeline" data-show-ele="#timeline-number-show">
<div class="uix-timeline__item is-active">
<div class="uix-timeline__item__img uix-border--circle uix-border--circle-only-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8Z2X3HwAFawJH9fA6+AAAAABJRU5ErkJggg==" alt="">
<span class="uix-timeline__item__date">Jan 14</span>
</div>
<div class="uix-timeline__item__info">
<h3>Timeline Title Here 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
</div>
<div class="uix-timeline__line"></div>
</div><!-- /.uix-timeline__item -->
<div class="uix-timeline__item">
<div clas