Buy now
Portfolio components
Components that are related to the portfolio section of the website.
Around component
Make sure to link to Shuffle plugin js file in your document for masonry grid and filtering to work: vendor/shuffle/dist/shuffle.min.js . Use this page as a reference.
Basic card
<!-- Basic portfolio card -->
<a href="#" class="card card-hover border-0 box-shadow">
<img src="path-to-image" class="card-img-top" alt="Portfolio thumb"/>
<div class="card-body text-center">
<h3 class="h5 nav-heading mb-2">Mobile App Icon Design</h3>
<p class="font-size-sm text-muted mb-2">Mobile App Design</p>
</div>
</a>// Basic portfolio card
a(href="#").card.card-hover.border-0.box-shadow
+image("path-to-image", "Portfolio thumb").card-img-top
.card-body.text-center
h3.h5.nav-heading.mb-2 Mobile App Icon Design
p.font-size-sm.text-muted.mb-2 Mobile App Design
Hover effect: Flip
<!-- Flip hover effect -->
<div class="card card-flip">
<div class="card-flip-inner">
<div class="card-flip-front">
<img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
</div>
<a class="card-flip-back" href="#">
<div class="card-body">
<div class="card-body-inner">
<h3 class="h5 card-title mb-2">Smart Toothbrush</h3>
<p class="font-size-sm text-muted">in Product Design</p>
<span class="btn btn-primary btn-sm">View project</span>
</div>
</div>
</a>
</div>
</div>// Flip hover effect
.card.card-flip
.card-flip-inner
.card-flip-front
+image("path-to-image", "Portfolio thumb").card-img
a(href="#").card-flip-back
.card-body
.card-body-inner
h3.h5.card-title.mb-2 Smart Toothbrush
p.font-size-sm.text-muted in Product Design
span.btn.btn-primary.btn-sm View project
Hover effect: Slide up
<!-- Slide up hover effect -->
<div class="card card-curved-body box-shadow card-slide">
<div class="card-slide-inner">
<img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
<a class="card-body text-center" href="#">
<h3 class="h5 nav-heading mt-1 mb-2">Cosmetics Packaging</h3>
<p class="font-size-sm text-muted mb-1">in Package Design</p>
</a>
</div>
</div>// Slide up hover effect
.card.card-curved-body.box-shadow.card-slide
.card-slide-inner
+image("path-to-image", "Portfolio thumb").card-img
a(href="#").card-body.text-center
h3.h5.nav-heading.mt-1.mb-2 Cosmetics Packaging
p.font-size-sm.text-muted.mb-1 in Package Design
Masonry grid with filters
<!-- Masonry grid with filters -->
<div class="cs-masonry-filterable">
<!-- Filters -->
<ul class="cs-masonry-filters nav nav-tabs justify-content-center pb-4">
<li class="nav-item">
<a class="nav-link active" href="#" data-group="all">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-group="branding">Branding</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-group="stationery">Stationery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-group="packaging">Packaging</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-group="3d">3D modelling</a>
</li>
</ul>
<!-- Grid -->
<div class="cs-masonry-grid" data-columns="3">
<!-- Item -->
<div class="cs-grid-item" data-groups='["packaging"]'>
<div class="card card-flip">
<div class="card-flip-inner">
<div class="card-flip-front">
<img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
</div>
<a class="card-flip-back" href="#">
<div class="card-body">
<div class="card-body-inner">
<h3 class="h5 card-title mb-2">Hand Cream Bottle</h3>
<p class="font-size-sm text-muted">in Package Design</p>
<span class="btn btn-primary btn-sm">View project</span>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Item -->
<div class="cs-grid-item" data-groups='["3d"]'>
<div class="card card-flip">
<div class="card-flip-inner">
<div class="card-flip-front">
<img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
</div>
<a class="card-flip-back" href="#">
<div class="card-body">
<div class="card-body-inner">
<h3 class="h5 card-title mb-2">Clay Glass Render</h3>
<p class="font-size-sm text-muted">in 3D Modelling</p>
<span class="btn btn-primary btn-sm">View project</span>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Item -->
<div class="cs-grid-item" data-groups='["stationery", "branding"]'>
<div class="card card-flip">
<div class="card-flip-inner">
<div class="card-flip-front">
<img class="card-img" src="path-to-image" alt="Portfolio thumb"/>
</div>
<a class="card-flip-back" href="#">
<div class="card-body">
<div class="card-body-inner">
<h3 class="h5 card-title mb-2">Promo Flyer Design</h3>
<p class="font-size-sm text-muted">in Stationery</p>
<span class="btn btn-primary btn-sm">View project</span>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- More items... -->
</div>
</div>// Masonry grid with filters
.cs-masonry-filterable
// Filters
ul.cs-masonry-filters.nav.nav-tabs.justify-content-center.pb-4
li.nav-item
a(href="#", data-group="all").nav-link.active
| All
li.nav-item
a(href="#", data-group="branding").nav-link
| Branding
li.nav-item
a(href="#", data-group="stationery").nav-link
| Stationery
li.nav-item
a(href="#", data-group="packaging").nav-link
| Packaging
li.nav-item
a(href="#", data-group="3d").nav-link
| 3D modelling
// Grid
.cs-masonry-grid(data-columns='3')
// Item
.cs-grid-item(data-groups='["packaging"]')
.card.card-flip
.card-flip-inner
.card-flip-front
+image("path-to-image", "Portfolio thumb").card-img
a(href="#").card-flip-back
.card-body
.card-body-inner
h3.h5.card-title.mb-2 Hand Cream Bottle
p.font-size-sm.text-muted in Package Design
span.btn.btn-primary.btn-sm View project
// Item
.cs-grid-item(data-groups='["3d"]')
.card.card-flip
.card-flip-inner
.card-flip-front
+image("path-to-image", "Portfolio thumb").card-img
a(href="#").card-flip-back
.card-body
.card-body-inner
h3.h5.card-title.mb-2 Clay Glass Render
p.font-size-sm.text-muted in 3D Modelling
span.btn.btn-primary.btn-sm View project
// Item
.cs-grid-item(data-groups='["stationery", "branding"]')
.card.card-flip
.card-flip-inner
.card-flip-front
+image("path-to-image", "Portfolio thumb").card-img
a(href="#").card-flip-back
.card-body
.card-body-inner
h3.h5.card-title.mb-2 Promo Flyer Design
p.font-size-sm.text-muted in Stationery
span.btn.btn-primary.btn-sm View project
// More items...