The timeline block allows you to display a chronological list of items that have a start point, and end point. The most common use case for this block would be a list of events with a defined start and end year, with each individual item pertaining to a specific day, month, or even year.

Markup Example

<div class="u-block u-block--white">
	<section class="b-timeline">

		<h2 class="c-heading c-heading--center">Heading is Optional</h2>
		<p>And the description is optional as well.</p>

		<div class="timeline__container">

			<div class="timeline__bookend">
				<p>2009</p>
			</div>

			<ul class="timeline__list" itemscope itemtype="http://schema.org/ItemList">
				<li itemprop="item">
					<p itemprop="name">Sub title for an individual item</p>
					<p itemprop="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur eleifend diam.</p>
				</li>
				<li itemprop="item">
					<p itemprop="name">A second item on the righthand side</p>
					<p itemprop="description">Praesent condimentum magna in augue sodales pellentesque quis vel nunc.</p>
				</li>
				<li itemprop="item">
					<p itemprop="name">Items alternate from side to side</p>
					<p itemprop="description">In imperdiet imperdiet maximus. Sed urna quam, ullam corper eu ligula pulvina.</p>
				</li>
			</ul>

			<div class="timeline__bookend">
				<p>2020</p>
			</div>

		</div>
	</section>
</div>

Block details

Timeline block meta	values
handle	timeline
width type	fixed
colour options	u-block--white, u-block--grey
section use	<main>
has heading	true
theme(s)	CU