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

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-16 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
      <h2 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor</h2>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="is-relative is-fullheight py-16 px-10 has-background-white">
          <div class="is-absolute is-top-0 is-left-0 is-flex is-align-items-center w-20 h-12 px-4 clip-path-right-top has-background-info-light">
            <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 -0.0432129L0 12.7835L13 25.6101L26 12.7835L13 -0.0432129ZM3.06377 12.7835L13 2.97971L17.2022 7.12593L15.6702 8.63755L13 6.0036L6.12852 12.7835L8.79775 15.4181L7.2657 16.9297L3.06377 12.7835ZM16.8087 12.7835L13 16.5423L9.1923 12.7835L13 9.02652L16.8087 12.7835ZM8.79775 18.4413L10.3298 16.9297L13 19.5633L19.8725 12.7835L17.2022 10.1489L18.7343 8.63723L22.9362 12.7835L13 22.5872L8.79775 18.4413Z" fill="#A0CDFA"></path>
            </svg>
          </div>
          <div>
            <h3 class="is-size-5 has-text-weight-semibold has-text-primary mb-2">Mauris vitae ex ut lectus cursus ornare?</h3>
            <ul class="has-text-grey">
              <li class="mb-2">&bull; Etiam pellentesque non nibh</li>
              <li class="mb-2">&bull; Mauris posuere</li>
              <li class="mb-2">&bull; Tellus sit amet tempus vestibulum</li>
              <li>&bull; Erat augue imperdiet neque</li>
            </ul>
          </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 #982

Bulma

Bendis

<section class="is-relative section pt-24 pb-24-desktop">
  <div class="is-hidden-mobile is-hidden-tablet-only is-absolute is-top-0 is-right-0 clip-path-left-top has-mw-xl has-mw-xl-desktop has-mw-3xl-fullhd is-fullwidth is-fullheight" style="background-image: url('https://images.unsplash.com/photo-1613946642700-36bde627698e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80');">
    <div class="is-flex pl-24 is-align-items-center is-justify-content-center is-fullwidth is-fullheight">
      <div class="has-mw-sm">
        <svg width="55" height="42" viewbox="0 0 55 42" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M30.8896 41V41.5H31.3896H50.8896H51.3896V41V22.3559V21.884L50.9184 21.8568L44.3006 21.4749L53.4557 1.20582L53.7745 0.5H53H45.7403H45.4588L45.3128 0.740573L30.9622 24.3846L30.8896 24.5042V24.6441V41ZM0.5 41V41.5H1H20.5H21V41V22.3559V21.8843L20.5291 21.8568L13.9952 21.4754L23.1505 1.20582L23.4693 0.5H22.6948H15.4351H15.1545L15.0083 0.73946L0.573246 24.3835L0.5 24.5035V24.6441V41Z" stroke="#EBE050"></path>
        </svg>
        <h3 class="is-size-4 has-text-white has-text-weight-medium mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</h3>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-tablet is-6-desktop">
        <div class="has-mw-md mx-auto">
          <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-2">Sign in</span>
          <h3 class="title is-size-3 has-leading-3 has-text-primary">Sign in to your account</h3>
          <form action="">
            <div class="control mb-2">
              <input class="input" type="password" placeholder="Password">
            </div>
            <div class="control mb-6">
              <input class="input" type="password" placeholder="Repeat password">
            </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 #983

Bulma

Bendis

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-3-widescreen">
        <div>
          <h4 class="title is-size-4 has-text-primary mb-4">4,536</h4>
          <span class="is-size-7 has-text-grey is-uppercase">Dolor sit amet consectutar</span>
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div>
          <h4 class="title is-size-4 has-text-primary mb-4">356</h4>
          <span class="is-size-7 has-text-grey is-uppercase">Dolor sit amet consectutar</span>
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div>
          <h4 class="title is-size-4 has-text-primary mb-4">1,053</h4>
          <span class="is-size-7 has-text-grey is-uppercase">Dolor sit amet consectutar</span>
        </div>
      </div>
      <div class="column is-6-tablet is-3-widescreen">
        <div>
          <h4 class="title is-size-4 has-text-primary mb-4">4,431</h4>

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

Bulma

Bendis

<section class="is-relative section pt-24 pb-52 has-background-white is-overflow-hidden">
  <div class="is-hidden-tablet is-absolute is-top-0 is-left-0 has-background-primary" style="width: 100%; height: 100%;"></div>
  <div class="is-hidden-mobile is-absolute is-top-0 -mt-16 has-background-primary triangle-bottom" style="left: 50%; transform: translateX(-50%); width: 100%; height: 100%;"></div>
  <div class="is-hidden-tablet is-absolute is-top-0 is-left-0 has-background-primary triangle-bottom" style="width: 100%; height: 45%;"></div>
  <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-white">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 has-text-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="has-mw-sm-mobile mx-auto has-mw-none-desktop">
      <div class="columns has-background-white">
        <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.585571L0 16.3722L16 32.1589L32 16.3722L16 0.585571ZM3.7708 16.3722L16 4.30609L21.172 9.40913L19.2864 11.2696L16 8.0278L7.5428 16.3722L10.828 19.6148L8.9424 21.4753L3.7708 16.3722ZM20.6876 16.3722L16 20.9985L11.3136 16.3722L16 11.7483L20.6876 16.3722ZM10.828 23.3357L12.7136 21.4753L16 24.7167L24.4584 16.3722L21.172 13.1297L23.0576 11.2692L28.2292 16.3722L16 28.4384L10.828 23.3357Z" fill="#A0CDFA"></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">

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

Bulma

Bendis

<section class="has-background-white is-overflow-hidden">
  <div class="is-flex is-fullwidth">
    <div class="is-hidden-mobile has-mw-xs -ml-32-mobile -ml-10-tablet clip-path-right-top">
      <img class="image is-fullwidth is-fullheight" style="object-fit: cover;" src="https://images.unsplash.com/photo-1541855492-581f618f69a0?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="is-hidden-mobile is-hidden-tablet-only has-mw-xs -ml-14 clip-path-left-top">
      <div class="is-relative is-fullheight">
        <img class="is-absolute is-bottom-0 is-left-0 mb-10 ml-14" style="z-index: 1;" src="bendis-assets/images/quote-white-icon.svg" alt="">
        <img class="image is-fullwidth is-fullheight" style="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>
    </div>
    <div class="is-flex-grow-1 is-fullwidth has-mw-2xl mx-auto py-24 px-5 px-20-widescreen">
      <div class="has-mw-lg mx-auto">
        <h3 class="is-size-4-mobile is-size-3-tablet has-leading-4 has-text-primary has-text-weight-medium mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</h3>
        <div class="is-flex-widescreen is-align-items-center">
          <div class="is-flex mb-6 mb-0-widescreen mr-10-widescreen">
            <a class="button w-16 h-16 is-outlined is-primary 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 w-16 h-16 is-outlined is-primary 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>

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

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <div class="px-8 px-16-tablet py-24 has-background-light">
      <div class="has-mw-lg has-mw-none-widescreen mx-auto">
        <div class="columns is-multiline is-vcentered">
          <div class="column is-12-tablet is-6-widescreen">
            <div class="is-inline-flex-tablet">
              <span class="mr-4">
                <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22.5292 7.64546L21.3926 17.2153C21.3076 17.8887 21.2656 18.5333 21.2656 19.1503C21.2656 20.0688 21.5974 20.5247 22.261 20.5247C23.3201 20.5247 24.3369 19.8028 25.311 18.3583C26.2851 16.9138 26.7649 15.161 26.7649 13.1073C26.7649 10.1414 25.692 7.72271 23.5318 5.8721C21.3716 4.01367 18.7595 3.08869 15.6813 3.08869C12.3068 3.08869 9.46855 4.23856 7.17412 6.53796C4.87247 8.8377 3.72903 11.6703 3.72903 15.0423C3.72903 18.1901 4.80946 20.9243 6.96243 23.2446C9.12263 25.5655 12.1512 26.7294 16.0555 26.7294C19.091 26.7294 22.1836 25.9231 25.3392 24.3035L26.5604 27.1006C23.1859 28.8111 19.6771 29.6666 16.0558 29.6666C11.2411 29.6666 7.42191 28.2225 4.58366 25.341C1.75262 22.4598 0.333496 19.0173 0.333496 15.0208C0.333496 10.8425 1.82351 7.35115 4.80257 4.54688C7.78129 1.73545 11.3819 0.333313 15.5967 0.333313C19.5715 0.333313 22.9105 1.54608 25.6073 3.95793C28.3114 6.37663 29.6668 9.42665 29.6668 13.1073C29.6668 15.7783 28.9044 18.1618 27.3865 20.251C25.8686 22.3333 24.0261 23.3779 21.8446 23.3779C20.1501 23.3779 18.9784 22.67 18.3286 21.2467C17.1425 22.7257 15.6954 23.462 13.9869 23.462C12.2362 23.462 10.7324 22.7401 9.48956 21.2819C8.24011 19.8305 7.61883 17.9235 7.61883 15.5541C7.61883 13.1142 8.31789 11.1371 9.72291 9.60851C11.1348 8.08025 12.808 7.31595 14.7493 7.31595C16.6272 7.31595 17.9754 7.9049 18.8015 9.08247L18.9712 7.64514H22.5292V7.64546ZM14.2556 20.118C15.3567 20.118 16.3522 19.5854 17.2419 18.5197C18.1313 17.461 18.5764 16.0798 18.5764 14.383C18.5764 13.4225 18.2373 12.5676 17.5527 11.8033C16.8747 11.0462 16.0348 10.6674 15.0394 10.6674C13.9662 10.6674 13.0764 11.1371 12.3705 12.0767C11.6714 13.0092 11.3186 14.2292 11.3186 15.7226C11.3186 16.9914 11.5871 18.0428 12.1378 18.8703C12.681 19.6972 13.3869 20.118 14.2556 20.118Z" fill="#3C74F9"></path>
                </svg>
              </span>
              <h3 class="is-size-4 has-text-weight-bold has-text-primary mb-2">Sign up to our newsletter</h3>
            </div>
            <p class="has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <div class="column is-12-tablet is-6-widescreen">
            <div class="field has-addons has-mw-md ml-auto-widescreen">
              <div class="control is-fullwidth">
                <input class="input has-background-white" type="text" placeholder="Type your e-mail">
              </div>
              <div class="control">
                <button class="button is-warning" type="submit">Action</button>
              </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 #987

Bulma

Bendis

<section class="is-relative section py-24 has-background-primary">
  <img class="image is-absolute is-top-0 is-left-0 is-fullheight is-fullwidth" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="columns">
      <div class="column is-5 is-4-fullhd mb-16 mb-0-tablet">
        <ul>
          <li class="mb-6"><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-white" href="#">Lorem ipsum</a></li>
          <li class="mb-6"><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-primary-dark" href="#">Dolor Sit</a></li>
          <li class="mb-6"><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-primary-dark" href="#">Amet consectutar</a></li>
          <li><a class="is-inline-block is-size-4-mobile is-size-3 has-text-weight-semibold has-text-primary-dark" href="#">Domor at elis</a></li>
        </ul>
      </div>
      <div class="column is-7 is-8-fullhd">
        <div class="columns is-mobile is-multiline">
          <div class="column is-4 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-8 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-8 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">

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

Bulma

Bendis

<section class="is-relative section py-64 is-overflow-hidden">
  <img class="is-absolute is-top-0 is-left-0 is-fullwidth is-fullheight image" style="object-fit: cover;" src="bendis-assets/images/red-image.png" alt="">
  <div class="container">
    <div class="has-mw-sm mx-auto has-text-centered">
      <span class="is-block is-size-7 has-text-warning has-text-weight-semibold is-uppercase mb-4">Error 404</span>
      <h2 class="title is-size-3 has-leading-3 has-text-white">Page not found</h2>
      <p class="has-mw-xs mx-auto subtitle is-size-5 has-leading-4 has-text-white mt-2 mb-5">Sorry! We are unable to find the page you are looking for</p>
      <div class="buttons is-centered"><a class="button is-warning" href="#">Go to back home</a><a class="button is-outlined is-white" href="#">Try again</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 #989

Bulma

Bendis

<div>
  <nav class="is-relative navbar py-2 has-background-primary">
    <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>
  </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;">
    <div class="navbar-backdrop is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column py-8 px-10 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: 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 #990

Bulma

Bendis

<div class="is-fixed is-bottom-0 is-left-0 is-right-0" tyle="z-index: 50;">
  <div class="section py-0 mb-12">
    <div class="is-inline-block py-10 px-8 has-background-dark">
      <div class="is-flex-tablet is-align-items-center">
        <div class="has-mw-xs mb-10-mobile">
          <h3 class="title is-size-4 has-text-white mb-2">Cookie Policy</h3>
          <p class="is-size-7 has-text-info-light">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
        </div>
        <div class="pl-6-tablet">
          <div class="buttons"><a class="button is-warning" href="#">Accept</a><a class="button is-outlined is-white" href="#">Decline</a></div>
        </div>
      </div>
    </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 #991

Bulma

Bendis

<section class="is-relative section py-24 py-40-tablet has-background-primary 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-light" style="opacity: 80%;">CONTACTS</h2>
  </div>
  <img class="is-hidden-mobile is-absolute is-top-0 is-right-0 is-fullheight has-mw-md has-mw-3xl-widescreen" src="bendis-assets/images/map2.png" alt="">
  <div class="container">
    <div class="has-mw-md mx-auto-mobile has-mw-2xl-tablet">
      <h2 class="title is-size-4-mobile is-size-3 has-text-white">Got questions?</h2>
      <p class="has-mw-xs is-size-5 has-text-white mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
      <div class="columns">
        <div class="column is-6">
          <div class="py-20 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-6">
          <div class="py-20 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>
        </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 #992

Bulma

Bendis

<section class="section py-12 has-background-primary">
  <div class="container">
    <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>
    </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 #993

Bulma

Bendis

<section class="is-relative section py-24">
  <div class="is-hidden-mobile is-hidden-tablet-only has-mw-md-desktop-only is-absolute is-top-0 is-right-0 mt-24">
    <a class="is-absolute is-inline-block has-text-white" href="#" style="top: 50%; left: 50%; z-index: 2; transform: translate(-50%,-50%);">
      <svg width="58" height="58" viewbox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M40.3769 30.1154L21.9731 40.7115C21.5715 41.18 20.8688 41.2469 20.4004 40.8454C20.0323 40.5442 19.9096 40.0423 20.0769 39.5962V18.4038C19.8538 17.8238 20.1438 17.1881 20.7238 16.965C21.17 16.7977 21.6719 16.9204 21.9731 17.2885L40.3769 27.8846C40.9904 28.1635 41.2581 28.8996 40.9792 29.5131C40.8565 29.7808 40.6446 29.9927 40.3769 30.1154ZM58 29C58 45.0169 45.0169 58 29 58C12.9831 58 0 45.0169 0 29C0 12.9831 12.9831 0 29 0C45.0169 0 58 12.9831 58 29ZM53.5385 29C53.5385 15.4481 42.5519 4.46154 29 4.46154C15.4481 4.46154 4.46154 15.4481 4.46154 29C4.46154 42.5519 15.4481 53.5385 29 53.5385C42.5519 53.5385 53.5385 42.5519 53.5385 29Z" fill="white"></path>
      </svg>
    </a>
    <div class="is-absolute is-top-0 is-left-0 is-fullwidth is-fullheight has-background-primary" style="opacity: 50%; z-index: 1;"></div>
    <img class="image is-fullwidth is-fullheight" style="width: 556px; height: 521px; 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="container">
    <div class="has-mw-lg mx-auto ml-0-desktop">
      <span class="is-block 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-4 mb-8">Lorem ipsum dolor sit amet consectetur</h2>
      <div class="columns is-multiline -mb-8">
        <div class="column is-6 mb-8">
          <div class="has-mw-xs mx-auto">
            <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>
        <div class="column is-6 mb-8">

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

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-4-desktop mb-16 mb-0-desktop">
        <div class="has-mw-xs mx-auto has-text-centered">
          <div class="is-inline-flex w-24 h-16 -mr-8 mb-8 is-align-items-center is-justify-content-center has-background-warning clip-path-both">
            <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 -0.0533447L0 15.7333L16 31.52L32 15.7333L16 -0.0533447ZM3.7708 15.7333L16 3.66718L21.172 8.77022L19.2864 10.6307L16 7.38888L7.5428 15.7333L10.828 18.9759L8.9424 20.8364L3.7708 15.7333ZM20.6876 15.7333L16 20.3596L11.3136 15.7333L16 11.1094L20.6876 15.7333ZM10.828 22.6968L12.7136 20.8364L16 24.0778L24.4584 15.7333L21.172 12.4907L23.0576 10.6303L28.2292 15.7333L16 27.7995L10.828 22.6968Z" fill="#1633AB"></path>
            </svg>
          </div>
          <div class="ml-7">
            <h3 class="title is-size-5 has-leading-4 has-text-primary is-uppercase mb-4">Spectacular team plan</h3>
            <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-12 is-4-desktop mb-16 mb-0-desktop">
        <div class="has-mw-xs mx-auto has-text-centered">
          <div class="is-inline-flex w-24 h-16 -mr-8 mb-8 is-align-items-center is-justify-content-center has-background-warning clip-path-both">
            <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.3333 0V2.64111C24.0733 3.30415 29.3333 8.93644 29.3333 15.7867C29.3333 22.6357 24.0733 28.2676 17.3333 28.9306V31.5733C25.5457 30.9016 32.0001 24.0952 32.0001 15.7867C32.0001 7.47696 25.5457 0.673301 17.3333 0Z" fill="#1633AB"></path>
              <path d="M14.6668 28.9306C7.9296 28.2676 2.6668 22.6357 2.6668 15.7867C2.6668 8.93683 7.9296 3.30415 14.6668 2.64111V0C6.456 0.673301 0 7.47696 0 15.7867C0 24.0952 6.456 30.9016 14.6668 31.5733V28.9306Z" fill="#1633AB"></path>
              <path d="M8.12006 14.4712C8.75526 10.7389 12.0365 7.89333 16.0001 7.89333C19.9637 7.89333 23.2449 10.7389 23.8801 14.4712H26.5741C25.9181 9.28098 21.4405 5.26208 16.0001 5.26208C10.5625 5.26208 6.08326 9.28098 5.42566 14.4712H8.12006Z" fill="#1633AB"></path>
              <path d="M23.88 17.1021C23.2448 20.8328 19.9636 23.68 16 23.68C12.0364 23.68 8.75522 20.8328 8.12002 17.1021H5.42603C6.08323 22.2923 10.5624 26.3112 16 26.3112C21.4404 26.3112 25.918 22.2923 26.5744 17.1021H23.88Z" 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 #995

Bulma

Bendis

<section class="is-relative section pt-24 pb-0 has-background-primary">
  <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="has-mw-4xl mx-auto mb-16 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
      <h1 class="title is-size-3-mobile is-size-2 has-leading-3 has-text-white">Take quick action that increases your brand&apos;s regular profit.</h1>
      <p class="has-mw-2xl mx-auto subtitle is-size-5 has-leading-4 has-text-light mt-6 mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div 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>
    <img class="image mx-auto" src="bendis-assets/images/3-devices.png" alt="">
  </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 #996

Bulma

Bendis

<section class="is-overflow-hidden">
  <div class="pt-96" style="background-image: url('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'); background-size: cover; background-repeat: no-repeat;">
    <div class="pb-12 pb-24-tablet pt-96 has-background-white clip-path-triangle -mx-16-mobile">
      <div class="section py-0">
        <div class="container">
          <div class="has-mw-2xl mx-auto px-32-mobile">
            <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-4-mobile is-size-3-tablet is-size-2-desktop has-text-primary mb-8">Lorem ipsum dolor sit amet consectutar</h1>
            <div class="has-text-centered-mobile is-flex-tablet is-align-items-center is-justify-content-center">
              <img class="image mx-auto-mobile" 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-tablet">
                <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>
        </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 #997

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-4-widescreen has-min-fullheight">
        <div class="is-relative has-mw-md mx-auto pb-20 has-min-fullheight">
          <img class="is-absolute is-bottom-0 is-left-0" src="bendis-assets/images/triangle-light-with-circle.svg" alt="">
          <div class="is-relative has-mw-xs mx-auto pt-16">
            <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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          </div>
        </div>
      </div>
      <div class="column is-12 is-4-widescreen">
        <div class="is-relative has-mw-md mx-auto is-fullheight pt-20 pb-10 px-10 has-background-primary">
          <div class="is-absolute is-top-0 is-left-0 is-inline-flex pl-16 pr-6 py-3 is-align-items-center has-background-dark has-text-weight-semibold is-uppercase clip-path-right-top-sm" style="width: 190px;">
            <span class="is-size-7 has-letter-space has-text-white">Pro</span>
          </div>
          <div class="is-flex is-align-items-end mb-8">
            <h3 class="is-flex is-align-items-start has-text-white has-text-weight-semibold">
              <span class="is-size-1">$65</span>
              <span class="is-size-3">99</span>
            </h3>
            <small class="pl-4 pb-3 has-text-primary-light">/per month</small>

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

Bulma

Bendis

<section class="section py-24">
  <div class="container">
    <div class="has-mw-2xl mx-auto mb-16 has-text-centered">
      <span class="is-block has-text-info has-text-weight-semibold is-uppercase has-letter-space mb-4">NEW FEATURE</span>
      <h2 class="title is-size-3 has-leading-3 has-text-primary">Lorem ipsum dolor</h2>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="is-relative is-fullheight py-16 px-10">
          <div class="is-absolute is-top-0 is-left-0 is-flex is-align-items-center w-20 h-12 px-4 clip-path-right-top has-background-warning has-text-primary">
            <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 -0.0432129L0 12.7835L13 25.6101L26 12.7835L13 -0.0432129ZM3.06377 12.7835L13 2.97971L17.2022 7.12593L15.6702 8.63755L13 6.0036L6.12852 12.7835L8.79775 15.4181L7.2657 16.9297L3.06377 12.7835ZM16.8087 12.7835L13 16.5423L9.1923 12.7835L13 9.02652L16.8087 12.7835ZM8.79775 18.4413L10.3298 16.9297L13 19.5633L19.8725 12.7835L17.2022 10.1489L18.7343 8.63723L22.9362 12.7835L13 22.5872L8.79775 18.4413Z" fill="CurrentColor"></path>
            </svg>
          </div>
          <div>
            <h3 class="is-size-5 has-text-weight-semibold has-text-primary mb-2">Mauris vitae ex ut lectus cursus ornare?</h3>
            <ul class="has-text-grey">
              <li class="mb-2">&bull; Etiam pellentesque non nibh</li>
              <li class="mb-2">&bull; Mauris posuere</li>
              <li class="mb-2">&bull; Tellus sit amet tempus vestibulum</li>
              <li>&bull; Erat augue imperdiet neque</li>
            </ul>
          </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 #999

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="pb-10 border-b-primary-light">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-5 is-3-widescreen">
          <a class="is-inline-block title is-5 has-text-dark" href="#">
            <img class="image" src="bendis-assets/logos/bendis-blue.svg" alt="" style="height: 28px" width="auto">
          </a>
        </div>
        <div class="column is-7 is-9-widescreen">
          <ul class="is-flex is-flex-wrap-wrap is-justify-content-end -mb-2">
            <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-info" href="#">Company</a></li>
            <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-info" href="#">Pages</a></li>
            <li class="mr-4 mr-10-desktop mb-2"><a class="is-size-7 has-text-weight-medium has-text-info" href="#">Legal</a></li>
            <li class="mb-2"><a class="is-size-7 has-text-weight-medium has-text-info" href="#">Resources</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mt-10">
      <div class="columns is-vcentered">
        <div class="column is-6"><small class="has-text-grey">All rights reserved &copy; Wireframes Corporation 2022</small></div>
        <div class="column is-6">
          <div class="buttons is-justify-content-end">

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

Bulma

Bendis

<section class="section py-24 pb-32-desktop has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-4-widescreen">
        <div class="has-mw-xs mx-auto pb-10 border-b-light">
          <h2 class="is-size-4 has-text-weight-semibold has-leading-4 has-text-primary mb-2">Quick problem-solving contact</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>
      </div>
      <div class="column is-6-tablet is-4-widescreen">
        <div class="has-mw-xs mx-auto pb-10 border-b-light">
          <h2 class="is-size-4 has-text-weight-semibold has-leading-4 has-text-primary mb-2">Quick problem-solving contact</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">

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

Get the code for 13,400+ components

Bulma Component #982

Get the code for 13,400+ components

Bulma Component #983

Get the code for 13,400+ components

Bulma Component #984

Get the code for 13,400+ components

Bulma Component #985

Get the code for 13,400+ components

Bulma Component #986

Get the code for 13,400+ components

Bulma Component #987

Get the code for 13,400+ components

Bulma Component #988

Get the code for 13,400+ components

Bulma Component #989

Get the code for 13,400+ components

Bulma Component #990

Get the code for 13,400+ components

Bulma Component #991

Get the code for 13,400+ components

Bulma Component #992

Get the code for 13,400+ components

Bulma Component #993

Get the code for 13,400+ components

Bulma Component #994

Get the code for 13,400+ components

Bulma Component #995

Get the code for 13,400+ components

Bulma Component #996

Get the code for 13,400+ components

Bulma Component #997

Get the code for 13,400+ components

Bulma Component #998

Get the code for 13,400+ components

Bulma Component #999

Get the code for 13,400+ components

Bulma Component #1000

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