UIkit 3 Beautiful 4 Columns Team Section

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.3.7 in Team, update June 17, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.7/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.7/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.7/dist/js/uikit-icons.min.js"></script>
    
    <div class="uk-section uk-position-relative uk-overflow-hidden" uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    	<div class="uk-container uk-position-relative">
    		<h3>Our Team</h3>
    		<div class="uk-flex uk-flex-center" uk-grid uk-scrollspy="cls:uk-animation-fade; target: .team-member-item; delay: 300">
    			<div class="uk-width-1-2 uk-width-1-4@m uk-transition-toggle team-member-item">
    				<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" uk-img>
    					<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
    						<ul class="uk-iconnav">
    							<li><a href="#"><span uk-icon="facebook"></span></a></li>
    							<li><a href="#"><span uk-icon="twitter"></span></a></li>
    							<li><a href="#"><span uk-icon="instagram"></span></a></li>
    							<li><a href="#"><span uk-icon="linkedin"></span></a></li>
    						</ul>
    					</div>
    				</div>
    				<span class="uk-display-block uk-text-bold">Manuella Nevoresky</span>
    				<span class="uk-display-block">CEO - FOUNDER</span>
    			</div>
    			<div class="uk-width-1-2 uk-width-1-4@m uk-transition-toggle team-member-item">
    				<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/1082962/pexels-photo-1082962.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" uk-img>
    					<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
    						<ul class="uk-iconnav">
    							<li><a href="#"><span uk-icon="facebook"></span></a></li>
    							<li><a href="#"><span uk-icon="twitter"></span></a></li>
    							<li><a href="#"><span uk-icon="instagram"></span></a></li>
    							<li><a href="#"><span uk-icon="linkedin"></span></a></li>
    						</ul>
    					</div>
    				</div>
    				<span class="uk-display-block uk-text-bold">Samuel Hardy</span>
    				<span class="uk-display-block">CEO - FOUNDER</span>
    			</div>
    			<div class="uk-width-1-2 uk-width-1-4@m uk-transition-toggle team-member-item">
    				<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/532220/pexels-photo-532220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" uk-img>
    					<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
    						<ul class="uk-iconnav">
    							<li><a href="#"><span uk-icon="facebook"></span></a></li>
    							<li><a href="#"><span uk-icon="twitter"></span></a></li>
    							<li><a href="#"><span uk-icon="instagram"></span></a></li>
    							<li><a href="#"><span uk-icon="linkedin"></span></a></li>
    						</ul>
    					</div>
    				</div>
    				<span class="uk-display-block uk-text-bold">Tom Sunderland</span>
    				<span class="uk-display-block">CEO - FOUNDER</span>
    			</div>
    			<div class="uk-width-1-2 uk-width-1-4@m uk-transition-toggle team-member-item">
    				<div class="uk-background-cover uk-transition-toggle uk-margin-bottom uk-position-relative cover-image" data-src="https://images.pexels.com/photos/6980/summer-cute-hipster-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" uk-img>
    					<div class="uk-transition-fade uk-position-cover uk-overlay-primary uk-overlay-dark uk-flex uk-flex-center uk-flex-middle">
    						<ul class="uk-iconnav">
    							<li><a href="#"><span uk-icon="facebook"></span></a></li>
    							<li><a href="#"><span uk-icon="twitter"></span></a></li>
    							<li><a href="#"><span uk-icon="instagram"></span></a></li>
    							<li><a href="#"><span uk-icon="linkedin"></span></a></li>
    						</ul>
    					</div>
    				</div>
    				<span class="uk-display-block uk-text-bold">John Tarly</span>
    				<span class="uk-display-block">CEO - FOUNDER</span>
    			</div>
    		</div>
    	</div>
    </div>
  • .team-member-item {
    	max-width: 350px;
    }
    
    .team-member-item .cover-image {
    	height: 350px;
    }
    
    @media (min-width: 960px) {
    	.team-member-item:nth-child(even) {
    		margin-top: 50px;
    	}
    }
  • <!-- JS -->

LEAVE A COMMENT

Your email address will not be published. Required fields are marked *

Related Snippets