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

Bulma

Bendis

<section class="is-relative section py-24 has-background-light">
  <img class="image is-absolute is-top-0 is-left-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="subtitle is-size-5 mt-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>
    <div class="columns">
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-dark is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866369373-8d232ea5a028?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-text-white has-text-weight-bold is-uppercase mb-4">Change of access</h3>
            <p class="has-text-white has-leading-6">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="has-mw-md mx-auto has-background-dark is-fullheight">
          <img class="image is-fullwidth" style="height: 231px; object-fit: cover;" src="https://images.unsplash.com/photo-1615866431878-500cc9e74d82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
          <div class="has-mw-xs mx-auto px-6 px-10-desktop pt-16 pb-20 has-text-centered">
            <h3 class="is-size-5 has-text-white has-text-weight-bold is-uppercase mb-4">Frequent authentication</h3>
            <p class="has-text-white has-leading-6">Take care to develop resources continually and integrity them with previous projects.</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 #1102

Bulma

Bendis

<section class="section">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <div class="is-flex-tablet">
        <div>
          <svg width="73" height="55" viewbox="0 0 73 55" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M42.6623 55V32.5106L62.8084 0H73L59.7273 28.7818L70.0373 29.3644V55H42.6623ZM0 55V32.5106L20.2646 0H30.4562L17.1834 28.7818L27.375 29.3644V55H0Z" fill="#F6FAFD"></path>
          </svg>
        </div>
        <div class="pl-10">
          <h3 class="is-size-4 has-leading-6 has-text-primary has-text-weight-medium mb-6">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new.</h3>
          <span class="is-size-5 has-text-weight-semibold has-text-info">Danny Bailey, CEO &amp; Founder at Wireframes</span>
        </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 #1103

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <h3 class="is-size-5 has-text-centered has-text-info mb-8">Trusted by brands all over the world</h3>
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/stripe-light-blue.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 #1104

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="columns is-vcentered mb-14 pb-8 pb-14-desktop border-b-primary-light">
      <div class="column is-7 mb-8 mb-0-desktop">
        <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-white">Lorem ipsum</h2>
      </div>
      <div class="column is-5">
        <div class="is-flex is-justify-content-end">
          <a class="button is-outlined is-warning w-16 h-16 p-0" href="#">
            <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="button is-outlined is-warning w-16 h-16 p-0" href="#">
            <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen">
        <div class="has-mw-sm mx-auto">

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

Bulma

Bendis

<div>
  <nav class="navbar py-2 has-background-primary">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
        </a>
      </div>
      <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <ul class="navbar-item">
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item has-mw-xs">

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

Bulma

Bendis

<section class="is-relative section pt-24 has-background-primary">
  <img class="image is-absolute is-top-0 mt-16" style="left: 50%; transform: translateX(-50%);" src="bendis-assets/images/frame-lines-center-blue-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-white">Get our Free Mobile App</h1>
      <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 has-text-light mt-6 mb-8">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-justify-content-center">
        <a class="is-block mr-4" href="#">
          <img style="height: 50px;" src="bendis-assets/images/app-store.png" alt="">
        </a>
        <a class="is-block" href="#">
          <img style="height: 50px;" src="bendis-assets/images/google-play.png" alt="">
        </a>
      </div>
    </div>
    <div class="columns is-vcentered">
      <div class="column is-5-tablet is-4-widescreen">
        <div class="is-flex has-mw-sm mx-auto mb-10">
          <div class="is-flex-shrink-0 is-inline-flex w-20 h-12 pl-5 mr-6 is-align-items-center has-background-warning is-size-4 has-text-weight-bold has-text-white clip-path-right-top">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_252_2665)">
                <path d="M12 -0.0400009L0 11.8L12 23.64L24 11.8L12 -0.0400009ZM2.8281 11.8L12 2.75039L15.879 6.57767L14.4648 7.97301L12 5.54167L5.6571 11.8L8.121 14.2319L6.7068 15.6273L2.8281 11.8ZM15.5157 11.8L12 15.2697L8.4852 11.8L12 8.33206L15.5157 11.8ZM8.121 17.0226L9.5352 15.6273L12 18.0583L18.3438 11.8L15.879 9.36806L17.2932 7.97272L21.1719 11.8L12 20.8496L8.121 17.0226Z" fill="#1633AB"></path>
              </g>
              <defs><rect width="24" height="24" fill="white"></rect></defs>

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

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-vcentered mb-14 pb-8 pb-14-desktop border-b-primary-light">
      <div class="column is-7 mb-8 mb-0-desktop">
        <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Lorem ipsum</h2>
      </div>
      <div class="column is-5">
        <div class="is-flex is-justify-content-end">
          <a class="button is-outlined is-primary w-16 h-16 p-0" href="#">
            <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="button is-outlined is-primary w-16 h-16 p-0" href="#">
            <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen">
        <div class="is-flex is-justify-content-space-between is-flex-direction-column has-mw-sm mx-auto is-fullheight">

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

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <h3 class="is-size-5 has-text-centered has-text-grey mb-8">Trusted by brands all over the world</h3>
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/stripe.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 #1109

Bulma

Bendis

<section class="is-relative section py-24 py-52-desktop has-background-primary is-overflow-hidden">
  <img class="image is-absolute is-top-0 is-left-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="is-relative columns is-multiline is-vcentered">
      <div class="column is-12 is-6-desktop mb-16 mb-0-desktop">
        <div class="has-mw-md mx-auto">
          <h1 class="title is-size-3 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
          <p class="subtitle has-leading-6 has-text-white mt-6 mb-10">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-tablet is-align-items-center is-justify-content-space-between">
            <a class="button mb-4 mb-0-tablet is-warning is-uppercase" href="#">Get started free</a>
            <div class="is-flex">
              <a class="button is-outlined is-light w-16 h-16 p-0" href="#">
                <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="#A0CDFA"></path>
                </svg>
              </a>
              <a class="button is-outlined is-light w-16 h-16 p-0" href="#">
                <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="#A0CDFA"></path>
                </svg>
              </a>
            </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 #1110

Bulma

Bendis

<div class="is-relative has-background-primary">
  <nav class="navbar py-2 has-background-transparent">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center is-flex-grow-1">
        <a class="navbar-item" href="#">
          <svg width="22" height="23" viewbox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21.7973 20.0328L16.4361 14.4697C18.7112 10.9316 18.2607 6.2297 15.3549 3.22699C13.7105 1.55107 11.548 0.619995 9.22781 0.619995C6.90764 0.619995 4.74515 1.55107 3.12329 3.22699C-0.233072 6.71851 -0.233072 12.3748 3.12329 15.843C6.02913 18.8457 10.5794 19.3112 14.0033 16.9836L19.387 22.5467C19.6348 22.8028 20.0628 22.8028 20.3106 22.5467L21.7973 21.0104C22.0676 20.7311 22.0676 20.2889 21.7973 20.0328ZM13.3726 13.8179C11.0975 16.1689 7.38069 16.1689 5.08304 13.8179C2.80793 11.467 2.80793 7.6263 5.08304 5.25207C7.35816 2.90112 11.0749 2.90112 13.3726 5.25207C15.6477 7.6263 15.6477 11.467 13.3726 13.8179Z" fill="white"></path>
          </svg>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
        </a>
      </div>
      <div class="is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
          </span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <a class="navbar-menu-open navbar-burger is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></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 #1111

Bulma

Bendis

<section class="section">
  <div class="container">
    <div class="has-mw-3xl mx-auto mb-10">
      <h2 class="title is-size-4-mobile is-size-3 has-text-primary">When I was a developer, I often had a hundred questions when</h2>
      <p class="is-size-5 has-leading-6 has-text-grey-dark mt-10">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>
    </div>
    <img class="image is-fullwidth mb-10" style="object-fit: cover; height: 500px;" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
    <div class="has-mw-3xl mx-auto">
      <p class="is-size-5 has-leading-6 has-text-grey-dark mb-10">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&rsquo;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>
      <p class="is-size-5 has-leading-6 has-text-grey-dark">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&rsquo;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 #1112

Bulma

Bendis

<section class="is-relative section py-24 py-52-desktop has-background-white is-overflow-hidden">
  <img class="image is-absolute is-top-0 is-left-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="is-relative columns is-multiline is-vcentered">
      <div class="column is-12 is-6-desktop mb-16 mb-0-desktop">
        <div class="has-mw-md mx-auto">
          <h1 class="title is-size-3 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
          <p class="subtitle has-leading-6 mt-6 mb-10">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-tablet is-align-items-center is-justify-content-space-between">
            <a class="button mb-4 mb-0-tablet is-warning is-uppercase" href="#">Get started free</a>
            <div class="is-flex">
              <a class="button is-outlined is-primary w-16 h-16 p-0" href="#">
                <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
                </svg>
              </a>
              <a class="button is-outlined is-primary w-16 h-16 p-0" href="#">
                <svg width="12" height="16" viewbox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="currentColor"></path>
                </svg>
              </a>
            </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 #1113

Bulma

Bendis

<div>
  <nav class="navbar py-2 has-background-primary">
    <div class="is-relative container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
        </a>
      </div>
      <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
        <ul class="navbar-item">
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
          <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="navbar-menu is-hidden-mobile">
        <div class="navbar-end">
          <a class="navbar-item has-text-white" href="#">Sign In</a>

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

Bulma

Bendis

<section>
  <div class="section pt-24 pb-0 has-background-light">
    <div class="container">
      <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
        <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
        <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Take quick action that increases your brand&apos;s regular profit.</h1>
        <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 mt-6 mb-8">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>
      <img class="image is-fullwidth has-mw-5xl mx-auto" src="bendis-assets/images/computer-head.png" alt="">
    </div>
  </div>
  <div class="section py-16 has-background-primary">
    <div class="container">
      <div class="columns">
        <div class="column is-4 mb-16 mb-0-desktop">
          <div class="has-mw-xs mx-auto has-text-centered">
            <div class="is-inline-flex w-24 h-14 mb-8 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-both">
              <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_252_2841)">
                  <path d="M16 -0.0533295L0 15.7333L16 31.52L32 15.7333L16 -0.0533295ZM3.7708 15.7333L16 3.66719L21.172 8.77023L19.2864 10.6307L16 7.3889L7.5428 15.7333L10.828 18.9759L8.9424 20.8364L3.7708 15.7333ZM20.6876 15.7333L16 20.3596L11.3136 15.7333L16 11.1094L20.6876 15.7333ZM10.828 22.6968L12.7136 20.8364L16 24.0778L24.4584 15.7333L21.172 12.4908L23.0576 10.6303L28.2292 15.7333L16 27.7995L10.828 22.6968Z" fill="#1633AB"></path>
                </g>
                <defs><rect width="32" height="32" fill="white"></rect></defs>
              </svg>
            </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 #1115

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <h3 class="is-size-5 has-text-centered has-text-grey mb-8">Trusted by brands all over the world</h3>
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light clip-path-both" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/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 #1116

Bulma

Bendis

<div>
  <nav class="navbar py-2 has-background-primary">
    <div class="container">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-5 has-text-dark">
            <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <ul class="navbar-item">
            <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
            <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
            <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
            <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
          </ul>
          <div class="navbar-item"><a class="button is-outlined is-white" href="#">Sign Up</a></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 #1117

Bulma

Bendis

<section>
  <div class="section pt-24 pb-0 has-background-primary">
    <div class="container">
      <div class="has-mw-4xl mx-auto mb-16 has-text-centered">
        <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
        <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
        <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 has-text-light mt-6 mb-8">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>
      <img class="image is-fullwidth has-mw-5xl mx-auto" src="bendis-assets/images/computer-head.png" alt="">
    </div>
  </div>
  <div class="section py-16 has-background-light">
    <div class="container">
      <div class="columns">
        <div class="column is-4 mb-16 mb-0-desktop">
          <div class="has-mw-xs mx-auto has-text-centered">
            <div class="is-inline-flex w-24 h-14 mb-8 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-both">
              <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_252_2841)">
                  <path d="M16 -0.0533295L0 15.7333L16 31.52L32 15.7333L16 -0.0533295ZM3.7708 15.7333L16 3.66719L21.172 8.77023L19.2864 10.6307L16 7.3889L7.5428 15.7333L10.828 18.9759L8.9424 20.8364L3.7708 15.7333ZM20.6876 15.7333L16 20.3596L11.3136 15.7333L16 11.1094L20.6876 15.7333ZM10.828 22.6968L12.7136 20.8364L16 24.0778L24.4584 15.7333L21.172 12.4908L23.0576 10.6303L28.2292 15.7333L16 27.7995L10.828 22.6968Z" fill="#1633AB"></path>
                </g>
                <defs><rect width="32" height="32" fill="white"></rect></defs>
              </svg>
            </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 #1118

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <h3 class="is-size-5 has-text-centered has-text-info mb-8">Trusted by brands all over the world</h3>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-light-blue.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-primary-dark" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/amazon-light-blue.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 #1119

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <h3 class="is-size-5 has-text-centered has-text-grey mb-8">Trusted by brands all over the world</h3>
    <div class="columns is-multiline">
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8 has-background-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/amazon.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 #1120

Bulma

Bendis

<div>
  <nav class="is-relative navbar py-2 has-background-white">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="#1633AB"></rect><rect x="2" y="11" width="20" height="2" fill="#1633AB"></rect><rect x="2" y="16" width="20" height="2" fill="#1633AB"></rect></svg>
      </a>
    </div>
    <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <ul class="navbar-item">
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">About</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Company</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Services</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-primary" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="navbar-menu is-hidden-mobile">
      <div class="navbar-end"><a class="navbar-item" href="#">Sign In</a><a class="navbar-item" href="#">Support</a></div>
    </div>
  </nav>

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

Get the code for 13,400+ components

Bulma Component #1102

Get the code for 13,400+ components

Bulma Component #1103

Get the code for 13,400+ components

Bulma Component #1104

Get the code for 13,400+ components

Bulma Component #1105

Get the code for 13,400+ components

Bulma Component #1106

Get the code for 13,400+ components

Bulma Component #1107

Get the code for 13,400+ components

Bulma Component #1108

Get the code for 13,400+ components

Bulma Component #1109

Get the code for 13,400+ components

Bulma Component #1110

Get the code for 13,400+ components

Bulma Component #1111

Get the code for 13,400+ components

Bulma Component #1112

Get the code for 13,400+ components

Bulma Component #1113

Get the code for 13,400+ components

Bulma Component #1114

Get the code for 13,400+ components

Bulma Component #1115

Get the code for 13,400+ components

Bulma Component #1116

Get the code for 13,400+ components

Bulma Component #1117

Get the code for 13,400+ components

Bulma Component #1118

Get the code for 13,400+ components

Bulma Component #1119

Get the code for 13,400+ components

Bulma Component #1120

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