Around Buy now

Portfolio components

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

Around component

Basic card

<!-- Basic portfolio card -->
<a href="#" class="card card-hover border-0 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="fs-sm text-muted mb-2">Mobile App Design</p>
  </div>
</a>
// Basic portfolio card
a(href="#").card.card-hover.border-0.shadow
  img(src="path-to-image", alt"Portfolio thumb").card-img-top
  .card-body.text-center
    h3.h5.nav-heading.mb-2 Mobile App Icon Design
    p.fs-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="fs-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
      img(src="path-to-image", alt="Portfolio thumb").card-img
    a(href="#").card-flip-back
      .card-body
        .card-body-inner
          h3.h5.card-title.mb-2 Smart Toothbrush
          p.fs-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 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="fs-sm text-muted mb-1">in Package Design</p>
    </a>
  </div>
</div>
// Slide up hover effect
.card.card-curved-body.shadow.card-slide
  .card-slide-inner
    img(src="path-to-image", alt="Portfolio thumb").card-img
    a(href="#").card-body.text-center
      h3.h5.nav-heading.mt-1.mb-2 Cosmetics Packaging
      p.fs-sm.text-muted.mb-1 in Package Design

Masonry grid with filters

<!-- Masonry grid with filters -->
<div class="masonry-filterable">

  <!-- Filters -->
  <ul class="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="masonry-grid" data-columns="3">

    <!-- Item -->
    <div class="masonry-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="fs-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="masonry-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="fs-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="masonry-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="fs-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
.masonry-filterable

  // Filters
  ul.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
  .masonry-grid(data-columns='3')

    // Item
    .masonry-grid-item(data-groups='["packaging"]')
      .card.card-flip
        .card-flip-inner
          .card-flip-front
            img(src="path-to-image", alt="Portfolio thumb").card-img
          a(href="#").card-flip-back
            .card-body
              .card-body-inner
                h3.h5.card-title.mb-2 Hand Cream Bottle
                p.fs-sm.text-muted in Package Design
                span.btn.btn-primary.btn-sm View project

    // Item
    .masonry-grid-item(data-groups='["3d"]')
      .card.card-flip
        .card-flip-inner
          .card-flip-front
            img(src="path-to-image", alt="Portfolio thumb").card-img
          a(href="#").card-flip-back
            .card-body
              .card-body-inner
                h3.h5.card-title.mb-2 Clay Glass Render
                p.fs-sm.text-muted in 3D Modelling
                span.btn.btn-primary.btn-sm View project

    // Item
    .masonry-grid-item(data-groups='["stationery", "branding"]')
      .card.card-flip
        .card-flip-inner
          .card-flip-front
            img(src="path-to-image", alt="Portfolio thumb").card-img
          a(href="#").card-flip-back
            .card-body
              .card-body-inner
                h3.h5.card-title.mb-2 Promo Flyer Design
                p.fs-sm.text-muted in Stationery
                span.btn.btn-primary.btn-sm View project

    // More items...
Top