Portfolio Components in Cronos library

Portfolio from Cronos

<section class="section py-32-desktop">
  <div class="container is-relative">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop">
        <div class="is-relative">
          <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" style="margin-left: -80px; margin-top: -80px;" src="cronos-assets/elements/light-warning-dark-warning.svg" alt="">
          <img class="image is-fullwidth is-cover" style="height: 292px;" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="">
        </div>
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="is-relative">
          <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0" style="margin-right: -80px; z-index: 1;" src="cronos-assets/elements/warning-light-small.svg" alt="">
          <img class="image is-fullwidth is-cover" style="height: 292px;" src="https://images.unsplash.com/photo-1467007849282-42dad96c2312?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=755&amp;q=80" alt="">
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="is-relative">
          <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0" style="margin-left: -80px; z-index: 1;" src="cronos-assets/elements/green-light-left.svg" alt="">
          <img class="image is-fullwidth is-cover" style="height: 292px;" src="https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <img class="image is-fullwidth is-cover" style="height: 292px;" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="is-relative">
          <img class="is-absolute is-block-desktop is-hidden-touch is-right-0 is-bottom-0" style="margin-right: -80px; z-index: 1;" src="cronos-assets/elements/light-green-small.svg" alt="">
          <img class="image is-fullwidth is-cover" style="height: 292px;" src="https://images.unsplash.com/photo-1598826859769-e62543ab62b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Portfolio from Cronos

Tailwind CSS

Cronos

<section class="py-32">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block top-0 left-0 -ml-20 -mt-20" src="cronos-assets/elements/light-warning-dark-warning.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block top-0 right-0 -mr-20 z-10" src="cronos-assets/elements/warning-light-small.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1467007849282-42dad96c2312?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=755&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block bottom-0 left-0 -ml-20 z-10" src="cronos-assets/elements/green-light-left.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <img class="absolute hidden lg:block right-0 bottom-0 -mr-20 z-10" src="cronos-assets/elements/light-green-small.svg" alt="">
                    <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1598826859769-e62543ab62b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

Portfolio from Cronos

Bootstrap

Cronos

<section class="py-20 pt-lg-32">
  <div class="container position-relative">
    <div class="row mb-n4">
      <div class="col-12 col-lg-6 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/light-warning-dark-warning.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-6 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute top-0 start-100 translate-middle-x" src="cronos-assets/elements/warning-light-small.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1467007849282-42dad96c2312?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=755&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-4 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute bottom-0 start-0 translate-middle-x" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-4 p-4"><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
      <div class="col-12 col-lg-4 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute bottom-0 start-100 translate-middle-x" src="cronos-assets/elements/light-green-small.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1598826859769-e62543ab62b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/></div>
      </div>
    </div>
  </div>
</section>

Portfolio Components by Shuffle

Choose from 21 variations of Portfolio UI components. Presented here are variants available in Cronos library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Portfolio UI components, code and our visual editor. Try the demo for free!

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Portfolio Components in Cronos library

Framework

UI Library

Components

Portfolio from Cronos

Your next website starts here

Portfolio from Cronos

Portfolio from Cronos

Portfolio Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Portfolio Components in Cronos library

Framework

UI Library

Components

Portfolio from Cronos

Your next website starts here

Portfolio from Cronos

Portfolio from Cronos

Portfolio Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company