uix-kit

<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Timeline - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper">  <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div>  <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent">  <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>  </div>  </section>  <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> <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> <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> <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> <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> </div>  </div> </div> </div> </div>  </div>  </section>  <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>  </div>  </section>  <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> <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> <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> <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> <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> </div>  </div> </div> </div> </div>  </div>  </section>  <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>  </div>  </section>  <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> <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> <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> <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> <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> <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> <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> </div>  </div> <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> </section>  <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>  </div>  </section>  <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> <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> <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> <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> <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> <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> <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> </div>  </div> <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> </section>  <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>  </div>  </section>  <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> <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=""> <span class="uix-timeline__item__date">Jan 13</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 12</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 3</h3> <p>Lorem ipsum dolor sit amet</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 11</span> </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> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 10</span> </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> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 9</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 6</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 2</span> </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> </div> <div class="uix-timeline__line"></div> </div> </div>  </div> <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> </section>  <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-show2">Jan 14</h2> <div class="uix-timeline__container"> <div class="uix-timeline uix-timeline--to-center" data-show-ele="#timeline-number-show2"> <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> <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=""> <span class="uix-timeline__item__date">Jan 13</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 12</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 3</h3> <p>Lorem ipsum dolor sit amet</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 11</span> </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> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 10</span> </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> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 9</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 6</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 2</span> </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> </div> <div class="uix-timeline__line"></div> </div> </div>  </div> <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> </section>  <section> <div class="container"> <div class="row"> <div class="col-12"> <h3>Timeline Interaction (Vertical & Only 1 Description Block Display)</h3> <p>Add a wrapper <code><div class="uix-timeline__container-wrapper is-vertical">...</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>  </div>  </section>  <section class="uix-spacing--s"> <div class="container"> <div class="row"> <div class="col-12"> <div class="uix-timeline__container-wrapper is-vertical js-uix-timeline"> <div class="uix-timeline__container"> <div class="uix-timeline"> <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> <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=""> <span class="uix-timeline__item__date">Jan 13</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 12</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 3</h3> <p>Lorem ipsum dolor sit amet</p> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 11</span> </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> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 10</span> </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> </div> <div class="uix-timeline__line"></div> </div> <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=""> <span class="uix-timeline__item__date">Jan 9</span> </div> <div class="uix-timeline__item__info"> <h3>Timeline Title Here 6</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uix-timeline__line"></div> </div> </div>  </div> <a href="javascript:" class="uix-timeline__btn uix-timeline__btn--prev"><i class="fa fa-long-arrow-up" aria-hidden="true"></i></a> <a href="javascript:" class="uix-timeline__btn uix-timeline__btn--next"><i class="fa fa-long-arrow-down" aria-hidden="true"></i></a> </div><!-- /.uix-timeline__container-wrapper --