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

Bulma

asitrastudio

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="is-fixed is-bottom-0 is-right-0 is-fullwidth" style="z-index: 50;">
    <div class="px-8 pt-8 pb-9 is-relative has-background-white" style="border-radius: 40px;">
      <div class="is-absolute is-top-0 is-right-0 mt-2 mr-5 mr-12-widescreen">
        <button x-on:click.prevent="open = false" class="button p-0 is-light has-background-white">
          <svg width="15" height="16" viewbox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
          </svg>
        </button>
      </div>
      <div class="section py-0">
        <div class="container">
          <div class="columns is-multiline is-vcentered">
            <div class="column is-1-tablet">
              <svg width="41" height="41" viewbox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.2266 18.7915C17.6418 18.7915 18.7891 17.6442 18.7891 16.229C18.7891 14.8138 17.6418 13.6665 16.2266 13.6665C14.8113 13.6665 13.6641 14.8138 13.6641 16.229C13.6641 17.6442 14.8113 18.7915 16.2266 18.7915Z" fill="black"></path>
                <path d="M31.6016 5.125C33.0168 5.125 34.1641 3.97773 34.1641 2.5625C34.1641 1.14727 33.0168 0 31.6016 0C30.1863 0 29.0391 1.14727 29.0391 2.5625C29.0391 3.97773 30.1863 5.125 31.6016 5.125Z" fill="black"></path>
                <path d="M36.7266 13.6665C38.1418 13.6665 39.2891 12.5192 39.2891 11.104C39.2891 9.68877 38.1418 8.5415 36.7266 8.5415C35.3113 8.5415 34.1641 9.68877 34.1641 11.104C34.1641 12.5192 35.3113 13.6665 36.7266 13.6665Z" fill="black"></path>
                <path d="M16.2266 27.3335C17.6418 27.3335 18.7891 26.1862 18.7891 24.771C18.7891 23.3558 17.6418 22.2085 16.2266 22.2085C14.8113 22.2085 13.6641 23.3558 13.6641 24.771C13.6641 26.1862 14.8113 27.3335 16.2266 27.3335Z" fill="black"></path>
                <path d="M24.7734 27.3335C26.1887 27.3335 27.3359 26.1862 27.3359 24.771C27.3359 23.3558 26.1887 22.2085 24.7734 22.2085C23.3582 22.2085 22.2109 23.3558 22.2109 24.771C22.2109 26.1862 23.3582 27.3335 24.7734 27.3335Z" fill="black"></path>
                <path d="M40.9026 18.5422C40.8648 18.1473 40.6906 17.7779 40.4101 17.4973C40.1295 17.2168 39.7601 17.0426 39.3651 17.0048C35.4183 16.6245 31.7266 14.8831 28.923 12.0792C26.1194 9.27531 24.3785 5.58347 23.9987 1.63658C23.9608 1.24164 23.7867 0.872192 23.5061 0.591645C23.2256 0.311098 22.8561 0.136948 22.4612 0.0990833C21.8137 0.035875 21.1611 0 20.5 0C16.4455 0 12.482 1.2023 9.11082 3.45487C5.73961 5.70744 3.11208 8.9091 1.56048 12.655C0.00888236 16.4009 -0.397086 20.5227 0.393911 24.4994C1.18491 28.476 3.13734 32.1287 6.00432 34.9957C8.8713 37.8627 12.524 39.8151 16.5007 40.6061C20.4773 41.3971 24.5991 40.9911 28.345 39.4395C32.0909 37.8879 35.2926 35.2604 37.5451 31.8892C39.7977 28.518 41 24.5545 41 20.5C41 19.8389 40.9641 19.1863 40.9026 18.5422ZM20.5 37.5833C15.9692 37.5833 11.624 35.7835 8.42027 32.5797C5.21652 29.376 3.41668 25.0308 3.41668 20.5C3.41668 15.9692 5.21652 11.624 8.42027 8.42026C11.624 5.21651 15.9692 3.41667 20.5 3.41667H20.7904C21.5018 7.61191 23.5003 11.4821 26.5091 14.4909C29.5179 17.4997 33.3881 19.4983 37.5833 20.2096C37.5833 20.307 37.5833 20.4026 37.5833 20.5C37.5784 25.0293 35.7769 29.3716 32.5743 32.5742C29.3716 35.7769 25.0293 37.5784 20.5 37.5833Z" fill="black"></path>
              </svg>
            </div>
            <div class="column is-7-tablet is-8-desktop">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1702

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title mb-20 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Get started quickly</h1>
    <div class="columns is-multiline">
      <div class="column is-6 mb-12 mb-0-desktop">
        <div class="has-mw-xl">
          <div class="px-0 py-10" style="border-bottom: 1px solid #CACACA;" x-data="{ accordion: false }">
            <button x-on:click="accordion = !accordion" class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">
              <h5 class="is-size-4-mobile is-size-3-tablet has-text-dark">De-risking your project</h5>
              <div class="button p-0 is-ghost ml-4 is-flex-shrink-0" style="border: none;">
                <span :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }" class="is-inline-block">
                    <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19.4961 10.4346L12.9483 3.88682L6.40058 10.4346" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M12.9453 22.2246L12.9453 4.06996" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </span>
              </div>
            </button>
            <div x-ref="container" :style="`transition: all 0.5s ease-in-out; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
                <p class="mt-6 is-size-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its</p>
            </div>
          </div>
          <div class="px-0 py-10" style="border-bottom: 1px solid #CACACA;" x-data="{ accordion: false }">
            <button x-on:click="accordion = !accordion" class="is-flex is-justify-content-space-between is-align-items-center is-fullwidth">

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

Bulma

asitrastudio

<section class="section is-relative">
  <img class="is-absolute is-top-0 is-left-0 is-fullwidth is-covered" style="object-fit: cover; height: 100%" src="asitrastudio-assets/http-codes/dark-photo-bg.png" alt="">
  <div class="container is-relative">
    <div class="has-mw-3xl mx-auto has-text-centered">
      <h2 class="title mb-10 is-size-2 is-size-1-tablet has-text-white" style="letter-spacing: -0.02em;">Meet our partners</h2>
      <p class="has-mw-md has-text-light mx-auto mb-12">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
      <div class="mb-n5 is-flex is-flex-wrap-wrap is-justify-content-center is-align-items-center">
        <img class="mb-5 mr-5 mr-10-tablet image" src="asitrastudio-assets/logo-clouds/brand-light1.png" alt="">
        <img class="mb-5 mr-10-tablet image" src="asitrastudio-assets/logo-clouds/brand-light2.png" alt="">
        <img class="mb-5 image" src="asitrastudio-assets/logo-clouds/brand-light3.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 #1704

Bulma

asitrastudio

<section class="is-relative is-clipped">
  <div class="is-fixed is-bottom-0 is-left-0 is-fullwidth pt-8 pb-10" style="z-index: 50;">
    <div class="is-flex px-6 is-justify-content-center">
      <div class="notification is-light is-light has-background-white is-inline-flex py-4 pl-5 pr-6 is-align-items-center is-rounded">
        <span class="mr-4">
          <svg width="21" height="22" viewbox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect y="0.5" width="21" height="21" rx="10.5" fill="#219653"></rect>
            <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="white"></path>
          </svg>
        </span>
        <p class="has-text-dark">Your settings have been saved</p>
      </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 #1705

Bulma

asitrastudio

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-7">
        <div class="halos-mw-md has-mw-xl-widescreen">
          <span class="has-text-light is-block mb-4 has-text-weight-medium">Lorem Ipsum</span>
          <h1 class="title is-size-3-mobile is-size-3-tablet is-size-2-desktop has-text-white mb-7" style="letter-spacing: -0.02em;">Share your travels with friends &amp; family</h1>
          <p class="is-size-6 has-text-grey-light">It is a long established fact that a reader will be distracted by the</p>
        </div>
      </div>
      <div class="column is-5">
        <div class="buttons">
          <a class="button mr-6-desktop is-white is-rounded" href="#">
            <span class="mr-2">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="button is-outlined is-white is-rounded" href="#">
            <span class="mr-2">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></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 #1706

Bulma

asitrastudio

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-16 columns is-multiline">
      <div class="column is-12-tablet is-4-desktop is-5-widescreen">
        <a class="is-inline-block" href="#">
          <img class="image is-fullwidth" style="height: 21px;" src="asitrastudio-assets/logos/logo-asitra-white.svg" alt="">
        </a>
      </div>
      <div class="column is-12-tablet is-8-desktop is-7-widescreen">
        <ul class="-mb-2 -mx-6 is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-end">
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Contact</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Blog</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Our Storry</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Careers</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Support</a></li>
          <li class="mb-2 px-6"><a class="is-inline-block is-size-6 has-text-light" href="#">Guides</a></li>
        </ul>
      </div>
    </div>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6">
        <span class="is-size-7 has-text-grey">&copy; 2023 Asitrastudio</span>
      </div>
      <div class="column is-6 has-text-right">

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

Bulma

asitrastudio

<section class="section pb-0 pt-12 pt-20-tablet has-background-white">
  <div class="container">
    <div class="has-mw-md mx-auto mb-20 has-text-centered">
      <span class="tag is-light mb-4 has-text-dark">Full Time</span>
      <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Download app</h2>
      <p class="has-mw-lg mb-8 is-size-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when</p>
      <div class="has-mw-xs mx-auto buttons is-centered is-flex-wrap-nowrap">
        <a class="mr-6 is-inline-block" href="#">
          <img class="image is-fullwidth" src="asitrastudio-assets/download/app-store.svg" alt="">
        </a>
        <a class="is-inline-block" href="#">
          <img class="image is-fullwidth" src="asitrastudio-assets/download/google.svg" alt="">
        </a>
      </div>
    </div>
    <img class="has-mw-3xl mx-auto is-block image is-fullwidth" src="asitrastudio-assets/download/phone-center.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 #1708

Bulma

asitrastudio

<section class="section has-background-white-ter" x-data="{ tab: '', showContent: false }" x-init="tab = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-20">
      <div class="mb-8 is-inline-block">
        <h1 class="title is-relative is-inline-block is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">
          <span>Selected projects</span>
          <span class="is-absolute is-top-0 is-right-0 -mt-5 -mr-2 is-block is-size-4 has-text-grey has-text-weight-medium">(21)</span>
        </h1>
      </div>
      <ul class="is-flex-tablet -mb-3 is-align-items-center">
        <li class="mb-3 mr-6"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab1.textContent }" href="#" style="max-height: 38px;">All</a></li>
        <li class="mb-3 mr-6"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab2.textContent }" href="#" style="max-height: 38px;">Villa</a></li>
        <li class="mb-3 mr-6"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab3.textContent }" href="#" style="max-height: 38px;">Residance</a></li>
        <li class="mb-3"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="button is-dark is-rounded px-5 is-size-7" :class="{ 'is-outlined': tab != $refs.tab4.textContent }" href="#" style="max-height: 38px;">Apartaments</a></li>
      </ul>
    </div>
    <div class="mb-6 columns is-multiline">
      <div class="column is-12-tablet is-7-desktop pb-6" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab2.textContent != tab }">
        <a class="is-block is-relative" href="#">
          <img class="is-block image is-fullwidth" style="object-fit: cover; border-radius: 40px; height: 648px;" src="asitrastudio-assets/projects/image-six-1.png" alt="">
          <div class="p-10 is-absolute is-bottom-0 is-left-0 is-fullwidth">
            <div class="mb-3">
              <span class="tag is-white mr-3 has-background-white">Spain, Girona</span>
              <span class="tag is-white has-background-white">2023</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1709

Bulma

asitrastudio

<section class="is-relative section has-background-white-ter" x-data="{ current: 0 }">
  <div class="container">
    <h1 class="title is-size-2 is-size-1-desktop mb-20" style="letter-spacing: -0.04em;">Testimonials</h1>
    <div class="columns">
      <div class="column is-5-tablet is-4-widescreen">
        <div>
          <button x-on:click="current = 0" class="button is-light is-block mb-8 py-6 px-6 px-12-desktop has-text-left" :class="{ 'has-background-white': current == 0, 'has-background-white-ter': current != 0 }" style="height: auto; border-radius: 30px;">
            <div class="is-flex align-items-center">
              <img class="image mr-6" style="width: 62px; height: 62px;" src="asitrastudio-assets/testimonials/avatar-circle1.png" alt="">
              <div>
                <span class="is-block mb-1">Wade Warren</span>
                <span class="is-size-7 has-text-grey">CEO, Since Industry</span>
              </div>
            </div>
          </button>
          <button x-on:click="current = 1" class="button is-light is-block mb-8 py-6 px-6 px-12-desktop has-text-left" :class="{ 'has-background-white': current == 1, 'has-background-white-ter': current != 1 }" style="height: auto; border-radius: 30px;">
            <div class="is-flex align-items-center">
              <img class="image mr-6" style="width: 62px; height: 62px;" src="asitrastudio-assets/testimonials/avatar-circle2.png" alt="">
              <div>
                <span class="is-block mb-1">Wade Warren</span>
                <span class="is-size-7 has-text-grey">CEO, Since Industry</span>
              </div>
            </div>
          </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 #1710

Bulma

asitrastudio

<section class="section has-background-white-ter" style="overflow: hidden;">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Services</h1>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-5-desktop">
        <img class="mx-auto mx-0-desktop is-block image is-fullwidth" src="asitrastudio-assets/services/photo-left-mid.png" alt="">
      </div>
      <div class="column is-7-desktop">
        <button class="button is-ghost has-text-left has-text-weight-normal px-0 mb-8 pb-6 is-fullwidth is-block" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
          <div class="is-flex is-fullwidth is-align-items-center">
            <span class="mr-8 is-inline-block">01</span>
            <span class="is-inline-block is-size-3">De-risking your project</span>
            <span class="ml-auto" :class="{ 'is-rotate-180': accordion, 'is-rotate-0': !accordion }">
              <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.8223 15.0312L12.4993 21.3542L6.17643 15.0313" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12.5 3.646L12.5 21.1772" stroke="black" stroke-width="1.61806" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </div>
          <div x-ref="container" :style="`transition: all 0.5s ease-in-out; white-space: normal; ${accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : 'max-height: 0px'}`" class="is-clipped">
            <p class="mt-6 pr-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
          </div>
        </button>
        <button class="button is-ghost has-text-left has-text-weight-normal px-0 mb-8 pb-6 is-fullwidth is-block" x-data="{ accordion: false }" x-on:click="accordion = !accordion">

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

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-12" style="letter-spacing: -0.04em;">FAQ</h1>
    <div class="-mb-20 columns is-multiline">
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">
          <h4 class="title mb-6 is-size-4">What is Cult Wine Investment?</h4>
          <p class="is-size-6 has-text-grey">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">
          <h4 class="title mb-6 is-size-4">What is Cult Wine Investment?</h4>
          <p class="is-size-6 has-text-grey">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">
          <h4 class="title mb-6 is-size-4">What services do you provide?</h4>
          <p class="is-size-6 has-text-grey">During this phase the design is developed to meet the required technical standards to meet building regulations and incorporate sustainability strategies.</p>
        </div>
      </div>
      <div class="column is-4-desktop is-6-tablet pb-20">
        <div class="has-mw-sm">

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

Bulma

asitrastudio

<section class="section has-background-primary">
  <div class="container">
    <div class="has-mw-md has-mw-none-desktop has-mw-lg-tablet mx-auto">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-12 is-6-desktop is-7-widescreen mb-20 mb-0-desktop">
          <div class="has-mw-xl">
            <span class="is-block mb-4 is-size-7 has-text-white">Lorem Ipsum</span>
            <h1 class="has-mw-xl title mb-12 has-text-white is-size-2" style="letter-spacing: -0.02em;">Keep up with our contant</h1>
            <p class="has-mw-sm subtitle has-text-white-bis is-size-6">It is a long established fact that a reader will be distracted by the readable content</p>
          </div>
        </div>
        <div class="column is-12-tablet is-5-widescreen is-6-desktop">
          <div>
            <span class="mb-4 ml-1 is-block is-size-5 has-text-white">Join to newsletter!</span>
            <div class="field is-flex-tablet is-justify-content-center">
              <div class="control is-fullwidth mr-0-mobile mr-3 mb-2 mb-0-tablet">
                <input class="input has-text-white has-background-transparent" type="email" placeholder="Enter your email">
              </div>
              <div class="control">
                <button class="button is-white is-fullwidth is-rounded" type="submit">Sign Up</button>
              </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 #1713

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-6">
        <h1 class="title is-size-2-mobile is-size-1-tablet" style="letter-spacing: -0.04em;">Blog</h1>
      </div>
      <div class="column is-6 has-text-right">
        <a class="button is-ghost px-0" href="#" style="height: 38px;">
          <span class="mr-2">See our blog</span>
          <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="mb-16 pb-16">
      <div class="columns is-multiline">
        <div class="column is-6">
          <a class="is-block" href="#">
            <img class="box p-0 mb-6 is-block image is-fullwidth" style="object-fit: cover; height: 290px;" src="asitrastudio-assets/blog/double-photo-medium1.png" alt="">
            <div class="has-mw-lg">
              <div class="mb-3">
                <span class="tag is-light mr-3">Interior</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1714

Bulma

asitrastudio

<section class="has-background-white">
  <div class="is-relative">
    <div class="container">
      <div class="has-mw-2xl-widescreen mx-auto mx-0-tablet px-5 pt-10 pb-24 pb-36-tablet">
        <a class="mb-24 mb-36-tablet is-inline-block" href="#">
          <img src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <div class="has-mw-md mx-auto has-text-centered">
          <form action="">
            <h3 class="mb-10 is-size-4 has-text-weight-medium has-text-dark" style="letter-spacing: -0.02em;">Sign in to asitrastudio</h3>
            <div class="mb-8">
              <input class="input mb-4 has-background-white has-text-dark" type="email" placeholder="E-mail">
              <div class="mb-6 is-relative">
                <input class="input has-background-white has-text-dark" type="password" placeholder="Password">
                <button class="button is-light has-background-white p-0 mt-5 mr-8 is-absolute is-top-0 is-right-0" style="height: auto;">
                  <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.1095 7.89167L7.89283 12.1083C7.33367 11.5492 7.01953 10.7908 7.01953 10C7.01953 9.60845 7.09665 9.22073 7.24649 8.85898C7.39634 8.49723 7.61596 8.16854 7.89283 7.89167C8.1697 7.6148 8.49839 7.39518 8.86014 7.24533C9.22189 7.09549 9.60961 7.01837 10.0012 7.01837C10.7919 7.01837 11.5503 7.33251 12.1095 7.89167Z" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M14.8518 4.80834C13.3935 3.70834 11.7268 3.10834 10.0018 3.10834C7.06016 3.10834 4.31849 4.84167 2.41016 7.84167C1.66016 9.01667 1.66016 10.9917 2.41016 12.1667C3.06849 13.2 3.83516 14.0917 4.66849 14.8083M7.01849 16.275C7.96849 16.675 8.97682 16.8917 10.0018 16.8917C12.9435 16.8917 15.6852 15.1583 17.5935 12.1583C18.3435 10.9833 18.3435 9.00834 17.5935 7.83334C17.3185 7.4 17.0185 6.99167 16.7102 6.60834" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12.9263 10.5833C12.8134 11.1646 12.5294 11.699 12.1106 12.1177C11.6919 12.5364 11.1576 12.8204 10.5763 12.9333M7.89297 12.1083L1.66797 18.3333M18.3346 1.66667L12.1096 7.89167" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
              <button class="button is-light is-rounded is-fullwidth" type="submit">Login</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 #1715

Bulma

asitrastudio

<section class="is-relative" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 is-white" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-start"><a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a></div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></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 #1716

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <div class="has-mw-xl has-mw-none-desktop mx-auto">
      <h1 class="title mb-20 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Get started quickly</h1>
      <div class="columns is-multiline">
        <div class="column is-12 is-4-desktop mb-8 mb-0-desktop">
          <div class="box px-10 pt-16 pb-12 has-background-white">
            <div class="has-mw-xs mx-auto has-text-centered">
              <span class="mb-8 is-block">
                <svg width="41" height="41" viewbox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5221 32.4582H13.668C6.83464 32.4582 3.41797 30.7498 3.41797 22.2082V13.6665C3.41797 6.83317 6.83464 3.4165 13.668 3.4165H27.3346C34.168 3.4165 37.5846 6.83317 37.5846 13.6665V22.2082C37.5846 29.0415 34.168 32.4582 27.3346 32.4582H26.4805C25.9509 32.4582 25.4384 32.7144 25.1138 33.1415L22.5513 36.5582C21.4238 38.0615 19.5788 38.0615 18.4513 36.5582L15.8888 33.1415C15.6155 32.7657 14.9834 32.4582 14.5221 32.4582Z" stroke="black" stroke-width="2.5625" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M27.3292 18.7917H27.3445" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M20.4893 18.7917H20.5047" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M13.6573 18.7917H13.6726" stroke="black" stroke-width="3.41667" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <h4 class="mb-8 is-size-5-touch is-size-4-desktop has-text-dark" style="letter-spacing: -0.02em;">Do I need to use the Paid Partnership label for things like?</h4>
              <a class="button is-ghost px-0" href="#" style="height: 38px;">
                <span class="mr-2">See more</span>
                <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1717

Bulma

asitrastudio

<section class="is-relative is-clipped" x-data="{ open: true }" :class="{ 'is-hidden': !open }">
  <div class="is-fixed is-bottom-0 is-right-0 is-fullwidth has-mw-lg p-8" style="z-index: 50;">
    <div class="is-relative box py-6 px-6 has-mw-sm ml-auto has-background-white" style="border-radius: 20px;">
      <div class="is-absolute is-top-0 is-right-0 mt-5 mr-5">
        <button class="is-inline-block button is-light has-background-white p-0" x-on:click="open=false">
          <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.625 4.84212L5.57197 4.78909L1.47264 0.689757C1.31908 0.536241 1.11083 0.45 0.89369 0.45C0.67656 0.45 0.468319 0.536235 0.314757 0.689741C0.314752 0.689747 0.314747 0.689752 0.314741 0.689757M5.625 4.84212L0.314741 0.689757M5.625 4.84212L5.67803 4.78909L9.77736 0.689757C9.93093 0.536241 10.1392 0.45 10.3563 0.45C10.5734 0.45 10.7817 0.536235 10.9352 0.689741C11.0888 0.843304 11.175 1.05155 11.175 1.26869C11.175 1.48583 11.0888 1.69408 10.9352 1.84764L6.83591 5.94697L6.78288 6L6.83591 6.05303L10.9352 10.1524M5.625 4.84212L10.9352 10.1524M0.314741 0.689757C0.161235 0.843319 0.075 1.05156 0.075 1.26869C0.075 1.48583 0.161241 1.69408 0.314757 1.84764M0.314741 0.689757L0.314757 1.84764M0.314757 1.84764L4.41409 5.94697L4.46712 6L4.41409 6.05303L0.314757 10.1524C0.161241 10.3059 0.075 10.5142 0.075 10.7313C0.075 10.9484 0.161235 11.1567 0.314741 11.3102C0.468304 11.4638 0.676552 11.55 0.89369 11.55C1.11083 11.55 1.31908 11.4638 1.47264 11.3102L5.57197 7.21091L5.625 7.15788L5.67803 7.21091L9.77736 11.3102C9.93093 11.4638 10.1392 11.55 10.3563 11.55C10.5734 11.55 10.7817 11.4638 10.9352 11.3103C10.9352 11.3103 10.9353 11.3102 10.9353 11.3102M0.314757 1.84764L10.9353 11.3102M10.9353 11.3102C11.0888 11.1567 11.175 10.9484 11.175 10.7313C11.175 10.5142 11.0888 10.3059 10.9352 10.1524M10.9353 11.3102L10.9352 10.1524" fill="black" stroke="black" stroke-width="1"></path>
          </svg>
        </button>
      </div>
      <div class="is-flex mb-4 is-align-items-center">
        <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="21" height="21" rx="10.5" fill="#219653"></rect>
          <path d="M15.7676 7.63463C15.4582 7.32482 14.9558 7.32501 14.646 7.63463L9.59787 12.683L7.35419 10.4393C7.04438 10.1295 6.54217 10.1295 6.23236 10.4393C5.92255 10.7491 5.92255 11.2513 6.23236 11.5611L9.03684 14.3656C9.19165 14.5204 9.39464 14.598 9.59765 14.598C9.80067 14.598 10.0039 14.5206 10.1587 14.3656L15.7676 8.75644C16.0775 8.44684 16.0775 7.94443 15.7676 7.63463Z" fill="white"></path>
        </svg>
        <span class="ml-4 has-text-dark">Your settings have been saved</span>
      </div>
      <p class="mw-xs text-secondary-light fs-9 mb-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
      <div class="buttons"><a class="button is-dark is-size-7 py-3 is-rounded" href="#">I accept</a><a class="button is-dark is-size-7 py-3 is-outlined is-rounded" href="#">Don&apos;t accept</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 #1718

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Get started quickly</h1>
    <div class="has-mw-2xl has-mw-none-desktop mx-auto">
      <div class="columns is-multiline">
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="has-mw-xs mx-auto">
            <div class="mb-8 is-flex has-background-dark is-justify-content-center is-align-items-center" style="width: 72px; height: 72px; border-radius: 21.5px;">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.625 23.75H10C5 23.75 2.5 22.5 2.5 16.25V10C2.5 5 5 2.5 10 2.5H20C25 2.5 27.5 5 27.5 10V16.25C27.5 21.25 25 23.75 20 23.75H19.375C18.9875 23.75 18.6125 23.9375 18.375 24.25L16.5 26.75C15.675 27.85 14.325 27.85 13.5 26.75L11.625 24.25C11.425 23.975 10.9625 23.75 10.625 23.75Z" stroke="white" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M19.9931 13.75H20.0044" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14.9931 13.75H15.0044" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.99313 13.75H10.0044" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h4 class="mb-6 is-size-5 has-text-dark" style="letter-spacing: -0.02em;">Call us</h4>
            <p class="has-text-grey">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,</p>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="has-mw-xs mx-auto">
            <div class="mb-8 is-flex has-background-dark is-justify-content-center is-align-items-center" style="width: 72px; height: 72px; border-radius: 21.5px;">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.1117 2.78672L6.87422 5.13672C5.43672 5.67422 4.26172 7.37422 4.26172 8.89922V18.1867C4.26172 19.6617 5.23672 21.5992 6.42422 22.4867L11.7992 26.4992C13.5617 27.8242 16.4617 27.8242 18.2242 26.4992L23.5992 22.4867C24.7867 21.5992 25.7617 19.6617 25.7617 18.1867V8.89922C25.7617 7.36172 24.5867 5.66172 23.1492 5.12422L16.9117 2.78672C15.8492 2.39922 14.1492 2.39922 13.1117 2.78672Z" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"></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 #1719

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6 mb-16 mb-0-desktop">
        <div class="has-mw-md mx-auto mx-0-desktop">
          <h2 class="title is-size-3-mobile is-size-2-tablet mb-8" style="letter-spacing: -0.02em;">Get started quickly</h2>
          <p class="mb-10 is-size-6 has-text-dark">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using &apos;Content here, content here&apos;, making it look like readable</p>
          <a class="button is-ghost px-0" href="#" style="height: 38px;">
            <span class="mr-4">See more</span>
            <svg class="is-rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="column is-6">
        <img class="has-mw-md has-mw-none-desktop mx-auto mr-0-desktop is-block image is-fullwidth" src="asitrastudio-assets/features/photo1.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 #1720

Bulma

Vendia

<section class="has-background-dark" x-data="{ mobileNavOpen: false }">
  <nav class="navbar is-dark is-relative py-3 has-background-dark">
    <div class="navbar-brand pr-4">
      <a class="navbar-item mr-16" href="#">
        <img class="image" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button navbar-menu-open navbar-burger is-ghost has-text-white p-0">
        <svg viewbox="0 0 100 45" width="26" height="20" fill="currentColor"><rect width="100" height="6"></rect><rect y="18" width="100" height="6"></rect><rect y="38" width="100" height="6"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <div class="navbar-start"><a class="navbar-item has-text-primary" href="#">Home</a><a class="navbar-item has-text-white" href="#">Shop</a><a class="navbar-item has-text-white" href="#">Product</a><a class="navbar-item has-text-white" href="#">Blog</a><a class="navbar-item has-text-white" href="#">Support</a></div>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-block" href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.5 0.5H2.16667L2.5 2.16667M3.83333 8.83333H12.1667L15.5 2.16667H2.5M3.83333 8.83333L2.5 2.16667M3.83333 8.83333L1.92259 10.7441C1.39762 11.269 1.76942 12.1667 2.51184 12.1667H12.1667M12.1667 12.1667C11.2462 12.1667 10.5 12.9129 10.5 13.8333C10.5 14.7538 11.2462 15.5 12.1667 15.5C13.0871 15.5 13.8333 14.7538 13.8333 13.8333C13.8333 12.9129 13.0871 12.1667 12.1667 12.1667ZM5.5 13.8333C5.5 14.7538 4.75381 15.5 3.83333 15.5C2.91286 15.5 2.16667 14.7538 2.16667 13.8333C2.16667 12.9129 2.91286 12.1667 3.83333 12.1667C4.75381 12.1667 5.5 12.9129 5.5 13.8333Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></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

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

Get the code for 13,400+ components

Bulma Component #1702

Get the code for 13,400+ components

Bulma Component #1703

Get the code for 13,400+ components

Bulma Component #1704

Get the code for 13,400+ components

Bulma Component #1705

Get the code for 13,400+ components

Bulma Component #1706

Get the code for 13,400+ components

Bulma Component #1707

Get the code for 13,400+ components

Bulma Component #1708

Get the code for 13,400+ components

Bulma Component #1709

Get the code for 13,400+ components

Bulma Component #1710

Get the code for 13,400+ components

Bulma Component #1711

Get the code for 13,400+ components

Bulma Component #1712

Get the code for 13,400+ components

Bulma Component #1713

Get the code for 13,400+ components

Bulma Component #1714

Get the code for 13,400+ components

Bulma Component #1715

Get the code for 13,400+ components

Bulma Component #1716

Get the code for 13,400+ components

Bulma Component #1717

Get the code for 13,400+ components

Bulma Component #1718

Get the code for 13,400+ components

Bulma Component #1719

Get the code for 13,400+ components

Bulma Component #1720

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