UIkit 3 Three Columns Features Section with Hover Shadow

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.5.4 in Features, update June 17, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.4/dist/js/uikit-icons.min.js"></script>
    
    <div class="uk-section">
    	<div class="uk-container">
    		<h2 class="uk-h1 uk-text-center">Features</h2>
    		<p class="uk-text-center">Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis, porttitor eget turpis. Morbi porta orci et augue sollicitudin cursus ut eget ligula vitae dolor corpe non sit tortor.</p>
    		<div class="uk-child-width-1-3@m uk-grid-match uk-text-center uk-margin-medium-top" uk-grid>
    			<div>
    				<div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline">
    					<a class="uk-position-cover" href="#"></a>
    					<span uk-icon="icon: cog; ratio: 4"></span>
    					<h3 class="uk-card-title uk-margin">Setting Options</h3>
    					<p>Lorem ipsum dolor sit amet, conse adipiscing elit. Prae eget massatar vitae.</p>
    				</div>
    			</div>
    			<div>
    				<div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline">
    					<a class="uk-position-cover" href="#"></a>
    					<span uk-icon="icon: code; ratio: 4"></span>
    					<h3 class="uk-card-title uk-margin">Social Share</h3>
    					<p>Lorem ipsum dolor sit amet, conse adipiscing elit. Prae eget massatar vitae.</p>
    				</div>
    			</div>
    			<div>
    				<div class="uk-card uk-card-default uk-box-shadow-medium uk-card-hover uk-card-body uk-inline">
    					<a class="uk-position-cover" href="#"></a>
    					<span uk-icon="icon: settings; ratio: 4"></span>
    					<h3 class="uk-card-title uk-margin">User Login</h3>
    					<p>Lorem ipsum dolor sit amet, conse adipiscing elit. Prae eget massatar vitae.</p>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

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

Related Snippets