Phoenix Reisen Styleguide
Example
Tab I

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Tab II

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tab IIII

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Markup
<section class="timeline timeline--animated timeline--left">
    <span class="timeline-axis"></span>
    <article class="timeline-box">
        <div class="timeline-left-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content">
                <!-- Content -->
                <div class="pa3 pt0">
                    <div><strong>Tab I</strong></div>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr.</p>
                </div>
                <!-- /Content -->
            </div>
        </div>
    </article>
    <article class="timeline-box">
        <div class="timeline-left-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content">
                <!-- Content -->
                <div class="pa3 pt0">
                    <div><strong>Tab II</strong></div>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
                <!-- /Content -->
            </div>
        </div>
    </article>
    <article class="timeline-box">
        <div class="timeline-left-box">
            <i class="timeline-circle"></i>
            <div class="timeline-content">
                <!-- Content -->
                <div class="pa3 pt0">
                    <div><strong>Tab IIII</strong></div>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet,
                        consetetur sadipscing elitr,
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                        gubergren,
                        no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
                <!-- /Content -->
            </div>
        </div>
    </article>
</section>
Source: src/components/_timeline.scss, line 28