<div class="timeline">
<div class="timeline__events">
<div class="timeline__event ">
<div class="timeline__event-info-container">
<div class="timeline__event-date"><span class="timeline__dot"></span>1867</div>
<div class="timeline__event-title">Timeline Title</div>
<div class="timeline__event-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="timeline__event-image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="http://picsum.photos/832/464?random=1" alt="Text alt">
</picture>
<figcaption class="captioned-image__caption">
Test caption dude from 1972
</figcaption>
</figure>
</div>
</div>
<div class="timeline__event timeline__event--image-right">
<div class="timeline__event-info-container">
<div class="timeline__event-date"><span class="timeline__dot"></span>January 3, 1870</div>
<div class="timeline__event-title">Timeline Title</div>
<div class="timeline__event-description">
<p>The first student in this curriculum, Nathan Clifford Ricker arrived in Urbana on January 2, 1870; with Ricker, the proud tradition of architecture at Illinois began. As a result of Regent Gregory's efforts, Ricker became the first
graduate of an architecture program in the United States in March of 1873.</p>
</div>
</div>
<div class="timeline__event-image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="http://picsum.photos/184/220?random=2" alt="Text alt">
</picture>
<figcaption class="captioned-image__caption">
Test caption dude from 1972
</figcaption>
</figure>
</div>
</div>
<div class="timeline__event ">
<div class="timeline__event-info-container">
<div class="timeline__event-date"><span class="timeline__dot"></span>March 13, 1873</div>
<div class="timeline__event-title">Timeline Title</div>
<div class="timeline__event-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="timeline__event-image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="http://picsum.photos/832/464?random=3" alt="Text alt">
</picture>
<figcaption class="captioned-image__caption">
Test caption dude from 1972
</figcaption>
</figure>
</div>
</div>
<div class="timeline__event ">
<div class="timeline__event-info-container">
<div class="timeline__event-date"><span class="timeline__dot"></span>1975</div>
<div class="timeline__event-title">Timeline Title</div>
<div class="timeline__event-description">
<p>Dolor repudiandae aliquam dolorem fugiat vitae Quos asperiores voluptatibus cumque saepe ducimus Iusto voluptatum exercitationem dolore fuga porro ad debitis obcaecati Quo dolorum voluptas minus numquam nihil amet. Atque tenetur. lorem</p>
</div>
</div>
</div>
<div class="timeline__event timeline__event--image-right">
<div class="timeline__event-info-container">
<div class="timeline__event-date"><span class="timeline__dot"></span>1970 Sumthin</div>
<div class="timeline__event-title">Timeline Title</div>
<div class="timeline__event-description">
<p>Dolor repudiandae aliquam dolorem fugiat vitae Quos asperiores voluptatibus cumque saepe ducimus Iusto voluptatum exercitationem dolore fuga porro ad debitis obcaecati Quo dolorum voluptas minus numquam nihil amet. Atque tenetur. lorem</p>
</div>
</div>
<div class="timeline__event-image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="http://picsum.photos/184/220?random=4" alt="Text alt">
</picture>
<figcaption class="captioned-image__caption">
Test caption dude from 1972
</figcaption>
</figure>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="timeline">
<div class="timeline__events">
{% for event in events %}
<div class="timeline__event {{ event.image.placement == 'right' ? 'timeline__event--image-right' }}">
<div class="timeline__event-info-container">
<div class="timeline__event-date"><span class="timeline__dot"></span>{{ event.date }}</div>
<div class="timeline__event-title">{{ event.title }}</div>
<div class="timeline__event-description">{{ event.description }}</div>
</div>
{% if event.image %}
<div class="timeline__event-image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="{{ event.image.src }}" alt="{{ event.image.altText | escape }}">
</picture>
{% if event.image.caption %}
<figcaption class="captioned-image__caption">
{{ event.image.caption }}
</figcaption>
{% endif %}
</figure>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{
"siteUnit": "arch",
"departmentName": "School of Architecture",
"background": "light",
"events": [
{
"title": "Timeline Title",
"date": "1867",
"description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>",
"image": {
"src": "http://picsum.photos/832/464?random=1",
"altText": "Text alt",
"caption": "Test caption dude from 1972",
"placement": null
}
},
{
"title": "Timeline Title",
"date": "January 3, 1870",
"description": "<p>The first student in this curriculum, Nathan Clifford Ricker arrived in Urbana on January 2, 1870; with Ricker, the proud tradition of architecture at Illinois began. As a result of Regent Gregory's efforts, Ricker became the first graduate of an architecture program in the United States in March of 1873.</p>",
"image": {
"src": "http://picsum.photos/184/220?random=2",
"altText": "Text alt",
"caption": "Test caption dude from 1972",
"placement": "right"
}
},
{
"title": "Timeline Title",
"date": "March 13, 1873",
"description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>",
"image": {
"src": "http://picsum.photos/832/464?random=3",
"altText": "Text alt",
"caption": "Test caption dude from 1972",
"placement": null
}
},
{
"title": "Timeline Title",
"date": "1975",
"description": "<p>Dolor repudiandae aliquam dolorem fugiat vitae Quos asperiores voluptatibus cumque saepe ducimus Iusto voluptatum exercitationem dolore fuga porro ad debitis obcaecati Quo dolorum voluptas minus numquam nihil amet. Atque tenetur. lorem</p>",
"image": null
},
{
"title": "Timeline Title",
"date": "1970 Sumthin",
"description": "<p>Dolor repudiandae aliquam dolorem fugiat vitae Quos asperiores voluptatibus cumque saepe ducimus Iusto voluptatum exercitationem dolore fuga porro ad debitis obcaecati Quo dolorum voluptas minus numquam nihil amet. Atque tenetur. lorem</p>",
"image": {
"src": "http://picsum.photos/184/220?random=4",
"altText": "Text alt",
"caption": "Test caption dude from 1972",
"placement": "right"
}
}
]
}
.timeline
$breakpointLarge = 800px
$breakpointSmall = 540px
position relative
&__events
position relative
&__event
background-color white
padding 24px
position relative
&:not(:last-of-type)
&:before
position absolute
content ''
top 45px
left -13px
border-left solid industrialBlue 2px
height calc(100% + 16px)
+above(breakpointSmall)
top 45px
left -29px
+above(breakpointLarge)
height calc(100% + 50px)
&:not(:first-child)
margin-top 24px
+above(breakpointLarge)
margin-top 56px
&--image-right
+above(breakpointSmall)
display grid
grid-template-columns 66.66% 33.33%
grid-gap 24px
+above(breakpointLarge)
grid-template-columns 75% 25%
&__event-date
@extends $headline4
background-color industrialBlue
color white
display inline-block
font-weight 600
letter-spacing 2px
margin-bottom 24px
padding 4px 12px
position relative
&:before
background-color industrialBlue
content ''
position absolute
width 32px
height 2px
left -32px
top 50%
+above(breakpointSmall)
left -48px
width 53px
&__dot
background-color industrialBlue
border-radius 50%
display inline-block
width 8px
height 8px
position absolute
top 13px
left -40px
+above(breakpointSmall)
left -56px
&__event-title
@extends $headline2
margin-bottom 8px
&__event-description
@extends $richText
margin-bottom 24px
&__event-image
height 90%
padding-bottom 24px
+above(breakpointSmall)
margin-right 24px
.timeline__event-image > .captioned-image
height auto
There are no notes for this item.