Portfolio Setup

Canvas provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

How to Use

  • Setting up Portfolio Filter:
    <div class="grid-filter-wrap">
    
    	<!-- Portfolio Filter
    	============================================= -->
    	<ul class="grid-filter" data-container="#portfolio">
    		<li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
    		<li><a href="#" data-filter=".pf-icons">Icons</a></li>
    		<li><a href="#" data-filter=".pf-illustrations">Illustrations</a></li>
    		<li><a href="#" data-filter=".pf-uielements">UI Elements</a></li>
    		<li><a href="#" data-filter=".pf-media">Media</a></li>
    		<li><a href="#" data-filter=".pf-graphics">Graphics</a></li>
    	</ul><!-- .grid-filter end -->
    
    	<div class="grid-shuffle rounded" data-container="#portfolio">
    		<i class="icon-random"></i>
    	</div>
    
    </div>
  • Setting up Portfolio Items:
    <!-- Portfolio Items
    ============================================= -->
    <div id="portfolio" class="portfolio row grid-container gutter-20" data-layout="fitRows">
    
    	<!-- Portfolio Item: Start -->
    	<article class="portfolio-item col-lg-3 col-md-4 col-sm-6 col-12 pf-media pf-icons">
    		<!-- Grid Inner: Start -->
    		<div class="grid-inner">
    			<!-- Image: Start -->
    			<div class="portfolio-image">
    				<a href="portfolio-single.html">
    					<img decoding="async" src="images/portfolio/4/1.jpg" alt="Open Imagination">
    				</a>
    				<!-- Overlay: Start -->
    				<div class="bg-overlay">
    					<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
    						<a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
    						<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-ellipsis"></i></a>
    					</div>
    					<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
    				</div>
    				<!-- Overlay: End -->
    			</div>
    			<!-- Image: End -->
    			<!-- Decription: Start -->
    			<div class="portfolio-desc">
    				<h3><a href="portfolio-single.html">Open Imagination</a></h3>
    				<span><a href="#">Media</a>, <a href="#">Icons</a></span>
    			</div>
    			<!-- Description: End -->
    		</div>
    		<!-- Grid Inner: End -->
    	</article>
    	<!-- Portfolio Item: End -->
    
    	...
    
    </div>

Last Modified: May 31, 2021