Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding

Menu

Content

Components

Utilities

Buy now

Portfolio components

Components that are related to the portfolio section of the website.

Around component

Grid view style 1

<!-- Portfolio card vertical layout style 1 (Grid view) -->
<article class="card-hover zoom-effect" style="max-width: 480px;">
  <div class="zoom-effect-wrapper rounded-5">
    <div class="zoom-effect-img">
      <img src="assets/img/portfolio/grid/02.jpg" alt="Image">
    </div>
  </div>
  <div class="pt-4 mt-lg-2">
    <h2 class="h5 mb-2">
      <a href="#" class="stretched-link text-nav">Design for eco bags and merch</a>
    </h2>
    <span class="fs-sm text-muted opacity-0 d-none d-sm-block">Product design</span>
    <span class="fs-sm text-muted d-sm-none">Product design</span>
  </div>
</article>
// Portfolio card vertical layout style 1 (Grid view)
article(style="max-width: 480px;").card-hover.zoom-effect
  .zoom-effect-wrapper.rounded-5
    .zoom-effect-img
      img(src="assets/img/portfolio/grid/02.jpg", alt="Image")
  .pt-4.mt-lg-2
    h2.h5.mb-2
      a(href="#").stretched-link.text-nav
        | Design for eco bags and merch
    span.fs-sm.text-muted.opacity-0.d-none.d-sm-block Product design
    span.fs-sm.text-muted.d-sm-none Product design

Grid view style 2

<!-- Portfolio card vertical layout style 2 (Grid view) -->
<article class="zoom-effect position-relative border-bottom pb-3" style="max-width: 480px;">
  <div class="zoom-effect-wrapper">
    <div class="zoom-effect-img">
      <img src="assets/img/portfolio/grid/12.jpg" alt="Image">
    </div>
  </div>
  <div class="pt-4 mt-lg-2">
    <h2 class="h4 mb-2">
      <a href="#" class="stretched-link">The Studio</a>
    </h2>
    <div class="d-flex justify-content-between fs-lg text-muted">
      <span>Web design</span>
      <span>2021</span>
    </div>
  </div>
</article>
// Portfolio card vertical layout style 2 (Grid view)
article(style="max-width: 480px;").zoom-effect.position-relative.border-bottom.pb-3
  .zoom-effect-wrapper
    .zoom-effect-img
      img(src="assets/img/portfolio/grid/12.jpg", alt="Image")
  .pt-4.mt-lg-2
    h2.h4.mb-2
      a(href="#").stretched-link
        | The Studio
    .d-flex.justify-content-between
      span.fs-lg.text-muted Web design
      span.fs-lg.text-muted 2021

Grid view style 3

<!-- Portfolio card with flipping effect (Grid view) -->
<a href="#" class="card-flip" style="max-width: 316px;">
  <div class="card-flip-inner">
    <div class="card-flip-front" style="background-image: url(assets/img/landing/creative-agency/services/03.jpg);">
      <div class="d-flex flex-column h-100 ignore-dark-mode">
        <h2 class="fs-lg fw-normal mb-0 mt-auto">Branding</h2>
      </div>
    </div>
    <div class="card-flip-back bg-secondary">
      <div class="d-flex flex-column h-100 px-sm-2 pt-sm-2 px-lg-0 pt-lg-0 px-xl-3 pt-xl-3">
        <h3 class="h4">Branding</h3>
        <ul class="text-body ps-4 mb-3">
          <li class="mb-2">Identity design</li>
          <li class="mb-2">Brand book creation</li>
          <li class="mb-2">Colors and fonts</li>
          <li class="mb-2">Banners and covers</li>
          <li class="mb-1">Visual style</li>
        </ul>
        <div class="text-end pt-3 pt-sm-2 pt-xl-4 mt-auto me-sm-n2 me-lg-0 me-xl-n3">
          <div class="btn btn-sm btn-icon btn-outline-primary rounded-circle">
            <i class="ai-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>
// Portfolio card with flipping effect (Grid view)
a(href="#", style="max-width: 316px;").card-flip
  .card-flip-inner
    .card-flip-front(style="background-image: url(assets/img/landing/creative-agency/services/03.jpg);")
      .d-flex.flex-column.h-100.ignore-dark-mode
        h2.fs-lg.fw-normal.mb-0.mt-auto Branding
    .card-flip-back.bg-secondary
      .d-flex.flex-column.h-100.px-sm-2.pt-sm-2.px-lg-0.pt-lg-0.px-xl-3.pt-xl-3
        h3.h4 Branding
        ul.text-body.ps-4.mb-3
          li.mb-2 Identity design
          li.mb-2 Brand book creation
          li.mb-2 Colors and fonts
          li.mb-2 Banners and covers
          li.mb-1 Visual style
        .text-end.pt-3.pt-sm-2.pt-xl-4.mt-auto.me-sm-n2.me-lg-0.me-xl-n3
          .btn.btn-sm.btn-icon.btn-outline-primary.rounded-circle
            i.ai-arrow-right

List view style 1

Image
Identity, Packaging

Bottle for French perfume brand

Egestas ultrices condimentum consectetur massa aliquam volutpat pulvinar aliquet nisi quam. Nibh commodo tristique nisi, justo, sed maecenas lectus ut nec eu.

Read more
Image
E-book, Branding

Book cover design Twin Fish

Sed feugiat tristique enim aenean netus cum adipiscing est sem eget nulla leo vestibulum. Cras urna, proin ut ut dictum risus porttitor nulla consequat et iaculis.

Read more
<!-- Portfolio card horizontal layout style 1 (List view). Ideally should be placed inside .container -->

<!-- Image on the left -->
<article class="row align-items-center card-hover pb-5 mb-md-2 mb-lg-3 mb-xl-4" data-aos="fade-up" data-aos-duration="600" data-aos-offset="280">
  <div class="col-md-7 offset-xxl-1 mb-4 mb-md-0">
    <a href="#">
      <img src="assets/img/portfolio/list/03.jpg" class="rounded-5" width="700" alt="Image">
    </a>
  </div>
  <div class="col-md-5 col-xl-4" data-aos="fade-up" data-aos-duration="850" data-aos-offset="180" data-disable-parallax-down="md">
    <div class="ms-md-4 ms-lg-5 ms-xxl-0" style="max-width: 330px;">
      <div class="text-muted mb-2">Identity, Packaging</div>
      <h2 class="mb-lg-4">
        <a href="#">Bottle for French perfume brand</a>
      </h2>
      <p class="mb-0 mb-md-1 mb-lg-3">Egestas ultrices condimentum consectetur massa aliquam volutpat pulvinar aliquet nisi quam. Nibh commodo tristique nisi, justo, sed maecenas lectus ut nec eu.</p>
      <a href="#" class="btn btn-lg btn-link px-0 opacity-0 d-none d-md-inline-flex">
        Read more
        <i class="ai-arrow-right ms-2"></i>
      </a>
    </div>
  </div>
</article>

<!-- Image on the right -->
<article class="row align-items-center card-hover pb-5 mb-md-2 mb-lg-3 mb-xl-4" data-aos="fade-up" data-aos-duration="600" data-aos-offset="280">
  <div class="col-md-7 order-md-2 mb-4 mb-md-0">
    <a href="#">
      <img src="assets/img/portfolio/list/04.jpg" class="rounded-5" width="700" alt="Image">
    </a>
  </div>
  <div class="col-md-5 col-xl-4 offset-xxl-1 order-md-1" data-aos="fade-up" data-aos-duration="850" data-aos-offset="180" data-disable-parallax-down="md">
    <div class="me-md-4 me-lg-5 me-xxl-0" style="max-width: 330px;">
      <div class="text-muted mb-2">E-book, Branding</div>
      <h2 class="mb-lg-4">
        <a href="#">Book cover design Twin Fish</a>
      </h2>
      <p class="mb-0 mb-md-1 mb-lg-3">Sed feugiat tristique enim aenean netus cum adipiscing est sem eget nulla leo vestibulum. Cras urna, proin ut ut dictum risus porttitor nulla consequat et iaculis.</p>
      <a href="#" class="btn btn-lg btn-link px-0 opacity-0 d-none d-md-inline-flex">
        Read more
        <i class="ai-arrow-right ms-2"></i>
      </a>
    </div>
  </div>
</article>
// Portfolio card horizontal layout style 1 (List view). Ideally should be placed inside .container

// Image on the left
article(data-aos="fade-up", data-aos-duration="600", data-aos-offset="280").row.align-items-center.card-hover.pb-5.mb-md-2.mb-lg-3.mb-xl-4
  .col-md-7.offset-xxl-1.mb-4.mb-md-0
    a(href="#")
      img(src="assets/img/portfolio/list/03.jpg", width="700", alt="Image").rounded-5
  .col-md-5.col-xl-4(data-aos="fade-up", data-aos-duration="850", data-aos-offset="180", data-disable-parallax-down="md")
    .ms-md-4.ms-lg-5.ms-xxl-0(style="max-width: 330px;")
      .text-muted.mb-2 Identity, Packaging
      h2.mb-lg-4
        a(href="#") Bottle for French perfume brand
      p.mb-0.mb-md-1.mb-lg-3
        | Egestas ultrices condimentum consectetur massa aliquam volutpat pulvinar aliquet nisi quam. Nibh commodo tristique nisi, justo, sed maecenas lectus ut nec eu.
      a(href="#").btn.btn-lg.btn-link.px-0.opacity-0.d-none.d-md-inline-flex
        | Read more
        i.ai-arrow-right.ms-2

// Image on the right
article(data-aos="fade-up", data-aos-duration="600", data-aos-offset="280").row.align-items-center.card-hover.pb-5.mb-md-2.mb-lg-3.mb-xl-4
  .col-md-7.order-md-2.mb-4.mb-md-0
    a(href="#")
      img(src="assets/img/portfolio/list/04.jpg", width="700", alt="Image").rounded-5
  .col-md-5.col-xl-4.offset-xxl-1.order-md-1(data-aos="fade-up", data-aos-duration="850", data-aos-offset="180", data-disable-parallax-down="md")
    .me-md-4.me-lg-5.me-xxl-0(style="max-width: 330px;")
      .text-muted.mb-2 E-book, Branding
      h2.mb-lg-4
        a(href="#") Book cover design Twin Fish
      p.mb-0.mb-md-1.mb-lg-3
        | Sed feugiat tristique enim aenean netus cum adipiscing est sem eget nulla leo vestibulum. Cras urna, proin ut ut dictum risus porttitor nulla consequat et iaculis.
      a(href="#").btn.btn-lg.btn-link.px-0.opacity-0.d-none.d-md-inline-flex
        | Read more
        i.ai-arrow-right.ms-2

List view style 2

ChampionChampion

Development of a fintech application

Morbi et massa fames ac scelerisque sit commodo dignissim faucibus vel quisque proin lectus. Morbi et massa fames ac scelerisque.

Read the full story
Awards:
Vue.jsVue.jsDeloitteDeloitte
<!-- Portfolio card horizontal layout style 2 (List view). Ideally should be placed inside .container -->
<div class="row align-items-center pt-xl-2 pb-5 mb-lg-2 mb-xl-3 mb-xxl-4">
  <div class="col-md-7 col-lg-6 mb-4 mb-md-0">
    <a href="#" class="d-block position-relative">
      <div class="bg-info rounded-5 position-absolute top-0 start-0 w-100 h-100" data-aos="zoom-in" data-aos-duration="600" data-aos-offset="250"></div>
      <img src="assets/img/portfolio/list/06.png" class="d-block position-relative zindex-2 mx-auto" width="636" alt="Image" data-aos="fade-in" data-aos-duration="400" data-aos-offset="250">
    </a>
  </div>
  <div class="col-md-5 col-xl-4 offset-lg-1" data-aos="fade-up" data-aos-duration="400" data-aos-offset="170">
    <div class="ps-md-3 ps-lg-0">
      <img src="assets/img/portfolio/brands/champion-blue-dark.svg" class="d-block d-dark-mode-none mb-2 mb-lg-3" alt="Champion">
      <img src="assets/img/portfolio/brands/champion-blue-light.svg" class="d-none d-dark-mode-block mb-2 mb-lg-3" alt="Champion">
      <h2 class="h4">Development of a fintech application</h2>
      <p class="fs-sm pb-3 pb-lg-4 mb-3">Morbi et massa fames ac scelerisque sit commodo dignissim faucibus vel quisque proin lectus. Morbi et massa fames ac scelerisque sit commodo dignissim.</p>
      <a href="#" class="btn btn-sm btn-outline-dark rounded-pill">Read the full story</a>
      <div class="d-flex align-items-center pt-2 pt-lg-3 mt-3">
        <h6 class="text-body mb-0 me-3">Awards:</h6>
        <img src="assets/img/portfolio/brands/vuejs-dark.svg" class="d-block d-dark-mode-none me-4" width="90" alt="Vue.js">
        <img src="assets/img/portfolio/brands/vuejs-light.svg" class="d-none d-dark-mode-block me-4" width="90" alt="Vue.js">
        <img src="assets/img/portfolio/brands/deloitte-dark.svg" class="d-block d-dark-mode-none" width="95" alt="Deloitte">
        <img src="assets/img/portfolio/brands/deloitte-light.svg" class="d-none d-dark-mode-block" width="95" alt="Deloitte">
      </div>
    </div>
  </div>
</div>
// Portfolio card horizontal layout style 2 (List view). Ideally should be placed inside .container
.row.align-items-center.pt-xl-2.pb-5.mb-lg-2.mb-xl-3.mb-xxl-4
  .col-md-7.col-lg-6.mb-4.mb-md-0
    a(href="#").d-block.position-relative
      .bg-info.rounded-5.position-absolute.top-0.start-0.w-100.h-100(data-aos="zoom-in", data-aos-duration="600", data-aos-offset="250")
      img(src="assets/img/portfolio/list/06.png", width="636", alt="Image", data-aos="fade-in", data-aos-duration="400", data-aos-offset="250").d-block.position-relative.zindex-2.mx-auto
  .col-md-5.col-xl-4.offset-lg-1(data-aos="fade-up", data-aos-duration="400", data-aos-offset="170")
    .ps-md-3.ps-lg-0
      img(src="assets/img/portfolio/brands/champion-blue-dark.svg", alt="Champion").d-block.d-dark-mode-none.mb-2.mb-lg-3
      img(src="assets/img/portfolio/brands/champion-blue-light.svg", alt="Champion").d-none.d-dark-mode-block.mb-2.mb-lg-3
      h2.h4 Development of a fintech application
      p.fs-sm.pb-3.pb-lg-4.mb-3
        | Morbi et massa fames ac scelerisque sit commodo dignissim faucibus vel quisque proin lectus. Morbi et massa fames ac scelerisque sit commodo dignissim.
      a(href="#").btn.btn-sm.btn-outline-dark.rounded-pill
        | Read the full story
      .d-flex.align-items-center.pt-2.pt-lg-3.mt-3
        h6.text-body.mb-0.me-3 Awards:
        img(src="assets/img/portfolio/brands/vuejs-dark.svg", width="90", alt="Vue.js").d-block.d-dark-mode-none.me-4
        img(src="assets/img/portfolio/brands/vuejs-light.svg", width="90", alt="Vue.js").d-none.d-dark-mode-block.me-4
        img(src="assets/img/portfolio/brands/deloitte-dark.svg", width="95", alt="Deloitte").d-block.d-dark-mode-none
        img(src="assets/img/portfolio/brands/deloitte-light.svg", width="95", alt="Deloitte").d-none.d-dark-mode-block