0%
Uix Kit

Timeline (Vertical)


Timeline Title Here 1

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.

Jan 14

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit .

Jan 14

Timeline Title Here 3

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.

Jan 14

Timeline Title Here 4

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.

Jan 14

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 14

Timeline (Vertical & Reversed)

Based on the above vertical timeline. Overlay the class .is-reversed on the .is-vertical to use this style.


Timeline Title Here 1

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.

Jan 14

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit .

Jan 14

Timeline Title Here 3

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.

Jan 14

Timeline Title Here 4

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.

Jan 14

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 14

Timeline Interaction (Horizontal)

Add a wrapper <div class="uix-timeline__container-wrapper is-horizontal">...</div> around the content inside <div class="uix-timeline__container">...</div>. And overlay the class .js-uix-timeline on the .uix-timeline__container-wrapper to enable interaction.


Timeline Title Here 1

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.

Jan 14

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 13

Timeline Title Here 3

Lorem ipsum dolor sit amet

Jan 12

Timeline Title Here 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.

Jan 11

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 10

Timeline Title Here 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 9

Timeline Title Here 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 2

Timeline Interaction (Horizontal & Reversed)

Based on the above horizontal timeline. Overlay the class .is-reversed on the .is-horizontal to use this style.


Timeline Title Here 1

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.

Jan 14

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 13

Timeline Title Here 3

Lorem ipsum dolor sit amet

Jan 12

Timeline Title Here 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.

Jan 11

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 10

Timeline Title Here 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 9

Timeline Title Here 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 2

Timeline Interaction (Horizontal & Only 1 Description Block Display)

Add a wrapper <div class="uix-timeline__container-wrapper is-horizontal">...</div> around the content inside <div class="uix-timeline__container">...</div>. And overlay the class .js-uix-timeline on the .uix-timeline__container-wrapper to enable interaction.


Jan 14

Jan 14

Timeline Title Here 1

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.

Jan 13

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 12

Timeline Title Here 3

Lorem ipsum dolor sit amet

Jan 11

Timeline Title Here 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.

Jan 10

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 9

Timeline Title Here 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 2

Timeline Title Here 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 14

Jan 14

Timeline Title Here 1

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.

Jan 13

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 12

Timeline Title Here 3

Lorem ipsum dolor sit amet

Jan 11

Timeline Title Here 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.

Jan 10

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 9

Timeline Title Here 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 2

Timeline Title Here 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Timeline Interaction (Vertical & Only 1 Description Block Display)

Add a wrapper <div class="uix-timeline__container-wrapper is-vertical">...</div> around the content inside <div class="uix-timeline__container">...</div>. And overlay the class .js-uix-timeline on the .uix-timeline__container-wrapper to enable interaction.


Jan 14

Timeline Title Here 1

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.

Jan 13

Timeline Title Here 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Jan 12

Timeline Title Here 3

Lorem ipsum dolor sit amet

Jan 11

Timeline Title Here 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora.

Jan 10

Timeline Title Here 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 9

Timeline Title Here 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit.