Unity Pattern Lab

Horizontal Timeline

16 Jan
28 Feb
20 Mar
20 May
09 Jul
30 Aug
15 Sep
01 Nov
10 Dec
29 Jan
3 Mar

Lorem ipsum dolor sit (37 characters)
January 16th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
February 28th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
March 20th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
May 20th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
July 9th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
August 30th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
September 15th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
November 1st, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
December 10th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
January 19th, 2015
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
March 3rd, 2015
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

HTML

									
										
<section class="sbu-horizontal-timeline">
    <div class="timeline">
        <div class="events-wrapper">
            <div class="events">
                <ul class="no-bullets">
                    <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
                    <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
                    <li><a href="#0" data-date="20/04/2014">20 Mar</a></li>
                    <li><a href="#0" data-date="20/05/2014">20 May</a></li>
                    <li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
                    <li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
                    <li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
                    <li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
                    <li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
                    <li><a href="#0" data-date="19/01/2015">29 Jan</a></li>
                    <li><a href="#0" data-date="03/03/2015">3 Mar</a></li>
                </ul>

                <span class="filling-line" aria-hidden="true"></span>
            </div> <!-- .events -->
        </div> <!-- .events-wrapper -->
            
        <ul class="sbu-timeline-navigation no-bullets">
            <li><a href="#0" class="prev inactive">Prev</a></li>
            <li><a href="#0" class="next">Next</a></li>
        </ul> <!-- .sbu-timeline-navigation -->
    </div> <!-- .timeline -->

    <div class="events-content">
        <ul class="no-bullets">
            <li class="selected" data-date="16/01/2014">
                <h2>Lorem ipsum dolor sit (37 characters)</h2>
                <em>January 16th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="28/02/2014">
                <h2>Event title here</h2>
                <em>February 28th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="20/04/2014">
                <h2>Event title here</h2>
                <em>March 20th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="20/05/2014">
                <h2>Event title here</h2>
                <em>May 20th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="09/07/2014">
                <h2>Event title here</h2>
                <em>July 9th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="30/08/2014">
                <h2>Event title here</h2>
                <em>August 30th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="15/09/2014">
                <h2>Event title here</h2>
                <em>September 15th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="01/11/2014">
                <h2>Event title here</h2>
                <em>November 1st, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="10/12/2014">
                <h2>Event title here</h2>
                <em>December 10th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="19/01/2015">
                <h2>Event title here</h2>
                <em>January 19th, 2015</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="03/03/2015">
                <h2>Event title here</h2>
                <em>March 3rd, 2015</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>
        </ul>
    </div> <!-- .events-content -->
</section>

Vertical Timeline

The swallow may fly south with the sun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.
Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.
All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.
Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.
Veggies sunt bona vobis, proinde vos

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.
Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

HTML

									
										
    <ul class="vertical-timeline">
        

        <li>
            <div class="vertical-timeline--item-icon"><i class="sbuicon-th-large"></i></div>
            <div class="vertical-timeline--item-content-wrap">
                <h4 class="vertical-timeline--item-heading">The swallow may fly south with the sun</h4>
                <div class="vertical-timeline--item-content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
                </div>
            </div>
        </li>

        <li>
            <div class="vertical-timeline--item-icon"><i class="sbuicon-film"></i></div>
            <div class="vertical-timeline--item-content-wrap">
                <h4 class="vertical-timeline--item-heading">All right. Well, take care of yourself, Han</h4>
                <div class="vertical-timeline--item-content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
                </div>
            </div>
        </li>

        <li>
            <div class="vertical-timeline--item-icon"><i class="sbuicon-music"></i></div>
            <div class="vertical-timeline--item-content-wrap">
                <h4 class="vertical-timeline--item-heading">Veggies sunt bona vobis, proinde vos</h4>
                <div class="vertical-timeline--item-content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
                </div>
            </div>
        </li>
    </ul>