UIkit 3 Courses and Events Card

This UIkit snippet, was created to help web designers, front-end developers and back-end developer save time. Use it in your project and build your app faster, You can also download the HTML, CSS, and JS code.

Build with UIkit 3.15.9 in Card, update December 27, 2022

  • <!-- 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 -->

LEAVE A COMMENT

Your email address will not be published.

Related Snippets