La costruzione dell'a Timeline tramite codice è abbastanza laboriosa

<div class="u-padding-all-xxl u-background-grey-15 u-sizeFull">
    <div class="Timeline u-layout-prose u-layoutCenter">
        <div class="Timeline-point">
            <div class="Timeline-point-content u-background-95 u-color-white">
                <div class="u-textWeight-700">a</div>
            </div>
        </div>
        <div class="Timeline-content u-color-black">
            <div class="Timeline-arrow Icon-drop-down u-color-white"></div>
            <div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
                <h2 class="u-text-r-xs u-padding-r-bottom">labore facere aut</h2>
                <p class="u-text-p u-textSecondary">
                    Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
                </p>
            </div>
        </div>
    </div>
    <div class="Timeline u-layout-prose u-layoutCenter">
        <div class="Timeline-point">
            <div class="Timeline-point-content u-background-95 u-color-white">
                <div class="u-textWeight-700">dolores</div>
            </div>
        </div>
        <div class="Timeline-content u-color-black">
            <div class="Timeline-arrow Icon-drop-down u-color-white"></div>
            <div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
                <h2 class="u-text-r-xs u-padding-r-bottom">porro vel rem</h2>
                <p class="u-text-p u-textSecondary">
                    Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
                </p>
            </div>
        </div>
    </div>
    <div class="Timeline u-layout-prose u-layoutCenter">
        <div class="Timeline-point">
            <div class="Timeline-point-content u-background-95 u-color-white">
                <div class="u-textWeight-700">vel</div>
            </div>
        </div>
        <div class="Timeline-content u-color-black">
            <div class="Timeline-arrow Icon-drop-down u-color-white"></div>
            <div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
                <h2 class="u-text-r-xs u-padding-r-bottom">culpa nam consequatur</h2>
                <p class="u-text-p u-textSecondary">
                    Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
                </p>
            </div>
        </div>
    </div>
</div>