Bulma Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bulma Component #1361

Bulma

Cronos

<section class="section is-relative has-background-light">
  <div class="mb-10 is-flex is-hidden-widescreen">
    <img class="image is-fullwidth" style="width: 160px;" src="cronos-assets/elements/left-top-corner.svg" alt="">
  </div>
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" src="cronos-assets/elements/left-top-corner.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0" src="cronos-assets/elements/right-top-corner.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0" src="cronos-assets/elements/left-bottom-corner.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="cronos-assets/elements/right-bottom-corner.svg" alt="">
  <div class="container">
    <div class="has-mw-xl mx-auto has-text-centered">
      <div class="px-6 px-12-desktop py-12 has-background-white has-text-centered">
        <form action="#">
          <span class="tag is-warning is-light is-uppercase">Sign Up</span>
          <h3 class="mt-6 mb-8 title is-size-3 is-spaced">Create new account</h3>
          <div class="control mb-6">
            <input class="input" type="email" placeholder="E-mail address">
          </div>
          <div class="control mb-6">
            <input class="input" type="password" placeholder="Password">
          </div>
          <div class="control mb-6">
            <input class="input" type="password" placeholder="Repeat password">
          </div>
          <label class="checkbox mb-5">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1362

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-2-desktop is-4-tablet">
        <div class="px-10 py-14 has-background-light">
          <img class="mx-auto is-block image" src="cronos-assets/logos/brands/slack-color.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet">
        <div class="px-10 py-14 has-background-light">
          <img class="mx-auto is-block image" src="cronos-assets/logos/brands/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet">
        <div class="px-10 py-14 has-background-light">
          <img class="mx-auto is-block image" src="cronos-assets/logos/brands/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet">
        <div class="px-10 py-14 has-background-light">
          <img class="mx-auto is-block image" src="cronos-assets/logos/brands/amazon-color.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1363

Bulma

Cronos

<nav class="navbar has-background-white py-5">
  <div class="container is-fluid">
    <div class="navbar-brand d-flex is-justify-content-space-between">
      <a class="navbar-item title is-size-4 mb-0 pl-0" href="#">
        <img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132">
      </a>
      <button class="button is-ghost is-hidden-desktop navbar-menu-open">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a>
        <div class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
      </div>
    </div>
  </div>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-sm" style="width: 75%; z-index: 9999;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-primary" style="opacity: 90%;"></div>
    <nav class="navbar is-light is-relative is-flex is-flex-direction-column px-6 py-6 has-background-white" style="width: 100%; height: 100%; overflow-y: auto">
      <div class="mb-10 is-flex is-align-items-center">
        <a class="navbar-item mr-auto title is-size-4 pl-0" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1364

Bulma

Cronos

<section class="section has-background-success-light">
  <div class="container">
    <div class="columns is-vcentered is-multiline">
      <div class="column is-12 is-5-desktop mb-10 mb-0-desktop">
        <img class="mx-auto is-block image" style="max-height: 556px;" src="cronos-assets/images/phones-two.png" alt="">
      </div>
      <div class="column is-12 is-7-desktop">
        <div class="ml-auto">
          <h2 class="mb-4 title is-size-2 is-spaced">Get our Free Mobile App</h2>
          <p class="has-mw-lg subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <div class="buttons">
            <a class="button is-ghost p-0" href="#">
              <img src="cronos-assets/buttons/app-store.svg" alt="">
            </a>
            <a class="button is-ghost p-0" href="#">
              <img src="cronos-assets/buttons/google-play.svg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1365

Bulma

Cronos

<section class="section is-clipped">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <span class="tag is-warning is-light">New feature</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Take quick action that increases your brand's regular profit.</h2>
      <p class="has-mw-2xl subtitle mx-auto mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="mb-16 buttons is-centered"><a class="button is-primary" style="position: relative;" href="#">Activate your demo</a><a class="button is-dark" href="#">Share with friends</a></div>
      <div class="is-relative" style="height: 512px;">
        <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0 image is-fullwidth" style="width: 320px; height: 320px; margin-left: -160px;" src="cronos-assets/elements/light-squares.svg" alt="">
        <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0 image is-fullwidth" style="width: 160px; height: 240px; margin-right: -160px;" src="cronos-assets/elements/warning-group-square.svg" alt="">
        <img class="is-relative image is-fullwidth is-cover" style="height: 100%;" src="https://images.unsplash.com/photo-1562071707-7249ab429b2a?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1366

Bulma

Cronos

<section class="section has-background-light">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <span class="tag is-warning is-light">Lorem ipsum</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Take quick action that increases your brand's regular profit.</h2>
      <p class="has-mw-xl subtitle mx-auto">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="mb-n4 columns is-multiline">
      <div class="column is-12 is-4-desktop">
        <div class="px-8 py-10 has-background-white has-text-centered">
          <span class="has-text-white mx-auto mb-6 is-flex has-background-primary is-size-4 is-justify-content-center is-align-items-center" style="width: 64px; height: 64px;">1</span>
          <h6 class="my-6 title is-size-4 is-spaced">Suspendisse interdum ullamcorper elit at</h6>
          <p class="subtitle">Suspendisse vel leo ac quam placerat luctus. Aliquam sit amet nisl ac urna dignissim feugiat nec in ante. Sed sit amet finibus risus, quis mollis erat.</p>
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="px-8 py-10 has-background-white has-text-centered">
          <span class="has-text-white mx-auto mb-6 is-flex has-background-primary is-size-4 is-justify-content-center is-align-items-center" style="width: 64px; height: 64px;">2</span>
          <h6 class="my-6 title is-size-4 is-spaced">Suspendisse interdum ullamcorper elit at</h6>
          <p class="subtitle">Suspendisse vel leo ac quam placerat luctus. Aliquam sit amet nisl ac urna dignissim feugiat nec in ante. Sed sit amet finibus risus, quis mollis erat.</p>
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="px-8 py-10 has-background-white has-text-centered">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1367

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-justify-content-space-between">
      <div class="column is-12 is-4-desktop mb-8 mb-0-desktop">
        <a class="navbar-item pl-0 is-block title is-size-4" href="#">
          <img class="mx-auto mx-0-desktop is-block" src="cronos-assets/logos/cronos-logo.svg" alt="" style="width: 132px;">
        </a>
        <p class="has-text-grey-dark is-size-6 mt-8 mb-0 is-block-desktop is-hidden-touch">All rights reserved © Cronos 2021</p>
      </div>
      <div class="column is-12 is-8-desktop">
        <ul class="mb-0 is-flex is-justify-content-center is-align-items-center">
          <li class="mb-5 mb-0-desktop mr-6 mr-12-desktop"><a class="is-size-6 has-text-weight-bold has-text-grey-dark" href="#">About</a></li>
          <li class="mb-5 mb-0-desktop mr-6 mr-12-desktop"><a class="is-size-6 has-text-weight-bold has-text-grey-dark" href="#">Company</a></li>
          <li class="mb-5 mb-0-desktop mr-6 mr-12-desktop"><a class="is-size-6 has-text-weight-bold has-text-grey-dark" href="#">Services</a></li>
          <li class="mb-5 mb-0-desktop mr-6 mr-12-desktop"><a class="is-size-6 has-text-weight-bold has-text-grey-dark" href="#">Testimonials</a></li>
          <li class="mb-5 mb-0-desktop"><a class="button is-primary mt-6 mt-0-tablet" href="#">Get in Touch</a></li>
        </ul>
        <p class="has-text-grey-dark is-size-7 mt-6 is-hidden-widescreen has-text-centered">All rights reserved © Cronos 2021</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1368

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-3xl mx-auto has-text-centered">
      <span class="tag is-warning is-light">Lorem ipsum</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="has-mw-xl subtitle mx-auto mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="mb-10 is-flex is-justify-content-center">
        <label class="mr-3 is-flex is-align-items-center">
          <input class="form-check-input mr-3" type="radio" name="license" value="1" checked="">
          <span class="has-text-weight-bold has-text-primary">Lifetime license</span>
          <span class="ml-3 tag is-warning">$150</span>
        </label>
        <label class="is-flex is-align-items-center">
          <input class="form-check-input mr-3" type="radio" name="license" value="2">
          <span>Monthly license</span>
          <span class="ml-3 tag is-warning">$85</span>
        </label>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12">
        <div class="is-flex is-clipped is-align-items-center has-background-light">
          <div class="mx-auto mb-5 mb-0-desktop">
            <div class="px-8 py-12 py-0-desktop has-text-centered">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1369

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <span class="tag is-warning is-light">Lorem ipsum</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="has-mw-xl subtitle mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6-tablet mb-12">
        <div class="columns is-multiline">
          <div class="column is-12 is-4-desktop mb-6 mb-0-desktop">
            <img class="image is-fullwidth" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=840&amp;q=80" alt="">
          </div>
          <div class="column is-12 is-8-desktop">
            <span class="is-size-7">10 jun 2021 19:40</span>
            <h6 class="mt-4 mb-4 title is-size-4 is-spaced">Lorem ipsum dolor sit</h6>
            <p class="subtitle is-spaced mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <a class="button is-ghost has-text-primary is-size-5 p-0 has-text-weight-bold" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="column is-6-tablet mb-12">
        <div class="columns is-multiline">
          <div class="column is-12 is-4-desktop mb-6 mb-0-desktop">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1370

Bulma

Cronos

<section class="section is-relative">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-2">
        <div class="buttons is-centered">
          <button class="button p-0 is-primary is-flex-desktop is-hidden-touch is-justify-content-center is-align-items-center" style="width: 64px; height: 64px">
            <svg class="has-text-light" style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="white"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="column is-12 is-8-desktop mx-auto">
        <div class="is-vcentered columns is-multiline">
          <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
            <h2 class="title is-size-2 is-spaced has-text-primary mb-2">Danny Bailey</h2>
            <h3 class="mb-4 is-size-3 has-text-weight-bold">CEO & Founder</h3>
            <p class="subtitle mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
            <div class="is-flex is-align-items-center">
              <a class="mr-8" href="#">
                <img src="cronos-assets/logos/brands/facebook.svg" alt="">
              </a>
              <a class="mr-8" href="#">
                <img src="cronos-assets/logos/brands/twitter.svg" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1371

Bulma

Cronos

<section class="pb-80 is-relative has-background-white">
  <img class="is-absolute is-bottom-0 is-left-0" src="cronos-assets/elements/light-warning-dark-green.svg" alt="">
  <img class="is-absolute is-bottom-0 is-right-0" src="cronos-assets/elements/light-warning-dark-green.svg" alt="" style="transform: rotate(90deg);">
  <div class="mb-5 pt-20 has-background-primary">
    <div class="container pb-5 is-relative">
      <div class="columns is-multiline">
        <div class="column is-12 is-8-desktop mx-auto mb-12 has-text-centered">
          <span class="tag is-success is-light">Lorem ipsum</span>
          <h2 class="has-text-white mt-4 mb-6 title is-size-2 is-spaced">Take quick action that increases your brand's regular profit.</h2>
          <p class="has-mw-2xl subtitle has-text-light mx-auto">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
      <div class="columns is-multiline" style="margin-bottom: -200px; box-shadow: 0px 20px 80px -16px rgba(28, 25, 23, 0.04);">
        <div class="column is-12 is-4-desktop mb-4 mb-0-desktop py-24 has-background-white">
          <div class="has-text-centered" style="height: 100%">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 10L6 6V38L18 42M18 10L30 6M18 10V42M30 6L42 10V42L30 38M30 6V38M30 38L18 42" stroke="#006251" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <h6 class="mt-3 mb-2 title is-size-5">Visit Us</h6>
            <p class="mb-1">1686, Geraldine Lane</p>
            <p>New York, NY 10013</p>
          </div>
        </div>
        <div class="column is-12 is-4-desktop mb-4 mb-0-desktop py-24 has-background-white">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1372

Bulma

Cronos

<section class="section has-background-primary">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-4-desktop mb-10 mb-0-desktop">
        <div class="has-mw-xs mx-auto px-5-tablet has-text-centered">
          <span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <h6 class="has-text-white mt-6 mb-4 is-size-4">Change of access</h6>
          <p class="subtitle has-text-light">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="column is-12 is-4-desktop mb-10 mb-0-desktop">
        <div class="has-mw-xs mx-auto px-5-tablet has-text-centered">
          <span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1373

Bulma

Cronos

<section class="section is-clipped">
  <div class="container">
    <div class="has-mw-6xl mx-auto">
      <div class="mb-10 columns is-multiline is-justify-content-space-between is-align-items-flex-end">
        <div class="column is-12 is-6-desktop mb-5 mb-0-desktop">
          <span class="tag is-warning is-light">Lorem ipsum</span>
          <h2 class="mt-6 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar</h2>
        </div>
        <div class="column is-12 is-3-desktop">
          <button class="button p-0 is-light mr-4 is-inline-flex is-justify-content-center is-align-items-center" style="width: 64px; height: 64px;">
            <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
            </svg>
          </button>
          <button class="button p-0 is-light is-inline-flex is-justify-content-center is-align-items-center" style="width: 64px; height: 64px;">
            <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.2929 13H7.5C7.22386 13 7 12.7761 7 12.5C7 12.2239 7.22386 12 7.5 12H17.2929L14.1464 8.85355C13.9512 8.65829 13.9512 8.34171 14.1464 8.14645C14.3417 7.95118 14.6583 7.95118 14.8536 8.14645L18.8536 12.1464C19.0488 12.3417 19.0488 12.6583 18.8536 12.8536L14.8536 16.8536C14.6583 17.0488 14.3417 17.0488 14.1464 16.8536C13.9512 16.6583 13.9512 16.3417 14.1464 16.1464L17.2929 13Z" fill="#1C1917"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="columns is-justify-content-center">
        <div class="column is-12 px-5 is-block-desktop is-hidden-touch">
          <img class="image is-fullwidth is-cover" style="height: 512px; opacity: 50%;" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1374

Bulma

Cronos

<section class="section is-relative has-background-light">
  <div class="mb-10 is-flex is-hidden-widescreen">
    <img class="image is-fullwidth" style="width: 160px;" src="cronos-assets/elements/left-top-corner.svg" alt="">
  </div>
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" src="cronos-assets/elements/left-top-corner.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0" src="cronos-assets/elements/right-top-corner.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0" src="cronos-assets/elements/left-bottom-corner.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="cronos-assets/elements/right-bottom-corner.svg" alt="">
  <div class="container">
    <div class="has-mw-xl mx-auto has-text-centered">
      <div class="px-6 px-12-desktop py-12 has-background-white has-text-centered">
        <form action="#">
          <span class="tag is-warning is-light is-uppercase">Sign In</span>
          <h3 class="mt-6 mb-8 title is-size-3 is-spaced">Join our community</h3>
          <div class="control mb-6">
            <input class="input" type="email" placeholder="E-mail address">
          </div>
          <div class="control mb-6">
            <input class="input" type="password" placeholder="Password">
          </div>
          <button class="button is-warning mb-6 is-fullwidth">Sign In</button>
          <a class="is-size-6 has-text-grey-dark" href="#">Forgot password?</a>
          <a class="has-text-white is-size-6 mt-6 mb-4 py-3 is-flex has-background-info is-justify-content-center is-align-items-center is-fullwidth has-text-weight-bold" href="#">
            <img class="mr-2 image" style="height: 18px;" src="cronos-assets/logos/brands/facebook-white.svg" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1375

Bulma

Cronos

<nav class="navbar has-background-white py-5">
  <div class="container is-fluid">
    <div class="navbar-brand is-flex is-justify-content-space-between">
      <a class="navbar-item title is-size-4 mb-0 pl-0" href="#">
        <img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132">
      </a>
      <button class="button is-ghost is-hidden-desktop navbar-menu-open">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
        </svg>
      </button>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <button class="button is-ghost navbar-menu-open">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-sm" style="width: 75%; z-index: 9999;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-primary" style="opacity: 90%;"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1376

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-2-desktop is-4-tablet mb-12 mb-0-desktop">
        <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/slack-color.svg" alt="">
      </div>
      <div class="column is-2-desktop is-4-tablet mb-12 mb-0-desktop">
        <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/dropbox-color.svg" alt="">
      </div>
      <div class="column is-2-desktop is-4-tablet mb-12 mb-0-desktop">
        <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/spotify-color.svg" alt="">
      </div>
      <div class="column is-2-desktop is-4-tablet mb-12 mb-0-tablet">
        <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/amazon-color.svg" alt="">
      </div>
      <div class="column is-2-desktop is-4-tablet mb-12 mb-0-tablet">
        <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/netflix-color.svg" alt="">
      </div>
      <div class="column is-2-desktop is-4-tablet">
        <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/stripe-color.svg" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1377

Bulma

Cronos

<section class="section is-relative is-clipped">
  <div class="column is-6 mt-20 is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" style="height: 490px; margin-left: -128px;">
    <img class="mt-3 mr-3 is-absolute is-top-0 is-right-0" style="width: 160px; height: 160px; z-index: 1;" src="cronos-assets/elements/green-light-left.svg" alt="">
    <img class="mb-3 ml-32 is-absolute is-bottom-0 is-left-0" style="width: 160px; height: 160px; z-index: 1;" src="cronos-assets/elements/green-light-left.svg" alt="">
    <img class="image is-fullwidth is-cover" style="height: 100%;" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1300&amp;q=80" alt="">
  </div>
  <div class="container">
    <div class="py-32-desktop is-vcentered columns is-multiline is-align-items-center">
      <div class="column is-12 is-6-desktop ml-auto mb-12 mb-0-desktop">
        <div class="mb-4 is-flex is-align-items-center">
          <a class="has-text-grey-dark has-text-weight-bold is-size-7" href="#">Home</a>
          <svg class="mx-2" width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.12038 7.17461C-0.0593306 7.38428 -0.0350499 7.69993 0.174613 7.87964C0.384276 8.05935 0.699926 8.03507 0.879637 7.8254L3.87964 4.3254C4.04013 4.13816 4.04013 3.86186 3.87964 3.67461L0.879637 0.174613C0.699926 -0.0350495 0.384276 -0.0593303 0.174613 0.120381C-0.0350496 0.300092 -0.0593303 0.615742 0.120381 0.825405L2.84147 4.00001L0.12038 7.17461Z" fill="#A8A29E"></path>
          </svg>
          <a class="has-text-grey-dark has-text-weight-bold is-size-7" href="#">Blog</a>
          <svg class="mx-2" width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.12038 7.17461C-0.0593306 7.38428 -0.0350499 7.69993 0.174613 7.87964C0.384276 8.05935 0.699926 8.03507 0.879637 7.8254L3.87964 4.3254C4.04013 4.13816 4.04013 3.86186 3.87964 3.67461L0.879637 0.174613C0.699926 -0.0350495 0.384276 -0.0593303 0.174613 0.120381C-0.0350496 0.300092 -0.0593303 0.615742 0.120381 0.825405L2.84147 4.00001L0.12038 7.17461Z" fill="#A8A29E"></path>
          </svg>
          <a class="has-text-grey-dark has-text-weight-bold is-size-7" href="#">Article</a>
        </div>
        <h3 class="has-mw-md mb-4 title is-size-3">Lorem ipsum dolor sit amet consectutar domor</h3>
        <div class="is-flex is-align-items-center">
          <div class="mr-4">
            <img class="image is-fullwidth is-rounded" style="width: 64px; height: 64px; border-radius: 50% !important;" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=547&amp;q=80" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1378

Bulma

Cronos

<section class="section is-clipped">
  <div class="container px-4 is-relative">
    <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0 image is-fullwidth" style="width: 88px; height: 88px; object-fit: contain" src="cronos-assets/elements/left-squares.svg" alt="">
    <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0 image is-fullwidth" style="width: 88px; height: 88px; margin-bottom: -44px; margin-right: -22px; object-fit: contain" src="cronos-assets/elements/right-squares.svg" alt="">
    <div class="pt-10 columns is-multiline">
      <div class="column is-12 is-4-desktop mb-10 mb-0-desktop">
        <div class="has-mw-xs mx-auto px-5-tablet has-text-centered">
          <span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <h6 class="mt-6 mb-4 is-size-4">Change of access</h6>
          <p class="subtitle">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="column is-12 is-4-desktop mb-10 mb-0-desktop">
        <div class="has-mw-xs mx-auto px-5-tablet has-text-centered">
          <span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1379

Bulma

Cronos

<section class="section is-clipped">
  <div class="container">
    <div class="has-mw-6xl mx-auto">
      <div class="mb-12 columns is-multiline is-justify-content-space-between is-align-items-flex-end">
        <div class="column is-12 is-6-desktop mb-6 mb-0-desktop">
          <span class="tag is-warning is-light">Lorem ipsum</span>
          <h2 class="mt-6 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar</h2>
        </div>
        <div class="column is-12 is-2-desktop">
          <div class="buttons is-right">
            <button class="button is-primary">About Us</button>
          </div>
        </div>
      </div>
      <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; z-index: 1;" src="cronos-assets/elements/light-warning-dark-green.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">
          <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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1380

Bulma

Cronos

<section class="section is-clipped">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <span class="tag is-warning is-light">New feature</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Take quick action that increases your brand's regular profit.</h2>
      <p class="has-mw-2xl subtitle mx-auto mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="mb-16 buttons is-centered"><a class="button is-primary" href="#">Activate your demo</a><a class="button is-dark" href="#">Share with friends</a></div>
      <div class="is-relative" style="height: 512px;">
        <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0 image is-fullwidth" style="width: 320px; height: 320px; margin-left: -160px;" src="cronos-assets/elements/big-warning-green-dark.svg" alt="">
        <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0 image is-fullwidth" style="width: 160px; height: 240px; margin-right: -160px;" src="cronos-assets/elements/warning-group-square.svg" alt="">
        <img class="image is-fullwidth is-cover" style="height: 100%" src="https://images.unsplash.com/photo-1562071707-7249ab429b2a?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

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

Framework

UI Library

Components

Bulma Component #1361

Get the code for 13,400+ components

Bulma Component #1362

Get the code for 13,400+ components

Bulma Component #1363

Get the code for 13,400+ components

Bulma Component #1364

Get the code for 13,400+ components

Bulma Component #1365

Get the code for 13,400+ components

Bulma Component #1366

Get the code for 13,400+ components

Bulma Component #1367

Get the code for 13,400+ components

Bulma Component #1368

Get the code for 13,400+ components

Bulma Component #1369

Get the code for 13,400+ components

Bulma Component #1370

Get the code for 13,400+ components

Bulma Component #1371

Get the code for 13,400+ components

Bulma Component #1372

Get the code for 13,400+ components

Bulma Component #1373

Get the code for 13,400+ components

Bulma Component #1374

Get the code for 13,400+ components

Bulma Component #1375

Get the code for 13,400+ components

Bulma Component #1376

Get the code for 13,400+ components

Bulma Component #1377

Get the code for 13,400+ components

Bulma Component #1378

Get the code for 13,400+ components

Bulma Component #1379

Get the code for 13,400+ components

Bulma Component #1380

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support