Silicon Silicon UI Kit
 Buy now

Portfolio components

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

Silicon component

Grid view: Card style 1

Image

3D Shape Illustration

3D Design / Illustration / Art 
<!-- Portfolio grid view: Card style 1 -->
<div class="card card-portfolio">
  <div class="card-img">
    <img src="assets/img/portfolio/grid/05.jpg" alt="Image">
  </div>
  <div class="card-body pb-0">
    <h2 class="h4 mb-2">
      <a href="#" class="stretched-link">3D Shape Illustration</a>
    </h2>
    <div class="card-portfolio-meta">
      <span class="text-muted">3D Design / Illustration / Art</span>
    </div>
  </div>
</div>

Grid view: Card style 2

<!-- Portfolio grid view: Card style 2 -->
<a href="#" class="card card-portfolio card-hover bg-transparent border-0">
  <div class="card-img-overlay d-flex flex-column align-items-center justify-content-center rounded-3">
    <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50 rounded-3"></span>
    <div class="position-relative zindex-2">
      <h3 class="h5 text-light mb-2">Scene of Sunglasses & Headphone on Human Head</h3>
      <span class="fs-sm text-light opacity-70">NFT / Graphic Design / Art / Identity / Motion Design</span>
    </div>
  </div>
  <div class="card-img">
    <img src="assets/img/portfolio/grid/02.jpg" class="rounded-3" alt="Image">
  </div>
</a>

List view

Image
Nov 18, 2023

SaaS Project Management Tool

Graphic Design

Malesuada eu cursus natoque purus ipsum nunc, velit cras tellus. Maecenas viverra pellentesque at ultrices purus vitae quis erat volutpat. Turpis auctor neque bibendum id pellentesque ut egestas. Donec ut faucibus nisl nec at purus. Cursus vel gravida gravida purus varius feugiat.Semper mauris id adipiscing est. Nam leo rutrum gravida curabitur at vel risus.

View more 
<!-- Portfolio list view -->
<div class="row">
  <div class="col-md-6 pb-1 mb-3 pb-md-0 mb-md-0">
    <a href="#">
      <img src="assets/img/portfolio/list/01.jpg" class="rounded-3" width="600" alt="Image">
    </a>
  </div>
  <div class="col-md-6">
    <div class="ps-md-4 ms-md-2">
      <div class="fs-sm text-muted mb-1">Nov 18, 2023</div>
      <h2 class="h3">SaaS Project Management Tool</h2>
      <a href="#" class="d-table badge bg-faded-primary text-primary fs-sm mb-3">Graphic Design</a>
      <p class="d-md-none d-lg-block pb-3 mb-2 mb-md-3">Malesuada eu cursus natoque purus ipsum nunc, velit cras tellus. Maecenas viverra pellentesque at ultrices purus vitae quis erat volutpat. Turpis auctor neque bibendum id pellentesque ut egestas. Donec ut faucibus nisl nec at purus. Cursus vel gravida gravida purus varius feugiat.Semper mauris id adipiscing est. Nam leo rutrum gravida curabitur at vel risus.</p>
      <a href="#" class="btn btn-outline-primary">View more</a>
    </div>
  </div>
</div>
Top