<div class="uk-container uk-padding">
<div class="uk-timeline">
<div class="uk-timeline-item">
<div class="uk-timeline-icon">
<span class="uk-badge"><span uk-icon="check"></span></span>
</div>
<div class="uk-timeline-content">
<div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<h3 class="uk-card-title"><time datetime="2020-07-08">July 8</time></h3>
<span class="uk-label uk-label-success uk-margin-auto-left">Feature</span>
</div>
</div>
<div class="uk-card-body">
<p class="uk-text-success">Fully responsive timeline you can add to your UIkit 3 project
</p>
</div>
</div>
</div>
</div>
<div class="uk-timeline-item">
<div class="uk-timeline-icon">
<span class="uk-badge"><span uk-icon="check"></span></span>
</div>
<div class="uk-timeline-content">
<div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<h3 class="uk-card-title"><time datetime="2020-07-07">July 7</time></h3>
<span class="uk-label uk-label-warning uk-margin-auto-left">Test</span>
</div>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
</div>
</div>
</div>
</div>
<div class="uk-timeline-item">
<div class="uk-timeline-icon">
<span class="uk-badge"><span uk-icon="check"></span></span>
</div>
<div class="uk-timeline-content">
<div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
<div class="uk-card-header">
<div class="uk-grid-small uk-flex-middle" uk-grid>
<h3 class="uk-card-title"><time datetime="2020-07-06">July 6</time></h3>
<span class="uk-label uk-label-danger uk-margin-auto-left">Fix</span>
</div>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
</div>
</div>
<a href="#"><span class="uk-margin-small-right" uk-icon="triangle-down"></span>Load more</a>
</div>
</div>
</div>
</div>
.uk-timeline .uk-timeline-item .uk-card {
max-height: 300px;
}
.uk-timeline .uk-timeline-item {
display: flex;
position: relative;
}
.uk-timeline .uk-timeline-item::before {
background: #dadee4;
content: "";
height: 100%;
left: 19px;
position: absolute;
top: 20px;
width: 2px;
z-index: -1;
}
.uk-timeline .uk-timeline-item .uk-timeline-icon .uk-badge {
margin-top: 20px;
width: 40px;
height: 40px;
}
.uk-timeline .uk-timeline-item .uk-timeline-content {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0 0 0 1rem;
}
