Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Portfolio components

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

Silicon component

## Grid view: Card style 1

## 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

### Scene of Sunglasses & Headphone on Human Head

NFT / Graphic Design / Art / Identity / Motion Design

    <!-- 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

Nov 18, 2021

## 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, 2021</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