2018
Timeline item
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
Timeline item
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2017
Timeline item
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2016
Timeline item
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
<div class="o-timeline2">
<div class="o-timeline2__row row">
<div class="o-timeline2__line col-8 col-md-4 my-0 order-md-2">
<div class="o-timeline2__point">
<div class="o-timeline2__point__text"><strong>2018</strong></div>
</div>
</div>
<div class="col-16 col-md-10 my-0 order-md-1">
<div class="o-timeline2__item row">
<div class="col-24 col-sm-8 col-md-24 col-lg-8">
<a href="https://placehold.it/1024x768/" class="lightbox">
<img src="https://placehold.it/100x100/" loading="lazy" width="100" height="100" alt="Timeline item" class="o-timeline2__thumb">
</a>
</div>
<div class="col">
<p class="o-timeline1__title">
<strong> Timeline item </strong>
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
<div class="o-timeline2__row row o-timeline2__row--pull">
<div class="o-timeline2__line col-8 col-md-4 my-0 offset-md-10">
</div>
<div class="col-16 col-md-10 my-0">
<div class="o-timeline2__item row">
<div class="col-24 col-sm-8 col-md-24 col-lg-8 order-lg-2">
<a href="https://placehold.it/1024x768/" class="lightbox">
<img src="https://placehold.it/100x100/" loading="lazy" width="100" height="100" alt="Timeline item" class="o-timeline2__thumb">
</a>
</div>
<div class="col">
<p class="o-timeline1__title">
<strong> Timeline item </strong>
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
<div class="o-timeline2__row row">
<div class="o-timeline2__line col-8 col-md-4 my-0 order-md-2">
<div class="o-timeline2__point">
<div class="o-timeline2__point__text"><strong>2017</strong></div>
</div>
</div>
<div class="col-16 col-md-10 my-0 order-md-1">
<div class="o-timeline2__item row">
<div class="col-24 col-sm-8 col-md-24 col-lg-8">
<a href="https://placehold.it/1024x768/" class="lightbox">
<img src="https://placehold.it/100x100/" loading="lazy" width="100" height="100" alt="Timeline item" class="o-timeline2__thumb">
</a>
</div>
<div class="col">
<p class="o-timeline1__title">
<strong> Timeline item </strong>
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
<div class="o-timeline2__row row">
<div class="o-timeline2__line col-8 col-md-4 my-0 offset-md-10">
<div class="o-timeline2__point">
<div class="o-timeline2__point__text"><strong>2016</strong></div>
</div>
</div>
<div class="col-16 col-md-10 my-0">
<div class="o-timeline2__item row">
<div class="col-24 col-sm-8 col-md-24 col-lg-8 order-lg-2">
<a href="https://placehold.it/1024x768/" class="lightbox">
<img src="https://placehold.it/100x100/" loading="lazy" width="100" height="100" alt="Timeline item" class="o-timeline2__thumb">
</a>
</div>
<div class="col">
<p class="o-timeline1__title">
<strong> Timeline item </strong>
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>.o-timeline2 {
$self: &;
margin: 0 auto;
max-width: map-get($container-max-widths, 'md');
position: relative;
z-index: 0;
&__line {
display: flex;
flex-direction: column;
&:after {
border-right: 1px solid color('gray-light');
content: '';
flex-grow: 1;
width: 50%;
}
}
&__row {
margin-bottom: 0;
margin-top: 0;
&:not(:last-child) {
#{$self}__item {
@media(min-width: breakpoint-min(md)) {
padding-bottom: space(4);
}
}
}
&--pull {
@media(min-width: breakpoint-min(md)) {
margin-top: space(4) * -2;
}
}
}
&__item {
padding-top: space(1);
}
&__point {
background: color('gray-light');
border-radius: 50%;
margin: space(1) space(2);
position: relative;
@media(min-width: breakpoint-min(sm)) {
margin: space(1) space(3);
}
@media(min-width: breakpoint-min(md)) {
margin: space(1);
}
&:before {
content: '';
display: block;
padding-bottom: 100%;
}
&__text {
left: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
}
&__thumb {
border-radius: 50%;
}
& #{$self}__title {
margin-bottom: space(1);
margin-top: space(1);
}
}