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

Bulma

Bendis

<section class="is-relative section has-background-primary">
  <img class="is-absolute is-top-0 is-left-0 mt-16 ml-32" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-lg mx-auto px-14 py-12 has-background-white">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space">Sign in</span>
      <h3 class="title is-size-4 has-text-primary">Sign in to your account</h3>
      <form action="">
        <div class="control mb-2">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="password" placeholder="Password">
        </div>
        <div class="control mb-6">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="password" placeholder="Repeat password">
        </div>
        <div class="control mb-4">
          <label class="checkbox has-text-grey">
            <input class="mr-3" type="checkbox">
            <span>By signing up, you agree to our</span>
            <a class="is-link" href="#">Terms, Data Policy and Cookies Policy.</a>
          </label>
        </div>
        <button class="button is-fullwidth is-warning mb-4" type="submit">Try demo</button>
        <div class="has-text-centered mb-4"><a class="is-link" href="#">Forgot password?</a></div>
        <button class="button is-outlined is-primary is-fullwidth is-uppercase has-text-weight-bold mb-2">
          <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 #1062

Bulma

Bendis

<section class="section py-24 pb-32-desktop">
  <div class="container">
    <div class="has-mw-xl mb-16">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-5">Lorem ipsum</span>
      <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectutar</h1>
      <p class="subtitle is-size-5 has-leading-4 mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="is-relative has-background-light overflow-hidden mb-6">
      <div class="ml-auto-tablet py-20 px-8 p-20-tablet has-mw-lg has-mw-xl-desktop">
        <h2 class="is-size-4 has-text-weight-semibold has-text-primary mb-2">Vestibulum sapien diam, fermentum</h2>
        <span class="is-block is-size-7 has-text-info has-text-weight-semibold mb-2">10 jun 2022 | 19:40</span>
        <p class="has-text-grey has-leading-6 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
          <span class="mr-2">Read more</span>
          <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
          </svg>
        </a>
      </div>
      <img class="is-hidden-tablet is-fullwidth image clip-path-right-top" style="max-height: 334px; object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      <img class="is-hidden-mobile is-absolute is-top-0 is-left-0 is-fullheight is-fullwidth has-mw-xs-tablet has-mw-sm-desktop has-mw-lg-widescreen image clip-path-right-top" style="object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
    <div class="is-relative has-background-light overflow-hidden mb-6">
      <div class="ml-auto-tablet py-20 px-8 p-20-tablet has-mw-lg has-mw-xl-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 #1063

Bulma

Bendis

<section class="is-relative section py-24 is-overflow-hidden">
  <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="columns is-vcentered">
      <div class="column is-5-widescreen">
        <img class="image is-fullwidth has-mw-sm mx-auto" src="bendis-assets/images/phones-left.png" alt="">
      </div>
      <div class="column is-7-widescreen">
        <div class="has-mw-md has-mw-none-widescreen mx-auto">
          <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Get our Free Mobile App</h2>
          <p class="has-mw-md subtitle is-size-5 has-leading-6 mt-6 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <div class="is-flex">
            <a class="is-block mr-4" href="#">
              <img style="height: 50px;" src="bendis-assets/images/app-store-blue.png" alt="">
            </a>
            <a class="is-block" href="#">
              <img style="height: 50px;" src="bendis-assets/images/google-play-blue.png" 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 #1064

Bulma

Bendis

<section class="is-relative section pt-24 pt-28-tablet has-background-light is-overflow-hidden">
  <div class="is-absolute is-top-0 is-bottom-0 is-left-0 is-flex is-align-items-center is-justify-content-center">
    <h2 class="stroke" style="opacity: 20%;">CONTACTS</h2>
  </div>
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-6">
        <div class="has-mw-md mx-auto">
          <h2 class="title is-size-3 has-leading-3 has-text-primary mb-8">Take quick action that increases your brand&apos;s regular profit.</h2>
          <div class="mb-6">
            <h4 class="has-text-info has-text-weight-semibold is-uppercase mb-1">Address</h4>
            <p class="is-size-5 has-text-grey">1686 Geraldine Lane</p>
            <p class="is-size-5 has-text-grey">New York, NY 10013</p>
          </div>
          <div>
            <h4 class="has-text-info has-text-weight-semibold is-uppercase mb-1">Contacts</h4>
            <span class="is-size-5 has-text-grey">hello@wireframes.org</span>
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="has-mw-md has-mw-xl-desktop mx-auto py-16 px-8-mobile px-16-tablet has-background-white">
          <h3 class="title is-size-4 has-text-primary mb-2">Lorem ipsum dolor sit amet</h3>
          <p class="has-text-grey mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing</p>

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

Bulma

Bendis

<div>
  <nav class="navbar py-2 has-background-primary">
    <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>
  </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

Bulma Component #1066

Bulma

Bendis

<section class="is-relative section py-24 py-28-tablet has-background-light is-overflow-hidden">
  <div class="is-absolute is-top-0 is-bottom-0 is-left-0 is-flex is-align-items-center is-justify-content-center">
    <h2 class="stroke" style="opacity: 20%;">CONTACTS</h2>
  </div>
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-16">
      <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 is-size-5 mt-5">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="has-mw-md mx-auto has-mw-none-tablet">
      <div class="columns">
        <div class="column is-4">
          <div class="py-20 px-6 is-fullheight has-background-white has-text-centered">
            <h4 class="is-size-5 has-text-primary has-text-weight-semibold mb-4">Visit us</h4>
            <p class="has-text-grey">1686 Geraldine Lane</p>
            <p class="has-text-grey">New York, NY 10013</p>
          </div>
        </div>
        <div class="column is-4">
          <div class="py-20 px-6 is-fullheight has-background-white has-text-centered">
            <h4 class="is-size-5 has-text-primary has-text-weight-semibold mb-4">Contacts</h4>
            <p class="has-text-grey">hello@wireframes.org</p>
            <p class="has-text-grey">+7 843 672 431</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 #1067

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="columns is-vcentered mb-16">
      <div class="is-hidden-mobile column is-2-tablet is-1-desktop">
        <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>
      </div>
      <div class="column is-8-tablet is-10-desktop">
        <div class="px-8 has-mw-xl mx-auto has-mw-none-widescreen">
          <div class="columns is-multiline has-background-dark">
            <div class="column is-12-tablet is-8-widescreen">
              <div class="py-12 py-20-widescreen px-8 px-24-widescreen">
                <span class="is-block is-uppercase has-text-weight-semibold has-text-info mb-2">UI Designer</span>
                <h1 class="title is-size-3 has-leading-3 has-text-white">Sara Manson</h1>
                <p class="subtitle is-size-5 has-leading-4 has-text-white mt-6 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                <div class="mt-8 buttons">
                  <a class="button w-12 h-12 p-2 is-primary has-text-warning" href="#">
                    <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="M13.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="currentColor"></path>
                      <mask id="mask0_236_2077" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="white"></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 #1068

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-5">
        <a class="is-inline-block mb-6 title is-5 has-text-dark" href="#">
          <img src="bendis-assets/logos/bendis-blue.svg" alt="" style="height: 28px" width="auto">
        </a>
        <p><small class="has-text-grey">All rights reserved &copy; Corporation 2022</small></p>
      </div>
      <div class="column is-7">
        <ul class="is-flex is-flex-wrap-wrap is-multiline is-align-items-center is-justify-content-end -mb-4">
          <li class="mr-4 mr-10-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Company</a></li>
          <li class="mr-4 mr-10-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Pages</a></li>
          <li class="mr-4 mr-10-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Legal</a></li>
          <li class="mr-4 mr-16-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-primary" href="#">Resources</a></li>
          <li class="mb-4"><a class="button is-warning" href="#">Action</a></li>
        </ul>
      </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 #1069

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <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-leading-4 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-leading-4 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>
        </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-1615072870329-51396f9838a2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1051&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 #1070

Bulma

Bendis

<section class="is-relative section py-28">
  <img class="image is-absolute is-top-0 is-left-0 is-fullwidth is-fullheight" style="object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1036&amp;q=80" alt="">
  <div class="container">
    <div class="has-mw-2xl py-14 pl-8 pl-16-desktop pr-20 has-background-white clip-path-right-top">
      <div class="has-mw-sm">
        <h2 class="title is-size-4 has-text-weight-semibold has-text-primary">Weekly email updates</h2>
        <p class="subtitle has-leading-6 mt-4 mb-4">Focus on your business with a large number of useful tools to take care of your company&apos;s development. Share your difficulties with us, and we will help you.</p>
        <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
          <span class="mr-2">Try demo</span>
          <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
          </svg>
        </a>
      </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 #1071

Bulma

Bendis

<section class="is-relative section py-32 has-background-primary">
  <img class="is-absolute is-top-0 is-left-0 mt-16 ml-32" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-lg mx-auto px-14 py-12 has-background-white">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space">Sign in</span>
      <h3 class="title is-size-4 has-text-primary">Sign in to your account</h3>
      <form action="">
        <div class="control mb-2">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="email" placeholder="E-mail address">
        </div>
        <div class="control mb-2">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="password" placeholder="Password">
        </div>
        <div class="control mb-6">
          <input class="input pl-6 py-4 has-background-light has-text-primary" type="password" placeholder="Repeat password">
        </div>
        <div class="control mb-4">
          <label class="checkbox has-text-grey">
            <input class="mr-3" type="checkbox">
            <span>By signing up, you agree to our</span>
            <a class="is-link" href="#">Terms, Data Policy and Cookies Policy.</a>
          </label>
        </div>
        <button class="button is-fullwidth is-warning" type="submit">Try demo</button>

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

Bulma

Bendis

<section class="is-relative">
  <div class="is-absolute is-top-0 is-left-0 is-fullheight column is-6 p-0 has-background-light clip-path-right-top"></div>
  <div class="section py-24-mobile py-40-tablet">
    <div class="container">
      <div class="columns">
        <div class="column is-6 mb-16 mb-0-desktop">
          <div class="has-mw-md mx-auto">
            <small class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</small>
            <h1 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor sit amet consectetur</h1>
            <p class="has-mw-xs subtitle is-size-5 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>
            <a class="button is-warning" href="#">Try demo</a>
          </div>
        </div>
        <div class="column is-6">
          <div class="has-mw-md mx-auto">
            <div class="columns is-multiline -mb-10">
              <div class="column is-6 mb-10">
                <div class="has-mw-xs">
                  <div class="is-inline-flex w-20 h-12 mb-4 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-both">
                    <span>1</span>
                  </div>
                  <p class="has-text-grey has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</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 #1073

Bulma

Bendis

<section class="section py-24 pb-32-desktop">
  <div class="container">
    <div class="is-relative has-background-light overflow-hidden mb-6">
      <div class="ml-auto-tablet py-20 px-8 p-20-tablet has-mw-lg has-mw-xl-desktop">
        <h2 class="is-size-4 has-text-weight-semibold has-text-primary mb-2">Vestibulum sapien diam, fermentum</h2>
        <span class="is-block is-size-7 has-text-info has-text-weight-semibold mb-2">10 jun 2022 | 19:40</span>
        <p class="has-text-grey has-leading-6 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
          <span class="mr-2">Read more</span>
          <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
          </svg>
        </a>
      </div>
      <img class="is-hidden-tablet is-fullwidth image clip-path-right-top" style="max-height: 334px; object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      <img class="is-hidden-mobile is-absolute is-top-0 is-left-0 is-fullheight is-fullwidth has-mw-xs-tablet has-mw-sm-desktop has-mw-lg-widescreen image clip-path-right-top" style="object-fit: cover;" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
    <div class="is-relative has-background-light overflow-hidden mb-6">
      <div class="ml-auto-tablet py-20 px-8 p-20-tablet has-mw-lg has-mw-xl-desktop">
        <h2 class="is-size-4 has-text-weight-semibold has-text-primary mb-2">Vestibulum sapien diam, fermentum</h2>
        <span class="is-block is-size-7 has-text-info has-text-weight-semibold mb-2">10 jun 2022 | 19:40</span>
        <p class="has-text-grey has-leading-6 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="is-inline-flex is-align-items-center is-size-7 has-text-primary is-uppercase has-text-weight-bold" href="#">
          <span class="mr-2">Read more</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 #1074

Bulma

Bendis

<section class="py-24 section">
  <div class="container">
    <div class="columns is-align-items-end mb-14">
      <div class="column is-7">
        <div class="has-mw-md">
          <span class="has-text-info has-text-weight-semibold is-uppercase">Lorem ipsum</span>
          <h2 class="title is-size-3 has-leading-3 has-text-primary mt-3">Lorem ipsum dolor sit</h2>
        </div>
      </div>
      <div class="column is-5 has-text-right"><a class="button is-warning" href="#">Action</a></div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6 p-0">
        <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="column is-6 p-0">
        <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1553949345-eb786bb3f7ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="column is-4 p-0">
        <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1552844657-1d8b11fad02e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1003&amp;q=80" alt="">
      </div>
      <div class="column is-4 p-0">
        <img class="image is-fullwidth" style="height: 307px; object-fit: cover;" src="https://images.unsplash.com/photo-1593776805861-74972b600999?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&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 #1075

Bulma

Bendis

<section class="section">
  <div class="container">
    <div class="has-mw-2xl mx-auto">
      <h2 class="title is-size-4-mobile is-size-3 has-leading-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 mb-4">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="is-size-5 has-leading-6 has-text-grey-dark mb-4">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="is-size-5 has-leading-6 has-text-grey-dark mb-4">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 #1076

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-mw-none-widescreen">
      <div class="columns is-vcentered mb-16">
        <div class="is-hidden-mobile column is-2-tablet is-1-desktop">
          <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>
        </div>
        <div class="column is-8-tablet is-10-desktop px-24-desktop">
          <div class="has-mw-xl mx-auto has-mw-none-widescreen">
            <div class="columns is-multiline is-vcentered">
              <div class="column is-12 is-3-widescreen">
                <img class="image mx-auto is-fullwidth" style="max-width: 160px; height: 162px; object-fit: cover; z-index: 1;" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="">
              </div>
              <div class="is-relative column is-12 is-3-widescreen is-flex has-max-content mx-auto is-align-self-stretch is-justify-content-center">
                <div class="has-mw-xs pl-2 pr-8 is-align-self-center is-relative" style="z-index: 1;">
                  <h3 class="is-size-4 has-text-weight-semibold has-text-primary">Kathy Ramsey</h3>
                  <span class="has-text-info">Product Manager</span>
                </div>
                <div class="is-absolute is-top-0 is-left-0 p-3 -ml-10 is-fullheight has-text-primary-dark">
                  <img class="image is-fullheight" src="bendis-assets/images/quotes-background-testimonials-light.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 #1077

Bulma

Bendis

<div>
  <nav class="is-relative 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="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><a class="navbar-item has-text-white" href="#">Support</a></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 #1078

Bulma

Bendis

<section class="is-relative section py-24 is-overflow-hidden">
  <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="columns is-vcentered">
      <div class="column is-7-widescreen">
        <div class="has-mw-md has-mw-none-widescreen mx-auto">
          <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Get our Free Mobile App</h2>
          <p class="has-mw-md subtitle is-size-5 has-leading-6 mt-6 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <div class="is-flex">
            <a class="is-block mr-4" href="#">
              <img style="height: 50px;" src="bendis-assets/images/app-store-blue.png" alt="">
            </a>
            <a class="is-block" href="#">
              <img style="height: 50px;" src="bendis-assets/images/google-play-blue.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="column is-5-widescreen">
        <img class="image is-fullwidth has-mw-sm mx-auto" src="bendis-assets/images/phones-left.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 #1079

Bulma

Bendis

<section class="section py-12 has-background-primary">
  <div class="container">
    <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>
      <div class="column is-4-tablet is-2-widescreen">

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

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-vcentered mb-16">
      <div class="is-hidden-mobile column is-2-tablet is-1-desktop">
        <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>
      </div>
      <div class="column is-8-tablet is-10-desktop">
        <div class="px-8 has-mw-xl mx-auto has-mw-none-widescreen">
          <div class="columns is-multiline has-background-white">
            <div class="column is-12-tablet is-8-widescreen">
              <div class="py-12 py-20-widescreen px-8 px-24-widescreen">
                <span class="is-block is-uppercase has-text-weight-semibold has-text-info mb-2">UI Designer</span>
                <h1 class="title is-size-3 has-leading-3 has-text-primary">Sara Manson</h1>
                <p class="subtitle is-size-5 has-leading-4 has-text-grey mt-6 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                <div class="mt-8 buttons">
                  <a class="button w-12 h-12 p-2 is-primary is-light has-text-primary" href="#">
                    <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="M13.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="currentColor"></path>
                      <mask id="mask0_236_2077" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="white"></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 #1061

Get the code for 13,400+ components

Bulma Component #1062

Get the code for 13,400+ components

Bulma Component #1063

Get the code for 13,400+ components

Bulma Component #1064

Get the code for 13,400+ components

Bulma Component #1065

Get the code for 13,400+ components

Bulma Component #1066

Get the code for 13,400+ components

Bulma Component #1067

Get the code for 13,400+ components

Bulma Component #1068

Get the code for 13,400+ components

Bulma Component #1069

Get the code for 13,400+ components

Bulma Component #1070

Get the code for 13,400+ components

Bulma Component #1071

Get the code for 13,400+ components

Bulma Component #1072

Get the code for 13,400+ components

Bulma Component #1073

Get the code for 13,400+ components

Bulma Component #1074

Get the code for 13,400+ components

Bulma Component #1075

Get the code for 13,400+ components

Bulma Component #1076

Get the code for 13,400+ components

Bulma Component #1077

Get the code for 13,400+ components

Bulma Component #1078

Get the code for 13,400+ components

Bulma Component #1079

Get the code for 13,400+ components

Bulma Component #1080

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