Uikit 3 timeline

index.html

	<div class="uk-section">	
<div class="uk-container uk-container-small">
  <div id="switcher">
									<label class="uk-switch" for="on-1">
										<input type="checkbox" id="on-1" />
										<div class="uk-switch-slider uk-switch-on-off round"></div>
									</label>
								</div>
		<div class="uk-timeline" uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 500;">
			<div class="uk-timeline-item">
				<div class="uk-timeline-icon uk-background-primary uk-border-circle uk-flex uk-flex-center uk-flex-middle">
					<span uk-icon="star" class="uk-light"></span>

				</div>
				<div class="uk-timeline-content uk-card uk-card-body uk-card-default">
					<h2 class="uk-background-primary uk-light">LOREM IPSUM DOLOR</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
						Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
					</p>
					<a href="#" class="uk-button uk-button-default">button</a>
				</div>
			</div>

			<div class="uk-timeline-item">
				<div class="uk-timeline-icon uk-background-primary uk-border-circle uk-flex uk-flex-center uk-flex-middle">
					<span uk-icon="happy" class="uk-light"></span>

				</div>
				<div class="uk-timeline-content uk-card uk-card-body uk-card-default right">
					<h2 class="uk-background-primary uk-light">LOREM IPSUM DOLOR</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
					</p>
					<a href="#" class="uk-button uk-button-default">button</a>
				</div>
			</div>

			<div class="uk-timeline-item">
				<div class="uk-timeline-icon uk-background-primary uk-border-circle uk-flex uk-flex-center uk-flex-middle">
					<span uk-icon="lifesaver" class="uk-light"></span>

				</div>
				<div class="uk-timeline-content uk-padding-remove uk-card uk-card-body uk-card-default">
          <div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url(https://getuikit.com/docs/images/dark.jpg);">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h1 uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; viewport: 0.5;">Headline</h1>
        <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; viewport: 0.5;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>
				</div>
			</div>

      <div class="uk-timeline-item">
				<div class="uk-timeline-icon uk-background-primary uk-border-circle uk-flex uk-flex-center uk-flex-middle">
					<span uk-icon="comments" class="uk-light"></span>

				</div>
				<div class="uk-timeline-content uk-card uk-card-body uk-card-default right">
					<div class="uk-card-header">
        <div class="uk-grid-small uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
                <img class="uk-border-circle" width="40" height="40" src="https://getuikit.com/docs/images/avatar.jpg">
            </div>
            <div class="uk-width-expand">
                <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
                <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
            </div>
        </div>
    </div>
    <div class="uk-card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
					<a href="#" class="uk-button uk-button-default">button</a>
				</div>
			</div>

			<div class="uk-timeline-item">
				<div class="uk-timeline-icon uk-background-primary uk-border-circle uk-flex uk-flex-center uk-flex-middle">
					<span uk-icon="world" class="uk-light"></span>

				</div>
				<div class="uk-timeline-content uk-padding-remove uk-card uk-card-body uk-card-default">
					<div class="uk-card-media-top">
                <img src="https://getuikit.com/docs/images/light.jpg" alt="">
            </div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
					<a href="#" class="uk-button uk-button-default">button</a>
            </div>
				</div>
			</div>
		</div>
	</div>
 </div>

script.js

//This is just for toggle button, no need to copy that in Your project

$('#on-1').click(function() {
    $("body").toggleClass("dark-side");
});

scripts

<script src="https://getuikit.com/assets/uikit/dist/js/uikit.js?nc=5152"></script>
<script src="https://getuikit.com/assets/uikit/dist/js/uikit-icons.js?nc=5152"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

// Mixins and Placeholders
%clearfix {
	&:after, &:before {
		content: '';
		display: block;
		width: 100%;
		clear: both;
	}
}
//Color Variable
$blue: #1e87f0;
$dark: #0d2838;
$dark-gray: #4a6c85;
$dark-black: #191919;
$ashes: #b7bec2;
$dark-card: #213d52;

body{
  background-color: white;
  transition: all 0.5s ease;
}


// Timeline
.uk-timeline {
  margin: 30px auto;
	position: relative;
  padding: 0 10px;
	&:before {
		content:"";
		width: 3px;
		height: 100%;
    background: $blue;
		left: 50%;
		top: 0;
		position: absolute;
	}

	&:after {
		content: "";
		clear: both;
		display: table;
		width: 100%;
	}
	
	.uk-timeline-item {
		margin-bottom: 50px;
		position: relative;
		@extend %clearfix;

		.uk-timeline-icon {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: 50%;
			overflow: hidden;
			margin-left: -23px;
		}

		.uk-timeline-content {
			width: 40%;
			padding: 20px;

			h2 {
				padding: 15px;
				margin: -20px -20px 0 -20px;
				font-weight: 300;
			}

			&:before {
				    content: '';
            position: absolute;
            right: -15px;
            top: 10px;
            width: 0px;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid $blue;
			}

			&.right {
				float: right;

				&:before {
					content: '';
          /* right: -20px; */
          left: -20px;
          border-left: 0;
          border-right: 20px solid $blue;
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.uk-timeline {
		margin: 10px;
		padding: 0px;
    width: 90%;
		&:before {
			left: 0;
		}
		
		.uk-timeline-item {
			.uk-timeline-content {
				width: 80%;
				float: right;
				
				&:before, &.right:before {
					    left: 10px;
              margin-left: -25px;
              border-left: 0;
              border-right: 15px solid $blue;
				}
			}

			.uk-timeline-icon {
				left: 0;
			}
		}
	}
}

// Togle button START
#switcher{
    position: fixed;
    z-index: 1;
    right: 0;
    top: 0;
    padding: 10px;
}
.uk-switch {
	position: relative;
	display: inline-block;
	height: 30px;
	width: 100px;
}
.uk-switch input {
	display: none;
}
.uk-switch-slider {
	background-color: rgba(0, 0, 0, 0.22);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 30px;
	bottom: 0;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 0.2s;
}
.uk-switch-slider:before {
	content: '';
	background-color: white;
	position: absolute;
	width: 25px;
	height: 26px;
	left: 2px;
	bottom: 2px;
	border-radius: 50%;
	transition-property: transform, box-shadow;
	transition-duration: 0.2s;
}
.uk-switch-slider::after {
	content: 'Light';
	position: absolute;
	color: white;
	left: 40px;
	line-height: 30px;
	font-size: 0.75rem;
}
input:checked + .uk-switch-slider {
	background-color: $ashes !important;
}
input:checked + .uk-switch-slider:before {
	transform: translateX(70px);
}
input:checked + .uk-switch-slider::after {
	content: 'Dark';
	position: absolute;
	left: 32px;
	color: $dark-gray;
}
.uk-switch-slider.uk-switch-square,
.uk-switch-slider.uk-switch-square:before {
	border-radius: 0;
}
.uk-switch-slider.uk-switch-on-off {
	background-color: $ashes;
}
.uk-switch-slider.uk-switch-on-off.round::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	content: '\f185';
	color: $ashes;
	text-align: center;
	font-size: 15px;
	line-height: 28px;
	//padding-left: 2px;
}
input:checked + .uk-switch-slider.uk-switch-on-off {
	background-color: $dark !important;
}
input:checked + .uk-switch-slider.uk-switch-on-off.round::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	color: $dark;
	content: '\f186';
	font-size: 15px;
	line-height: 28px;
	text-align: center;
	padding-left: 1px;
	background-color: $dark-gray;
}
.uk-switch-slider.uk-switch-big:before {
	transform: scale(1.2);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
input:checked + .uk-switch-slider.uk-switch-big:before {
	transform: translateX(26px) scale(1.2);
}
// Togle button END

// Come to the dark side
.dark-side{
  background-color: $dark;
  .uk-card{
    background-color: $dark-card;
    transition: all 0.5s ease;
    color: white;
    .uk-button-default{
    color: white;
    }
    .uk-card-title{
      color: white;
    }
    h2{
      background-color: $dark-black;
      transition: all 0.5s ease;
    }
    &.uk-timeline-content:before {
    border-left: 15px solid $dark-black;
}
    &.uk-timeline-content.right:before {
    border-right: 20px solid $dark-black;
}
  }
  .uk-timeline:before {
    background: $dark-card;
  }
  .uk-timeline-icon{
    background-color: $dark-card;
  }
  #switcher{
    background-color: $dark-card;
    transition: all 0.5s ease;
  }
  @media screen and (max-width: 768px) {
	.uk-timeline .uk-timeline-item .uk-timeline-content {
				
				&:before, &.right:before {
						  border-left: 0;
						  border-right: 15px solid $dark-black;
				}
			}
}
}

styles

<link href="https://getuikit.com/assets/uikit/dist/css/uikit.css?nc=5152" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />

uikit-3-timeline.markdown

Uikit 3 timeline

A Pen by Igor on CodePen.

License.