UIkit 3 Courses and Events Card

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

<div class="uk-section">
	<div class="uk-container">
		<div class="uk-grid uk-child-width-1-3" data-uk-grid>
			<div>
				<div class="uk-card uk-card-small uk-card-default uk-card-hover uk-border-rounded-large uk-overflow-hidden">
					<div class="uk-card-media-top uk-inline uk-light">
						<img src="https://source.unsplash.com/FWVMhUa_wbY/640x380" alt="Title">
						<div class="uk-position-cover uk-overlay-xlight"></div>
						<div class="uk-position-small uk-position-top-left">
							<span class="uk-label uk-text-bold uk-text-price">$15.00</span>
						</div>
						<div class="uk-position-small uk-position-top-right">
							<a href="#" class="uk-icon-button uk-like uk-position-z-index uk-position-relative" data-uk-icon="heart"></a>
						</div>
					</div>
					<div class="uk-card-body">
						<h3 class="uk-card-title uk-margin-small-bottom">Title</h3>
						<div class="uk-text-muted uk-text-small">Category</div>
						<div class="uk-text-muted uk-text-small uk-rating uk-margin-small-top">
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-margin-small-left uk-text-bold">4.95</span>
							<span>(350)</span>
						</div>
					</div>
					<a href="course.html" class="uk-position-cover"></a>
				</div>
			</div>
			<div>
				<div class="uk-card uk-card-small uk-card-default uk-card-hover uk-border-rounded-large uk-overflow-hidden">
					<div class="uk-card-media-top uk-inline uk-light">
						<img src="https://source.unsplash.com/TluMvvrZ57g/640x380" alt="Title">
						<div class="uk-position-cover uk-overlay-xlight"></div>
						<div class="uk-position-small uk-position-top-left">
							<span class="uk-label uk-text-bold uk-text-price">$30.00</span>
						</div>
						<div class="uk-position-small uk-position-top-right">
							<a href="#" class="uk-icon-button uk-like uk-position-z-index uk-position-relative" data-uk-icon="heart"></a>
						</div>
					</div>
					<div class="uk-card-body">
						<h3 class="uk-card-title uk-margin-small-bottom">Title</h3>
						<div class="uk-text-muted uk-text-small">Category</div>
						<div class="uk-text-muted uk-text-small uk-rating uk-margin-small-top">
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span data-uk-icon="icon: star; ratio: 0.75"></span>
							<span data-uk-icon="icon: star; ratio: 0.75"></span>
							<span data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-margin-small-left uk-text-bold">3.10</span>
							<span>(1,345)</span>
						</div>
					</div>
					<a href="course.html" class="uk-position-cover"></a>
				</div>
			</div>
			<div>
				<div class="uk-card uk-card-small uk-card-default uk-card-hover uk-border-rounded-large uk-overflow-hidden">
					<div class="uk-card-media-top uk-inline uk-light">
						<img src="https://source.unsplash.com/Hcfwew744z4/640x380" alt="Title">
						<div class="uk-position-cover uk-overlay-xlight"></div>
						<div class="uk-position-small uk-position-top-left">
							<span class="uk-label uk-text-bold uk-text-price">$45.00</span>
						</div>
						<div class="uk-position-small uk-position-top-right">
							<a href="#" class="uk-icon-button uk-like uk-position-z-index uk-position-relative" data-uk-icon="heart"></a>
						</div>
					</div>
					<div class="uk-card-body">
						<h3 class="uk-card-title uk-margin-small-bottom">Title</h3>
						<div class="uk-text-muted uk-text-small">Category</div>
						<div class="uk-text-muted uk-text-small uk-rating uk-margin-small-top">
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-rating-filled" data-uk-icon="icon: star; ratio: 0.75"></span>
							<span data-uk-icon="icon: star; ratio: 0.75"></span>
							<span class="tm-margin-small-left uk-text-bold">2.75</span>
							<span>(5,333)</span>
						</div>
					</div>
					<a href="course.html" class="uk-position-cover"></a>
				</div>
			</div>
		</div>
	</div>
</div>

.tm-rating-filled svg polygon {
	fill: #d1d1d1;
}

<!-- JS -->