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

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="mb-12 mb-20-tablet is-relative">
      <img class="is-absolute is-block-tablet is-hidden-touch is-top-0 is-right-0" style="height: 190px; width: 190px; margin-right: -95px; z-index: 1;" src="cronos-assets/elements/warning-group-square.svg" alt="">
      <img class="is-absolute is-block-tablet is-hidden-touch is-bottom-0 is-left-0" style="height: 190px; width: 190px; margin-left: -95px; z-index: 1;" src="cronos-assets/elements/light-squares.svg" alt="">
      <img class="image is-fullwidth is-cover" 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="has-mw-2xl mx-auto mb-12 mb-16-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>
      <h3 class="mb-6 title is-size-3">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
      <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>

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

Bulma

Cronos

<section class="section">
  <div class="container">
    <h6 class="mb-8 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-14">
          <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-14">
          <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-14">
          <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-14">
          <img class="mx-auto is-block image" style="max-height: 64px;" src="cronos-assets/logos/brands/stripe-color.svg" alt="">
        </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 #1403

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <h3 class="mb-8 title is-size-3 is-spaced">When I was a developer, I often had a hundred questions when</h3>
      <p class="subtitle mb-6">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="subtitle mb-6">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </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 #1404

Bulma

Cronos

<section class="section is-relative is-clipped has-background-success-light">
  <div class="column is-6 mt-16 is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" style="height: 28rem; margin-left: -140px;">
    <img class="is-cover" src="cronos-assets/images/laptop.png" alt="" style="height: 100%">
  </div>
  <div class="container">
    <div class="mb-6 mb-0-desktop is-vcentered columns is-multiline">
      <div class="column is-12 is-5-widescreen is-6-desktop mb-12 mb-0-desktop ml-auto-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>

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

Bulma

Cronos

<nav class="navbar has-background-white py-5">
  <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-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>
      <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 #1406

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="columns is-multiline has-background-white">
      <div class="column is-4-desktop is-6-tablet py-12">
        <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-8 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-4-desktop is-6-tablet py-12">
        <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>
            </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 #1407

Bulma

Cronos

<section class="mb-48 pt-20 has-background-primary">
  <div class="pt-5">
    <div class="container px-4 pb-5 is-relative">
      <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-12 mb-32-desktop 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>
      <div class="pb-10 columns is-multiline" style="margin-bottom: -200px;">
        <div class="column is-12 is-4-desktop mb-4 mb-0-desktop px-0-desktop">
          <div class="px-8 py-20 has-background-white has-text-centered" style="height: 100%">
            <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>
            <div>
              <h3 class="mt-6 mb-4 is-size-4">Check of access</h3>
              <p class="subtitle">Take care to develop resources continually and integrity them with previous projects.</p>
            </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 #1408

Bulma

Cronos

<section class="section has-background-light">
  <div class="container">
    <div class="columns is-multiline has-background-white">
      <div class="column is-4-desktop is-6-tablet py-12">
        <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-8 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-4-desktop is-6-tablet py-12">
        <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>
            </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 #1409

Bulma

Cronos

<section class="section">
  <div class="container">
    <h6 class="mb-16 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 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-3-desktop is-6-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-3-desktop is-6-tablet mb-12 mb-0-tablet">
        <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-3-desktop is-6-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 #1410

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <h3 class="mb-8 title is-size-3 is-spaced">When I was a developer, I often had a hundred questions when</h3>
      <p class="subtitle mb-8">Building websites from wireframes that I had received. Some of those questions were:</p>
      <ul class="mb-8">
        <li class="mb-6 is-flex is-align-items-center">
          <span class="has-text-light mr-3 is-flex has-background-primary is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 28px; height: 28px; border-radius: 50% !important;">1</span>
          <h6 class="mb-0 is-size-5">How will this design scale when I shrink the browser window?</h6>
        </li>
        <li class="mb-6 is-vcentered is-flex is-align-items-center">
          <span class="has-text-light mr-3 is-flex has-background-primary is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 28px; height: 28px; border-radius: 50% !important;">2</span>
          <h6 class="mb-0 is-size-5">What happens when this shape is filled out incorrectly?</h6>
        </li>
        <li class="is-vcentered is-flex is-align-items-center">
          <span class="has-text-light mr-3 is-flex has-background-primary is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 28px; height: 28px; border-radius: 50% !important;">3</span>
          <h6 class="mb-0 is-size-5">What are the options in this sorting filter, and what do they do?</h6>
        </li>
      </ul>
      <p class="subtitle mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="subtitle mb-6">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </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 #1411

Bulma

Cronos

<section class="section is-relative is-clipped">
  <div class="container">
    <div class="mb-6 mb-0-desktop is-vcentered columns is-multiline">
      <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 #1412

Bulma

Cronos

<section class="mb-48 pt-20 has-background-warning-light">
  <div class="pt-5">
    <div class="container px-4 pb-5 is-relative">
      <div class="has-mw-4xl mx-auto has-text-centered">
        <span class="tag is-warning">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-12 mb-32-desktop 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>
      <div class="pb-10 columns is-multiline" style="margin-bottom: -200px;">
        <div class="column is-12 is-4-desktop mb-4 mb-0-desktop px-0-desktop">
          <div class="px-8 py-20 has-background-white has-text-centered" style="height: 100%">
            <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>
            <div>
              <h3 class="mt-6 mb-4 is-size-4">Check of access</h3>
              <p class="subtitle">Take care to develop resources continually and integrity them with previous projects.</p>
            </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 #1413

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

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-desktop is-6-tablet py-20" style="box-shadow: 0px 20px 80px -16px rgba(28, 25, 23, 0.04);">
        <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-8 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-4-desktop is-6-tablet py-20" style="box-shadow: 0px 20px 80px -16px rgba(28, 25, 23, 0.04);">
        <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>
            </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 #1415

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <h3 class="mb-6 title is-size-3 is-spaced">Decisions To Consider Before Wireframing</h3>
      <ul>
        <li class="py-5 is-fullwidth">
          <a class="is-medium pl-0 mb-4 is-ghost has-text-dark is-flex is-justify-content-space-between is-align-items-center is-fullwidth" href="#">
            <span class="has-text-weight-bold">Creating Content Wireframes For Responsive Design</span>
            <svg class="is-flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.17461 0.120366C7.38428 -0.0593456 7.69993 -0.0350648 7.87964 0.174598C8.05935 0.384261 8.03507 0.699911 7.8254 0.879622L4.3254 3.87962C4.13816 4.04012 3.86186 4.04012 3.67461 3.87962L0.174613 0.879622C-0.0350495 0.699911 -0.0593303 0.384261 0.120381 0.174598C0.300092 -0.0350648 0.615742 -0.0593456 0.825405 0.120366L4.00001 2.84145L7.17461 0.120366Z" fill="#001410"></path>
            </svg>
          </a>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="py-5">
          <a class="is-medium pl-0 mb-4 is-ghost has-text-dark is-flex is-justify-content-space-between is-align-items-center is-fullwidth" href="#">
            <span class="has-text-weight-bold">The Skeptic’s Guide To Low-Fidelity Prototyping</span>
            <svg class="is-flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.17461 0.120373C7.38428 -0.0593379 7.69993 -0.0350572 7.87964 0.174606C8.05935 0.384269 8.03507 0.699919 7.8254 0.87963L4.3254 3.87963C4.13816 4.04013 3.86186 4.04013 3.67461 3.87963L0.174613 0.87963C-0.0350495 0.699919 -0.0593303 0.384269 0.120381 0.174606C0.300092 -0.0350572 0.615742 -0.0593379 0.825405 0.120373L4.00001 2.84146L7.17461 0.120373Z" fill="#001410"></path>
            </svg>
          </a>
          <p class="is-hidden subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="py-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 #1416

Bulma

Cronos

<section class="section is-relative is-clipped">
  <div class="column is-6 mt-16 is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" style="height: 28rem; margin-left: -140px;">
    <img class="image is-cover" src="cronos-assets/images/laptop.png" alt="" style="height: 100%">
  </div>
  <div class="container">
    <div class="mb-6 mb-0-desktop is-vcentered columns is-multiline">
      <div class="column is-12 is-5-widescreen is-6-desktop mb-12 mb-0-desktop ml-auto-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>

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

Bulma

Cronos

<section class="mb-48 pt-20 has-background-warning">
  <div class="pt-5">
    <div class="container px-4 pb-5 is-relative">
      <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-12 mb-32-desktop 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>
      <div class="pb-10 columns is-multiline" style="margin-bottom: -200px;">
        <div class="column is-12 is-4-desktop mb-4 mb-0-desktop px-0-desktop">
          <div class="px-8 py-20 has-background-white is-cover has-text-centered" style="height: 100%">
            <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>
            <div>
              <h3 class="mt-6 mb-4 is-size-4">Check of access</h3>
              <p class="subtitle">Take care to develop resources continually and integrity them with previous projects.</p>
            </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 #1418

Bulma

Cronos

<section class="section">
  <div class="container">
    <h6 class="mb-16 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 mb-12 mb-0-desktop">
        <img class="mx-auto is-block image" src="cronos-assets/logos/brands/slack-grey.svg" alt="">
      </div>
      <div class="column is-3-desktop is-6-tablet mb-12 mb-0-desktop">
        <img class="mx-auto is-block image" src="cronos-assets/logos/brands/dropbox-grey.svg" alt="">
      </div>
      <div class="column is-3-desktop is-6-tablet mb-12 mb-0-tablet">
        <img class="mx-auto is-block image" src="cronos-assets/logos/brands/spotify-grey.svg" alt="">
      </div>
      <div class="column is-3-desktop is-6-tablet">
        <img class="mx-auto is-block image" 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 #1419

Bulma

Cronos

<nav class="navbar has-background-white py-5">
  <div class="container">
    <div class="navbar-brand is-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-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 #1420

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="mb-16 mb-40-desktop columns is-multiline">
      <div class="column is-12 is-8-desktop mx-auto has-text-centered">
        <h2 class="mb-3 title is-size-2 is-spaced">Get our Free Mobile App</h2>
        <p class="has-mw-xl mx-auto 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 is-centered">
          <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="columns is-multiline">
      <div class="column is-12 is-4-desktop">
        <div class="mb-8 is-flex">
          <span class="mt-n3">
            <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>

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

Get the code for 13,400+ components

Bulma Component #1402

Get the code for 13,400+ components

Bulma Component #1403

Get the code for 13,400+ components

Bulma Component #1404

Get the code for 13,400+ components

Bulma Component #1405

Get the code for 13,400+ components

Bulma Component #1406

Get the code for 13,400+ components

Bulma Component #1407

Get the code for 13,400+ components

Bulma Component #1408

Get the code for 13,400+ components

Bulma Component #1409

Get the code for 13,400+ components

Bulma Component #1410

Get the code for 13,400+ components

Bulma Component #1411

Get the code for 13,400+ components

Bulma Component #1412

Get the code for 13,400+ components

Bulma Component #1413

Get the code for 13,400+ components

Bulma Component #1414

Get the code for 13,400+ components

Bulma Component #1415

Get the code for 13,400+ components

Bulma Component #1416

Get the code for 13,400+ components

Bulma Component #1417

Get the code for 13,400+ components

Bulma Component #1418

Get the code for 13,400+ components

Bulma Component #1419

Get the code for 13,400+ components

Bulma Component #1420

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