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

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="columns is-vcentered is-multiline">
      <div class="column is-12 is-7-desktop mb-10 mb-0-desktop">
        <div>
          <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 class="column is-12 is-5-desktop">
        <img class="mx-auto is-block image" style="max-height: 556px;" src="cronos-assets/images/phones-two.png" 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 #1382

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-6-desktop mb-8 mb-0-desktop">
        <div class="has-mw-md-desktop">
          <span class="tag is-warning is-light">Lorem ipsum</span>
          <h3 class="my-6 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <a class="button is-primary" href="#">Get in Touch</a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop">
        <div class="p-12 has-background-light">
          <div class="mb-8 is-flex">
            <span class="mr-6 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 has-text-weight-bold has-background-warning" style="width: 64px; height: 64px;">1</span>
            <div>
              <h6 class="mb-3 title is-size-4 is-spaced">Lorem ipsum dolor</h6>
              <p class="subtitle">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
          </div>
          <div class="mb-8 is-flex">
            <span class="mr-6 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 has-text-weight-bold has-background-warning" style="width: 64px; height: 64px;">2</span>
            <div>
              <h6 class="mb-3 title is-size-4 is-spaced">Lorem ipsum dolor</h6>

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

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="mb-16 columns is-multiline is-vcentered">
      <div class="column is-12 is-5-desktop">
        <div>
          <span class="tag is-warning is-light">New feature</span>
          <h6 class="my-4 title is-size-4 is-spaced">Lorem ipsum dolor sit amet</h6>
          <span class="is-size-7">10 jun 2021 19:40</span>
          <p class="subtitle my-4">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 class="column is-12 is-7-desktop mb-4 mb-0-desktop">
        <img class="image is-fullwidth is-cover" style="max-height: 357px;" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=753&amp;q=80" alt="">
      </div>
    </div>
    <div class="mb-16 is-vcentered columns is-multiline">
      <div class="column is-12 is-7-desktop mb-4 mb-0-desktop">
        <img class="image is-fullwidth is-cover" style="max-height: 357px;" 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="">

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

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="pb-20 columns is-multiline is-justify-content-space-between">
      <div class="column is-6-tablet is-2-desktop mb-8 mb-0-desktop">
        <p class="mb-6 has-text-weight-bold">Product</p>
        <ul>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">Careers</a></li>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">About Us</a></li>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">Insights</a></li>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">PCI Compliance</a></li>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">Interfratlons</a></li>
          <li><a class="has-text-grey-dark is-size-6" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="column is-6-tablet is-2-desktop mb-8 mb-0-desktop">
        <p class="mb-6 has-text-weight-bold">For Developers</p>
        <ul>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">Docs</a></li>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">Knowledge Base</a></li>
          <li class="mb-3"><a class="has-text-grey-dark is-size-6" href="#">System Status</a></li>
          <li><a class="has-text-grey-dark is-size-6" href="#">Security</a></li>
        </ul>
      </div>
      <div class="column is-6-tablet is-2-desktop mb-8 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 #1385

Bulma

Cronos

<section class="section is-relative">
  <div class="mb-10 is-flex is-hidden-widescreen">
    <img class="image is-fullwidth" style="width: 160px;" src="cronos-assets/elements/left-top.svg" alt="">
  </div>
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0 image" src="cronos-assets/elements/left-top.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0 image" src="cronos-assets/elements/right-top.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0 image" src="cronos-assets/elements/left-bottom.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0 image" src="cronos-assets/elements/right-bottom.svg" alt="">
  <div class="container">
    <div class="has-mw-md mx-auto has-text-centered">
      <div class="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 #1386

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-3xl mx-auto mb-12 mb-20-tablet has-text-centered">
      <div class="mb-4 is-flex is-justify-content-center 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>
      <div class="has-mw-2xl mx-auto">
        <h3 class="mb-6 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
      </div>
      <div class="is-flex is-justify-content-center 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="">
        </div>
        <div class="has-text-left">
          <h6 class="is-size-5 has-text-weight-bold">Danny Bailey</h6>
          <h6 class="is-size-5 mb-0 has-text-weight-normal">February 26, 2021</h6>

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

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="mb-16 columns is-multiline is-vcentered">
      <div class="column is-12 is-5-desktop">
        <div>
          <span class="tag is-warning is-light">New feature</span>
          <h6 class="my-4 title is-size-4 is-spaced">Lorem ipsum dolor sit amet</h6>
          <span class="is-size-7">10 jun 2021 19:40</span>
          <p class="subtitle my-4">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 class="column is-12 is-7-desktop mb-4 mb-0-desktop">
        <img class="image is-fullwidth is-cover" style="max-height: 357px;" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=753&amp;q=80" alt="">
      </div>
    </div>
    <div class="mb-16 columns is-multiline is-vcentered">
      <div class="column is-12 is-7-desktop mb-4 mb-0-desktop">
        <img class="image is-fullwidth is-cover" style="max-height: 357px;" 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-5-desktop">
        <div>
          <span class="tag is-warning is-light">New feature</span>
          <h6 class="my-4 title is-size-4 is-spaced">Lorem ipsum dolor sit amet</h6>

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

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-5-desktop mb-10 mb-0-desktop">
        <img class="mr-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 #1389

Bulma

Cronos

<section class="section is-clipped">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-12 has-text-centered">
      <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="has-mw-xl mx-auto mb-8 mb-16-desktop buttons">
      <button class="button is-ghost px-8 pb-5 has-text-weight-bold" style="border-bottom: 2px solid #65B996;">Casual</button>
      <button class="button is-ghost px-8 pb-5 has-text-grey-dark">Pure Nature</button>
      <button class="button is-ghost px-8 pb-5 has-text-grey-dark">Startup</button>
      <button class="button is-ghost px-8 pb-5 has-text-grey-dark">Architecture</button>
    </div>
    <div class="mb-10 mb-16-desktop columns is-multiline">
      <div class="column is-12 is-6-desktop">
        <div class="mb-n4 columns is-multiline">
          <div class="column is-12 is-6-desktop">
            <img class="image is-fullwidth is-cover" style="height: 255px;" 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 class="column is-12 is-6-desktop">
            <img class="image is-fullwidth is-cover" style="height: 255px;" src="https://images.unsplash.com/photo-1576073462278-61bf2e5cf599?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=626&amp;q=80" alt="">
          </div>
          <div class="column is-12">
            <div class="is-relative">
              <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0" style="margin-bottom: -80px; margin-left: -80px; z-index: 1;" src="cronos-assets/elements/dark-green-dark-warning.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 #1390

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-grey.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-grey.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-grey.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-grey.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-grey.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-grey.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 #1391

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/green-group-square.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/green-squares-big-green.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

Bulma Component #1392

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="py-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 #1393

Bulma

Cronos

<nav class="navbar has-background-white py-5 is-relative">
  <div class="container">
    <div class="navbar-brand d-flex is-justify-content-space-between">
      <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-start"><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>
      <div class="navbar-end is-flex-desktop is-align-items-center is-hidden-touch" action="">
        <input class="input" type="search" placeholder="Search" aria-label="Search">
        <button class="button py-0 is-warning" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </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 #1394

Bulma

Cronos

<section class="section has-background-primary is-clipped">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <span class="tag is-success is-light">New feature</span>
      <h2 class="has-text-white 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 has-text-light 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-warning" 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/warning-small-big-green.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

Bulma Component #1395

Bulma

Cronos

<section class="section is-relative">
  <div class="mb-10 is-flex is-hidden-widescreen">
    <img class="image is-fullwidth" style="width: 160px;" src="cronos-assets/elements/left-top.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.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0" src="cronos-assets/elements/right-top.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-left-0" src="cronos-assets/elements/left-bottom.svg" alt="">
  <img class="is-absolute is-block-desktop is-hidden-touch is-bottom-0 is-right-0" src="cronos-assets/elements/right-bottom.svg" alt="">
  <div class="container">
    <div class="has-mw-md mx-auto has-text-centered">
      <div class="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 #1396

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: 70px; margin-left: -40px; margin-top: -35px;" src="cronos-assets/elements/left-squares2.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: 70px; margin-bottom: -35px; margin-right: -40px;" src="cronos-assets/elements/right-squares2.svg" alt="">
    <div class="py-10 columns is-multiline has-background-primary">
      <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>

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

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="mb-5 columns is-multiline">
      <div class="column is-12 is-6-desktop mb-8">
        <div class="p-6 has-background-light">
          <div class="mb-4">
            <img class="image is-fullwidth is-cover" style="height: 277px;" src="https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="">
          </div>
          <span class="is-size-7">10 jun 2021 19:40</span>
          <h3 class="my-4 title is-size-4 is-spaced">Lorem ipsum dolor sit amet consectutar</h3>
          <p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</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 class="column is-12 is-6-desktop mb-8">
        <div class="p-6 has-background-light">
          <div class="mb-4">
            <img class="image is-fullwidth is-cover" style="height: 277px;" src="https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&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 #1398

Bulma

Cronos

<nav class="navbar has-background-white py-5 is-relative">
  <div class="container">
    <div class="navbar-brand d-flex is-justify-content-space-between">
      <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-start"><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>
      <div class="navbar-end buttons is-hidden-touch">
        <div class="navbar-item px-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 #1399

Bulma

Cronos

<section class="section is-relative is-clipped has-background-success-light">
  <div class="container">
    <div class="mb-6 mb-0-desktop columns is-multiline is-vcentered">
      <div class="column is-12 is-5-widescreen is-6-desktop mb-12 mb-0-desktop">
        <h2 class="mb-6 title is-size-2 is-spaced">Lorem Ipsum dolor sit amet</h2>
        <p class="subtitle mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="mb-8 is-flex is-align-items-center">
          <svg class="mr-4" 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>
          <div>
            <p class="mb-0">Change of access</p>
          </div>
        </div>
        <div class="mb-8 is-flex is-align-items-center">
          <svg class="mr-4" 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>
          </svg>
          <div>
            <p class="mb-0">Security in savings</p>
          </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 #1400

Bulma

Cronos

<section class="section is-clipped">
  <div class="container">
    <div class="px-24 pt-14 pb-8 is-relative has-background-light">
      <img class="is-absolute is-block-mobile is-hidden-touch is-top-0 is-left-0" style="margin-left: -44px; margin-top: -44px;" src="cronos-assets/elements/left-squares.svg" alt="">
      <img class="is-absolute is-block-mobile is-hidden-touch is-bottom-0 is-right-0" style="margin-right: -44px; margin-bottom: -44px;" src="cronos-assets/elements/right-squares.svg" alt="">
      <h6 class="mb-6 is-size-4 has-text-centered">Trusted by brands all over the world</h6>
      <div class="is-vcentered columns is-multiline">
        <div class="column is-3-desktop is-6-tablet">
          <div class="py-8 py-14-desktop">
            <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/slack-color.svg" alt="">
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet">
          <div class="py-8 py-14-desktop">
            <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/dropbox-color.svg" alt="">
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet">
          <div class="py-8 py-14-desktop">
            <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/spotify-color.svg" alt="">
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet">
          <div class="py-8 py-14-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

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

Get the code for 13,400+ components

Bulma Component #1382

Get the code for 13,400+ components

Bulma Component #1383

Get the code for 13,400+ components

Bulma Component #1384

Get the code for 13,400+ components

Bulma Component #1385

Get the code for 13,400+ components

Bulma Component #1386

Get the code for 13,400+ components

Bulma Component #1387

Get the code for 13,400+ components

Bulma Component #1388

Get the code for 13,400+ components

Bulma Component #1389

Get the code for 13,400+ components

Bulma Component #1390

Get the code for 13,400+ components

Bulma Component #1391

Get the code for 13,400+ components

Bulma Component #1392

Get the code for 13,400+ components

Bulma Component #1393

Get the code for 13,400+ components

Bulma Component #1394

Get the code for 13,400+ components

Bulma Component #1395

Get the code for 13,400+ components

Bulma Component #1396

Get the code for 13,400+ components

Bulma Component #1397

Get the code for 13,400+ components

Bulma Component #1398

Get the code for 13,400+ components

Bulma Component #1399

Get the code for 13,400+ components

Bulma Component #1400

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