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

Bulma

Bendis

<section class="section py-12">
  <div class="container">
    <div class="columns is-mobile is-multiline">
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/amazon-color.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile 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 #1042

Bulma

Bendis

<section class="py-24 is-overflow-hidden">
  <div class="section py-0 mb-14">
    <div class="container">
      <div class="has-mw-3xl mx-auto">
        <div class="columns is-align-items-end">
          <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 amet consectutar</h2>
            </div>
          </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>

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

Bulma

Bendis

<section class="is-relative section py-24 has-background-primary">
  <img class="is-absolute is-top-0 is-right-0" src="bendis-assets/images/line-circle-light.svg" alt="">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6">
        <div class="is-relative has-mw-md-mobile mx-auto is-fullheight py-20 px-8-mobile p-20-tablet has-background-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex w-20 h-12 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
            <span class="-ml-4">1</span>
          </div>
          <div class="has-mw-xs">
            <h3 class="pr-16-desktop has-text-white is-size-4 has-text-weight-semibold mb-4">Making changes simple and easy</h3>
            <p class="has-text-white has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="is-relative has-mw-md-mobile mx-auto is-fullheight py-20 px-8-mobile p-20-tablet has-background-dark">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex w-20 h-12 is-align-items-center is-justify-content-center has-background-warning is-size-4 has-text-weight-bold has-text-primary clip-path-right-top">
            <span class="-ml-4">2</span>
          </div>
          <div class="has-mw-xs">
            <h3 class="pr-16-desktop has-text-white is-size-4 has-text-weight-semibold mb-4">Fusce mauris ligula, tincidunt vel</h3>
            <p class="has-text-white has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</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 #1044

Bulma

Bendis

<section>
  <div class="section">
    <div class="container">
      <img class="image is-fullwidth mb-20" 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-2xl mx-auto">
        <nav class="breadcrumb is-centered has-succeeds-separator mb-6" aria-label="breadcrumbs">
          <ul class="is-uppercase has-text-weight-semibold">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li class="is-active"><a href="#" aria-current="page">Article</a></li>
          </ul>
        </nav>
        <h1 class="has-text-centered title is-size-3-mobile is-size-2 has-leading-3 has-text-primary mb-8">Lorem ipsum dolor sit amet consectutar</h1>
        <div class="is-flex is-align-items-center is-justify-content-center mb-20">
          <img class="image" style="width: 57px; height: 57px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <div class="pl-6">
            <h4 class="is-size-5 has-text-weight-semibold has-text-grey">Peter Prada</h4>
            <span class="is-size-7 has-text-info has-text-weight-semibold">10 jun 2022 | 19:40</span>
          </div>
        </div>
        <div class="has-mw-md-mobile has-mw-md-tablet has-mw-xl-widescreen mx-auto">
          <p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque eveniet est laborum exercitationem!</p>
          <p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
          <p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur aperiam ipsum vel facilis, quibusdam velit. Et, ipsam repellat? Possimus id exercitationem aut voluptatum cumque, nemo quaerat officiis accusamus.</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 #1045

Bulma

Bendis

<section class="is-relative is-overflow-hidden">
  <img class="is-absolute is-top-0 mt-24 image" style="left: 50%; opacity: 60%; transform: translateX(-50%);" src="bendis-assets/images/line-frame-blue-light.svg" alt="">
  <div class="is-absolute is-top-0 is-left-0 mt-28-desktop -ml-4 -ml-12-desktop">
    <h2 class="stroke" style="opacity: 30%;">CONTACTS</h2>
  </div>
  <div class="section pt-28-desktop">
    <div class="container">
      <div class="columns">
        <div class="column is-4 has-text-centered">
          <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_241_2434)">
              <path d="M19.9999 0C15.5317 0 11.3456 1.76704 8.19431 4.96682C2.17392 11.0798 1.70357 20.918 7.01845 27.6041C7.11252 27.7951 7.20659 27.9384 7.39473 28.1294L18.683 39.5913C19.0592 39.9256 19.5296 40.1166 19.9999 40.1166C20.4703 40.1166 20.9406 39.9256 21.3169 39.5436L32.6051 28.0817C32.7462 27.9384 32.8873 27.7473 32.9814 27.5563C38.2963 20.8702 37.8259 11.0321 31.8055 4.91906C28.6542 1.76704 24.4682 0 19.9999 0ZM29.8301 25.455C29.7831 25.5505 29.689 25.5982 29.642 25.6938L19.9999 35.5319L10.3109 25.6938C10.2638 25.5982 10.2168 25.5505 10.1227 25.455C5.79556 20.2971 6.07776 12.4648 10.8282 7.64127C13.274 5.15785 16.5664 3.82063 19.9999 3.82063C23.4334 3.82063 26.7258 5.20561 29.1246 7.68902C33.875 12.4648 34.2043 20.2971 29.8301 25.455Z" fill="#EBE050"></path>
              <path d="M19.9999 8.1189C15.3435 8.1189 11.5337 11.9873 11.5337 16.7153C11.5337 21.4434 15.3435 25.3117 19.9999 25.3117C24.6563 25.3117 28.466 21.4434 28.466 16.7153C28.466 11.9873 24.6563 8.1189 19.9999 8.1189ZM19.9999 21.4911C17.413 21.4911 15.2964 19.342 15.2964 16.7153C15.2964 14.0886 17.413 11.9395 19.9999 11.9395C22.5868 11.9395 24.7033 14.0886 24.7033 16.7153C24.7033 19.342 22.5868 21.4911 19.9999 21.4911Z" fill="#EBE050"></path>
            </g>
            <defs><rect width="40" height="40" fill="white"></rect></defs>
          </svg>
          <p class="is-size-5 has-text-grey mt-8">1686 Geraldine Lane</p>
          <p class="is-size-5 has-text-grey">New York, NY 10013</p>
        </div>
        <div class="column is-4 has-text-centered">
          <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M29.4114 10.8069L27.9907 22.7692C27.8844 23.6109 27.8319 24.4168 27.8319 25.188C27.8319 26.3361 28.2467 26.906 29.0762 26.906C30.4001 26.906 31.671 26.0036 32.8886 24.198C34.1062 22.3924 34.706 20.2013 34.706 17.6343C34.706 13.9269 33.3649 10.9035 30.6647 8.59023C27.9644 6.26719 24.6993 5.11097 20.8515 5.11097C16.6334 5.11097 13.0856 6.5483 10.2175 9.42256C7.34047 12.2972 5.91117 15.838 5.91117 20.053C5.91117 23.9878 7.2617 27.4055 9.95292 30.3059C12.6532 33.207 16.4389 34.6619 21.3192 34.6619C25.1136 34.6619 28.9794 33.6539 32.9239 31.6295L34.4504 35.1259C30.2323 37.264 25.8463 38.3334 21.3196 38.3334C15.3013 38.3334 10.5273 36.5282 6.97945 32.9263C3.44066 29.3248 1.66675 25.0218 1.66675 20.0262C1.66675 14.8032 3.52927 10.439 7.25308 6.93371C10.9765 3.41941 15.4773 1.66675 20.7457 1.66675C25.7142 1.66675 29.8881 3.18271 33.2591 6.19753C36.6391 9.2209 38.3334 13.0334 38.3334 17.6343C38.3334 20.973 37.3804 23.9523 35.483 26.5638C33.5856 29.1667 31.2825 30.4725 28.5556 30.4725C26.4375 30.4725 24.9729 29.5876 24.1606 27.8084C22.678 29.6573 20.8692 30.5776 18.7334 30.5776C16.5452 30.5776 14.6654 29.6752 13.1118 27.8525C11.55 26.0383 10.7734 23.6545 10.7734 20.6927C10.7734 17.6428 11.6472 15.1715 13.4035 13.2607C15.1684 11.3504 17.2598 10.395 19.6864 10.395C22.0339 10.395 23.7192 11.1312 24.7518 12.6032L24.9639 10.8065H29.4114V10.8069ZM19.0694 26.3976C20.4458 26.3976 21.6901 25.7319 22.8023 24.3997C23.914 23.0764 24.4703 21.3498 24.4703 19.2289C24.4703 18.0282 24.0466 16.9596 23.1908 16.0042C22.3432 15.0578 21.2934 14.5844 20.0491 14.5844C18.7076 14.5844 17.5954 15.1715 16.713 16.346C15.8391 17.5116 15.3981 19.0366 15.3981 20.9033C15.3981 22.4893 15.7337 23.8036 16.4221 24.838C17.1011 25.8716 17.9835 26.3976 19.0694 26.3976Z" fill="#EBE050"></path>
          </svg>
          <p class="is-size-5 has-text-grey mt-12">hello@wireframes.org</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 #1046

Bulma

Bendis

<div>
  <nav class="is-relative 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="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>
        <div class="navbar-item"><a class="button is-outlined is-white" href="#">Sign Up</a></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 #1047

Bulma

Bendis

<section class="is-relative section pt-24 py-40-desktop">
  <img class="image is-hidden-mobile is-hidden-tablet-only is-absolute is-top-0 is-left-0 is-fullheight has-mw-md has-mw-xl-desktop has-mw-3xl-widescreen clip-path-right-top" 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-md mx-auto mr-0-desktop">
      <h1 class="title is-size-3 has-leading-3 has-text-primary mb-8">Lorem ipsum</h1>
      <div class="is-flex mb-8">
        <div class="is-flex-shrink-0">
          <svg width="26" height="21" viewbox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8075 15.5254L23.3675 0.965393L26 3.59789L8.8075 20.8229L0 12.0479L2.665 9.38289L8.8075 15.5254Z" fill="#3C74F9"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="is-size-5 has-leading-4 has-text-primary has-text-weight-semibold mb-2">Quick problem-solving contact</h3>
          <p class="has-text-grey has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </div>
      </div>
      <div class="is-flex mb-8">
        <div class="is-flex-shrink-0">
          <svg width="26" height="21" viewbox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8075 15.5254L23.3675 0.965393L26 3.59789L8.8075 20.8229L0 12.0479L2.665 9.38289L8.8075 15.5254Z" fill="#3C74F9"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="is-size-5 has-leading-4 has-text-primary has-text-weight-semibold mb-2">Quick problem-solving contact</h3>

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

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <div class="container">
    <div class="columns is-vcentered mb-20">
      <div class="is-hidden-mobile column is-2">
        <a class="button w-16 h-16 p-0 is-outlined is-light" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 24L14.115 21.885L5.745 13.5L24 13.5L24 10.5L5.745 10.5L14.13 2.13L12 -5.24537e-07L1.38281e-06 12L12 24Z" fill="#A0CDFA"></path>
          </svg>
        </a>
      </div>
      <div class="column is-8">
        <div class="has-mw-2xl mx-auto has-text-centered">
          <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 is-size-5 has-leading-4 has-text-white 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-2 has-text-centered-mobile has-text-right-tablet">
        <a class="is-hidden-tablet button w-16 h-16 mr-4 p-0 is-outlined is-light" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 24L14.115 21.885L5.745 13.5L24 13.5L24 10.5L5.745 10.5L14.13 2.13L12 -5.24537e-07L1.38281e-06 12L12 24Z" fill="#A0CDFA"></path>
          </svg>
        </a>
        <a class="button w-16 h-16 p-0 is-outlined is-light" 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 #1049

Bulma

Bendis

<section class="is-relative section py-24 has-background-primary is-overflow-hidden">
  <img class="image is-absolute is-top-0 mt-16" style="left: 50%; transform: translateX(-50%);" src="bendis-assets/images/frame-center-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-white">Get our Free Mobile App</h2>
          <p class="has-mw-md subtitle is-size-5 has-leading-6 has-text-light 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.png" alt="">
            </a>
            <a class="is-block" href="#">
              <img style="height: 50px;" src="bendis-assets/images/google-play.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 #1050

Bulma

Bendis

<section class="is-relative section py-32">
  <img class="is-absolute is-top-0 is-left-0 mt-16" src="bendis-assets/images/lines-left.png" alt="">
  <div class="container">
    <div class="has-mw-md mx-auto">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space">Sign up</span>
      <h3 class="title is-size-4 has-text-primary">Create new 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 #1051

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-20">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">Lorem ipsum</span>
      <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 has-leading-4 has-text-grey 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 is-multiline">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="has-mw-md mx-auto">
          <img class="image is-fullwidth" style="height: 220px; object-fit: cover;" src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=801&amp;q=80" alt="">
          <div class="pt-6 pb-16 px-6 has-background-white has-text-centered">
            <h3 class="is-size-4 has-text-weight-semibold has-text-primary mb-1">Peter Prada</h3>
            <span class="has-text-grey has-text-weight-medium">CEO &amp; Founder</span>
            <div class="mt-8 buttons is-centered">
              <a class="button py-1 px-3 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>
                  </mask>
                </svg>
              </a>
              <a class="button py-1 px-3 is-light has-text-primary" 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 #1052

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-12 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">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-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-inline-block mx-auto">
        <div class="control mb-4">
          <label class="radio is-flex is-align-items-center">
            <input type="radio">
            <span class="pl-4 is-size-5 has-text-primary has-text-weight-medium">Lifetime license</span>
            <div class="is-inline-block ml-4 w-16 py-1 has-background-primary">
              <span class="is-size-7 has-text-white has-text-weight-bold">150$</span>
            </div>
          </label>
        </div>
        <div class="control">
          <label class="radio is-flex is-align-items-center">
            <input type="radio">
            <span class="pl-4 is-size-5 has-text-grey">Monthly license</span>
            <div class="is-inline-block ml-4 w-16 py-1 has-background-info-light">
              <span class="is-size-7 has-text-primary has-text-weight-bold">85$</span>
            </div>
          </label>

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

Bulma

Bendis

<section class="is-relative section pt-24 py-40-desktop">
  <img class="image is-hidden-mobile is-hidden-tablet-only is-absolute is-top-0 is-right-0 is-fullheight has-mw-md has-mw-xl-desktop has-mw-3xl-widescreen clip-path-left-top" 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-md mx-auto mx-0-desktop">
      <h1 class="title is-size-3 has-leading-3 has-text-primary mb-8">Lorem ipsum</h1>
      <div class="is-flex mb-8">
        <div class="is-flex-shrink-0">
          <svg width="26" height="21" viewbox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8075 15.5254L23.3675 0.965393L26 3.59789L8.8075 20.8229L0 12.0479L2.665 9.38289L8.8075 15.5254Z" fill="#3C74F9"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="is-size-5 has-leading-4 has-text-primary has-text-weight-semibold mb-2">Quick problem-solving contact</h3>
          <p class="has-text-grey has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </div>
      </div>
      <div class="is-flex mb-8">
        <div class="is-flex-shrink-0">
          <svg width="26" height="21" viewbox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.8075 15.5254L23.3675 0.965393L26 3.59789L8.8075 20.8229L0 12.0479L2.665 9.38289L8.8075 15.5254Z" fill="#3C74F9"></path>
          </svg>
        </div>
        <div class="ml-4">
          <h3 class="is-size-5 has-leading-4 has-text-primary has-text-weight-semibold mb-2">Quick problem-solving contact</h3>

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

Bulma

Bendis

<section class="section py-12">
  <div class="container">
    <div class="columns is-mobile is-multiline">
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile is-4-tablet is-2-widescreen">
        <div class="is-flex has-mw-xs mx-auto is-align-items-center py-6 px-8" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/amazon.svg" alt="">
        </div>
      </div>
      <div class="column is-6-mobile 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 #1055

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto has-text-centered mb-24">
      <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 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 is-multiline -mb-16">
      <div class="column is-6-tablet is-4-widescreen mb-16">
        <div class="is-relative has-mw-xs mx-auto is-fullheight pt-14 pb-8 px-12 has-background-primary">
          <span class="is-absolute is-top-0 -mt-10 title is-size-1 has-text-weight-bold has-text-warning" style="left: 50%; transform: translateX(-50%);">1</span>
          <div class="has-mw-xs mx-auto has-text-centered">
            <h3 class="is-size-5 has-leading-4 has-text-white has-text-weight-semibold mb-4">Making changes simple and easy</h3>
            <p class="has-text-white has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
      </div>
      <div class="column is-6-tablet is-4-widescreen mb-16">
        <div class="is-relative has-mw-xs mx-auto is-fullheight pt-14 pb-8 px-12 has-background-primary">
          <span class="is-absolute is-top-0 -mt-10 title is-size-1 has-text-weight-bold has-text-warning" style="left: 50%; transform: translateX(-50%);">2</span>
          <div class="has-mw-xs mx-auto has-text-centered">
            <h3 class="is-size-5 has-leading-4 has-text-white has-text-weight-semibold mb-4">Fusce mauris ligula, tincidunt vel</h3>
            <p class="has-text-white has-leading-6">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</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 #1056

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <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-light.svg" alt="" style="height: 28px" width="auto">
        </a>
        <p><small class="has-text-info">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-white" href="#">Company</a></li>
          <li class="mr-4 mr-10-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-white" href="#">Pages</a></li>
          <li class="mr-4 mr-10-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-white" href="#">Legal</a></li>
          <li class="mr-4 mr-16-desktop mb-4"><a class="is-size-7 has-text-weight-medium has-text-white" 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 #1057

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <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-white 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 #1058

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-vcentered mb-20">
      <div class="is-hidden-mobile column is-2">
        <a class="button w-16 h-16 p-0 is-outlined is-primary" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 24L14.115 21.885L5.745 13.5L24 13.5L24 10.5L5.745 10.5L14.13 2.13L12 -5.24537e-07L1.38281e-06 12L12 24Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="column is-8">
        <div class="has-mw-2xl mx-auto has-text-centered">
          <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 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>
          <a class="button is-warning" href="#">Try demo</a>
        </div>
      </div>
      <div class="column is-2 has-text-centered-mobile has-text-right-tablet">
        <a class="is-hidden-tablet button w-16 h-16 p-0 mr-4 is-outlined is-primary" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 24L14.115 21.885L5.745 13.5L24 13.5L24 10.5L5.745 10.5L14.13 2.13L12 -5.24537e-07L1.38281e-06 12L12 24Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="button w-16 h-16 p-0 is-outlined is-primary" 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 #1059

Bulma

Bendis

<section>
  <div class="section">
    <div class="container">
      <div class="has-mw-2xl mx-auto mb-20">
        <nav class="breadcrumb is-centered has-succeeds-separator mb-6" aria-label="breadcrumbs">
          <ul class="is-uppercase has-text-weight-semibold">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li class="is-active"><a href="#" aria-current="page">Article</a></li>
          </ul>
        </nav>
        <h1 class="has-text-centered title is-size-3-mobile is-size-2 has-leading-3 has-text-primary mb-8">Lorem ipsum dolor sit amet consectutar</h1>
        <div class="is-flex is-align-items-center is-justify-content-center">
          <img class="image" style="width: 57px; height: 57px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <div class="pl-6">
            <h4 class="is-size-5 has-text-weight-semibold has-text-grey">Peter Prada</h4>
            <span class="is-size-7 has-text-info has-text-weight-semibold">10 jun 2022 | 19:40</span>
          </div>
        </div>
      </div>
      <img class="image is-fullwidth mb-20" 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-md-mobile has-mw-md-tablet has-mw-xl-widescreen mx-auto">
        <p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque eveniet est laborum exercitationem!</p>
        <p class="is-size-5 has-leading-6 has-text-grey mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</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 #1060

Bulma

Bendis

<section class="section py-24 has-background-primary">
  <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-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 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-white">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.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

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

Get the code for 13,400+ components

Bulma Component #1042

Get the code for 13,400+ components

Bulma Component #1043

Get the code for 13,400+ components

Bulma Component #1044

Get the code for 13,400+ components

Bulma Component #1045

Get the code for 13,400+ components

Bulma Component #1046

Get the code for 13,400+ components

Bulma Component #1047

Get the code for 13,400+ components

Bulma Component #1048

Get the code for 13,400+ components

Bulma Component #1049

Get the code for 13,400+ components

Bulma Component #1050

Get the code for 13,400+ components

Bulma Component #1051

Get the code for 13,400+ components

Bulma Component #1052

Get the code for 13,400+ components

Bulma Component #1053

Get the code for 13,400+ components

Bulma Component #1054

Get the code for 13,400+ components

Bulma Component #1055

Get the code for 13,400+ components

Bulma Component #1056

Get the code for 13,400+ components

Bulma Component #1057

Get the code for 13,400+ components

Bulma Component #1058

Get the code for 13,400+ components

Bulma Component #1059

Get the code for 13,400+ components

Bulma Component #1060

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