Bulma Components in Bendis library

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

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

Bulma

Bendis

<section class="section pt-24 pb-16">
  <div class="container">
    <div class="has-mw-md mx-auto mb-8 has-text-centered">
      <span class="has-text-info has-text-weight-semibold is-uppercase">Lorem ipsum</span>
      <h2 class="title is-size-4-mobile is-size-3 has-text-primary mt-3">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
    <div class="buttons is-centered mb-16"><a class="button is-primary" href="#">Active demo</a><a class="button is-white has-text-primary has-background-light" href="#">Normal Tab</a><a class="button is-white has-text-primary has-background-light" href="#">Normal Tab</a><a class="button is-white has-text-primary has-background-light" href="#">Normal Tab</a></div>
    <div class="has-mw-2xl has-mw-none-widescreen mx-auto mb-16">
      <div class="columns is-multiline">
        <div class="column is-12 is-6-widescreen">
          <div class="columns is-multiline">
            <div class="column is-12 p-0">
              <img class="image is-fullwidth" style="height: 555px; 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: 277px; 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-6 p-0">
              <img class="image is-fullwidth" style="height: 277px; 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>
        </div>
        <div class="column is-12 is-6-widescreen">
          <div class="columns is-multiline">

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

Bulma

Bendis

<section class="section">
  <div class="container">
    <div class="has-mw-4xl mx-auto">
      <div class="py-4 px-6 pl-10-tablet pr-14-tablet">
        <button class="button is-light p-0 is-fullwidth is-align-items-center is-justify-content-space-between has-background-transparent has-text-left button-wrap-text">
          <span class="is-size-5 has-text-primary-dark">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
          <span>
            <svg width="16" height="12" viewbox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z" fill="#3C74F9"></path>
            </svg>
          </span>
        </button>
      </div>
      <div class="py-4 px-6 pl-10-tablet pr-14-tablet">
        <button class="button is-light p-0 is-fullwidth is-align-items-center is-justify-content-space-between has-background-transparent has-text-left button-wrap-text">
          <span class="is-size-5 has-text-info">Quick problem-solving contact</span>
          <span>
            <svg width="17" height="12" viewbox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.00244131 8.75L2.50244 11.25L8.00244 5.75L13.5024 11.25L16.0024 8.75L8.00244 0.75L0.00244131 8.75Z" fill="#1633AB"></path>
            </svg>
          </span>
        </button>
        <div class="has-mw-2xl">
          <p class="has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</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 #163

Bulma

Bendis

<section class="section py-12">
  <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-light" style="height: 140px;">
          <img class="image mx-auto" src="bendis-assets/logos/slack-color.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-color.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-color.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-color.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 #164

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="#">
          <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%);">
        <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>
        </a>
      </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>
    </div>
  </nav>
  <div class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-md" style="width: 75%; z-index: 9999;">

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

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline mb-16">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="has-mw-sm mx-auto has-background-white">
          <div class="is-relative">
            <img class="image is-fullwidth" style="height: 220px; object-fit: cover;" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            <div class="is-absolute is-top-0 is-left-0 is-flex is-align-items-center is-justify-content-center py-2 has-background-info-light clip-path-right-top-sm" style="width: 161px;">
              <span class="is-size-7 has-text-grey is-uppercase has-text-weight-semibold">Development</span>
            </div>
          </div>
          <div class="pt-10 px-10 pb-8">
            <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-4">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>
        </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 #166

Bulma

Bendis

<section class="is-relative section pb-0 py-40-desktop is-overflow-hidden">
  <div class="is-hidden-mobile is-hidden-tablet-only has-mw-xl-desktop has-mw-3xl-widescreen is-absolute is-left-0 -ml-20" style="top: 50%; transform: translateY(-50%);">
    <img class="image" style="object-fit: cover;" src="bendis-assets/images/computer-large.png" alt="">
  </div>
  <div class="container">
    <div class="has-mw-md mx-auto-mobile mx-auto-tablet-only ml-auto">
      <h2 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-primary">Lorem Ipsum dolor sit amet</h2>
      <p class="subtitle is-size-5 has-leading-6 mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="is-flex is-align-items-center mb-6">
        <div class="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-primary 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>
          </svg>
        </div>
        <p class="is-size-5 has-text-grey has-text-weight-medium">Lorem Ipsum dolor</p>
      </div>
      <div class="is-flex is-align-items-center mb-6">
        <div class="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-primary clip-path-right-top">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13 0V1.98083C18.055 2.47811 22 6.70233 22 11.84C22 16.9768 18.055 21.2007 13 21.698V23.68C19.1593 23.1762 24.0001 18.0714 24.0001 11.84C24.0001 5.60772 19.1593 0.504976 13 0Z" fill="#1633AB"></path>
            <path d="M11.0001 21.698C5.9472 21.2007 2.0001 16.9768 2.0001 11.84C2.0001 6.70262 5.9472 2.47811 11.0001 1.98083V0C4.842 0.504976 0 5.60772 0 11.84C0 18.0714 4.842 23.1762 11.0001 23.68V21.698Z" fill="#1633AB"></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 #167

Bulma

Bendis

<section class="is-relative section py-24 has-background-primary">
  <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-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">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">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">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 #168

Bulma

Bendis

<section class="is-relative section pt-24 pb-46-mobile pb-64 pb-96-tablet has-background-primary">
  <img class="image is-absolute is-bottom-0 is-left-0 is-fullwidth" style="object-fit: cover; height: 500px;" src="https://images.unsplash.com/photo-1562785072-c65ab858fcbc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
  <img class="image is-absolute is-top-0 is-right-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered mb-16">
      <h1 class="has-text-white title is-size-3-mobile is-size-2">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-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>
      <a class="button is-warning" href="#">Try demo</a>
    </div>
    <div class="columns has-background-white has-mw-md-mobile mx-auto">
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10 has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 0.585693L0 16.3724L16 32.159L32 16.3724L16 0.585693ZM3.7708 16.3724L16 4.30622L21.172 9.40926L19.2864 11.2697L16 8.02792L7.5428 16.3724L10.828 19.6149L8.9424 21.4754L3.7708 16.3724ZM20.6876 16.3724L16 20.9986L11.3136 16.3724L16 11.7484L20.6876 16.3724ZM10.828 23.3359L12.7136 21.4754L16 24.7168L24.4584 16.3724L21.172 13.1298L23.0576 11.2693L28.2292 16.3724L16 28.4385L10.828 23.3359Z" fill="#FA5158"></path>
          </svg>
          <h3 class="is-size-5 has-text-primary has-text-weight-semibold is-uppercase mt-4 mb-1">Spectacular team plan</h3>
          <p class="has-text-grey has-leading-6">Fairly assigning daily tasks to your employees</p>
        </div>
      </div>
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10 has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.333 0V2.66556C24.073 3.33474 29.333 9.01918 29.333 15.9328C29.333 22.8453 24.073 28.5293 17.333 29.1985V31.8657C25.5454 31.1877 31.9998 24.3183 31.9998 15.9328C31.9998 7.54619 25.5454 0.679536 17.333 0Z" fill="#FA5158"></path>
            <path d="M14.6668 29.1985C7.9296 28.5293 2.6668 22.8453 2.6668 15.9328C2.6668 9.01958 7.9296 3.33474 14.6668 2.66556V0C6.456 0.679536 0 7.54619 0 15.9328C0 24.3183 6.456 31.1877 14.6668 31.8657V29.1985Z" fill="#FA5158"></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 #169

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns mb-10 pb-10 border-b-grey">
      <div class="column is-8">
        <div class="columns is-mobile is-multiline">
          <div class="column is-6-mobile is-3-tablet mb-2">
            <h3 class="mb-4 title is-size-6 has-text-primary">Company</h3>
            <ul>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">About Us</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Careers</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Press</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="column is-6-mobile is-3-tablet mb-4">
            <h3 class="mb-4 title is-size-6 has-text-primary">Pages</h3>
            <ul>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Login</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Register</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Add list</a></li>
              <li class="mb-4"><a class="is-size-7 has-text-primary" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="column is-6-mobile is-3-tablet mb-4">

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

Bulma

Bendis

<section class="is-relative section pt-24">
  <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-primary">Get our Free Mobile App</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 class="is-flex is-justify-content-center">
        <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 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-primary 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 #171

Bulma

Bendis

<section class="is-relative section pt-24 pb-46-mobile pb-64 pb-96-tablet has-background-light">
  <img class="image is-absolute is-bottom-0 is-left-0 is-fullwidth" style="object-fit: cover; height: 500px;" src="https://images.unsplash.com/photo-1562785072-c65ab858fcbc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
  <img class="image is-absolute is-top-0 is-right-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered mb-16">
      <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-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>
      <a class="button is-warning" href="#">Try demo</a>
    </div>
    <div class="columns has-background-white has-mw-md-mobile mx-auto">
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10-widescreen has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 0.585693L0 16.3724L16 32.159L32 16.3724L16 0.585693ZM3.7708 16.3724L16 4.30622L21.172 9.40926L19.2864 11.2697L16 8.02792L7.5428 16.3724L10.828 19.6149L8.9424 21.4754L3.7708 16.3724ZM20.6876 16.3724L16 20.9986L11.3136 16.3724L16 11.7484L20.6876 16.3724ZM10.828 23.3359L12.7136 21.4754L16 24.7168L24.4584 16.3724L21.172 13.1298L23.0576 11.2693L28.2292 16.3724L16 28.4385L10.828 23.3359Z" fill="#FA5158"></path>
          </svg>
          <h3 class="is-size-5 has-text-primary has-text-weight-semibold is-uppercase mt-4 mb-1">Spectacular team plan</h3>
          <p class="has-text-grey has-leading-6">Fairly assigning daily tasks to your employees</p>
        </div>
      </div>
      <div class="column py-10 is-4">
        <div class="has-mw-xs mx-auto px-10-widescreen has-text-centered">
          <svg width="32" height="33" viewbox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.333 0V2.66556C24.073 3.33474 29.333 9.01918 29.333 15.9328C29.333 22.8453 24.073 28.5293 17.333 29.1985V31.8657C25.5454 31.1877 31.9998 24.3183 31.9998 15.9328C31.9998 7.54619 25.5454 0.679536 17.333 0Z" fill="#FA5158"></path>
            <path d="M14.6668 29.1985C7.9296 28.5293 2.6668 22.8453 2.6668 15.9328C2.6668 9.01958 7.9296 3.33474 14.6668 2.66556V0C6.456 0.679536 0 7.54619 0 15.9328C0 24.3183 6.456 31.1877 14.6668 31.8657V29.1985Z" fill="#FA5158"></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 #172

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

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

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

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

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

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

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

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

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

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

Bulma Components – Bendis Library

Framework

UI Library

Components

Bulma Component #161

Get the code for 13,400+ components

Bulma Component #162

Get the code for 13,400+ components

Bulma Component #163

Get the code for 13,400+ components

Bulma Component #164

Get the code for 13,400+ components

Bulma Component #165

Get the code for 13,400+ components

Bulma Component #166

Get the code for 13,400+ components

Bulma Component #167

Get the code for 13,400+ components

Bulma Component #168

Get the code for 13,400+ components

Bulma Component #169

Get the code for 13,400+ components

Bulma Component #170

Get the code for 13,400+ components

Bulma Component #171

Get the code for 13,400+ components

Bulma Component #172

Get the code for 13,400+ components

Bulma Component #173

Get the code for 13,400+ components

Bulma Component #174

Get the code for 13,400+ components

Bulma Component #175

Get the code for 13,400+ components

Bulma Component #176

Get the code for 13,400+ components

Bulma Component #177

Get the code for 13,400+ components

Bulma Component #178

Get the code for 13,400+ components

Bulma Component #179

Get the code for 13,400+ components

Bulma Component #180

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