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

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-gradient" 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

Bulma Component #1722

Bulma

Vendia

<section class="is-relative is-clipped" x-data="{ mobileNavOpen: false }">
  <img class="is-absolute is-top-0 is-left-0 is-covered" src="vendia-assets/images/header/bg-color-gradient.png" alt="" style="width: 100%; height: 100%">
  <nav class="navbar py-2" style="background-color: transparent; z-index: 2;">
    <div class="navbar-brand">
      <a class="navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="navbar-burger">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    <div class="navbar-menu">
      <div class="navbar-start"><a class="navbar-item has-text-white" href="#">Women</a><a class="navbar-item has-text-white" href="#">Men</a><a class="navbar-item has-text-white" href="#">Kids</a><a class="navbar-item has-text-white" href="#">Browse</a></div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center is-justify-content-center has-background-white is-rounded" href="#" style="width: 35px; height: 35px;">
            <svg width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.875 0.875H2.125L2.375 2.125M3.375 7.125H9.625L12.125 2.125H2.375M3.375 7.125L2.375 2.125M3.375 7.125L1.94194 8.55806C1.54821 8.95179 1.82707 9.625 2.38388 9.625H9.625M9.625 9.625C8.93464 9.625 8.375 10.1846 8.375 10.875C8.375 11.5654 8.93464 12.125 9.625 12.125C10.3154 12.125 10.875 11.5654 10.875 10.875C10.875 10.1846 10.3154 9.625 9.625 9.625ZM4.625 10.875C4.625 11.5654 4.06536 12.125 3.375 12.125C2.68464 12.125 2.125 11.5654 2.125 10.875C2.125 10.1846 2.68464 9.625 3.375 9.625C4.06536 9.625 4.625 10.1846 4.625 10.875Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1723

Bulma

Vendia

<section class="is-relative is-clipped has-background-gradient-primary" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2" style="background-color: transparent; z-index: 2;">
    <div class="navbar-brand">
      <a class="navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="navbar-burger">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    <div class="navbar-menu">
      <div class="navbar-start"><a class="navbar-item has-text-white" href="#">Women</a><a class="navbar-item has-text-white" href="#">Men</a><a class="navbar-item has-text-white" href="#">Kids</a><a class="navbar-item has-text-white" href="#">Browse</a></div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center is-justify-content-center has-background-white is-rounded" href="#" style="width: 35px; height: 35px;">
            <svg width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.875 0.875H2.125L2.375 2.125M3.375 7.125H9.625L12.125 2.125H2.375M3.375 7.125L2.375 2.125M3.375 7.125L1.94194 8.55806C1.54821 8.95179 1.82707 9.625 2.38388 9.625H9.625M9.625 9.625C8.93464 9.625 8.375 10.1846 8.375 10.875C8.375 11.5654 8.93464 12.125 9.625 12.125C10.3154 12.125 10.875 11.5654 10.875 10.875C10.875 10.1846 10.3154 9.625 9.625 9.625ZM4.625 10.875C4.625 11.5654 4.06536 12.125 3.375 12.125C2.68464 12.125 2.125 11.5654 2.125 10.875C2.125 10.1846 2.68464 9.625 3.375 9.625C4.06536 9.625 4.625 10.1846 4.625 10.875Z" stroke="black" 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 #1724

Bulma

Vendia

<section class="has-background-dark" x-data="{ mobileNavOpen: false }">
  <div style="border-bottom: 1px solid rgba(132, 135, 138, 0.4);">
    <div class="section pt-8 pb-4 py-12-desktop">
      <div class="is-flex-desktop is-align-items-center is-justify-content-space-between">
        <div class="mb-5 mb-0-desktop">
          <a class="is-inline-block" href="#">
            <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
          </a>
        </div>
        <a class="has-text-primary ml-auto is-vcentered is-inline-flex is-align-items-center" href="#">
          <svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 2.33333C1 1.59695 1.59695 1 2.33333 1H4.51949C4.80645 1 5.06121 1.18362 5.15195 1.45585L6.15049 4.45147C6.25541 4.76622 6.11292 5.11021 5.81618 5.25858L4.31134 6.011C5.04617 7.64081 6.35919 8.95383 7.989 9.68866L8.74142 8.18382C8.88979 7.88708 9.23378 7.74459 9.54853 7.84951L12.5442 8.84805C12.8164 8.93879 13 9.19355 13 9.48051V11.6667C13 12.403 12.403 13 11.6667 13H11C5.47715 13 1 8.52285 1 3V2.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ml-3">Call us: +1-395-493-395</span>
        </a>
      </div>
      <div class="is-hidden-desktop navbar-brand mt-4">
        <div class="navbar-burger ml-0">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    </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 #1725

Bulma

Vendia

<section class="has-background-dark" x-data="{ mobileNavOpen: false }">
  <div style="border-bottom: 1px solid rgba(132, 135, 138, 0.4);">
    <div class="section pt-8 pb-4 py-12-desktop">
      <div class="is-flex-desktop is-align-items-center is-justify-content-space-between">
        <div class="mb-5 mb-0-desktop">
          <a class="is-inline-block" href="#">
            <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
          </a>
        </div>
        <a class="has-text-primary-gradient ml-auto is-vcentered is-inline-flex is-align-items-center" href="#">
          <svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 2.33333C1 1.59695 1.59695 1 2.33333 1H4.51949C4.80645 1 5.06121 1.18362 5.15195 1.45585L6.15049 4.45147C6.25541 4.76622 6.11292 5.11021 5.81618 5.25858L4.31134 6.011C5.04617 7.64081 6.35919 8.95383 7.989 9.68866L8.74142 8.18382C8.88979 7.88708 9.23378 7.74459 9.54853 7.84951L12.5442 8.84805C12.8164 8.93879 13 9.19355 13 9.48051V11.6667C13 12.403 12.403 13 11.6667 13H11C5.47715 13 1 8.52285 1 3V2.33333Z" stroke="url(#paint0_linear_3069_1005)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <defs><lineargradient id="paint0_linear_3069_1005" x1="1" y1="1" x2="15.4853" y2="7.01973" gradientunits="userSpaceOnUse"><stop stop-color="#FBFF25"><stop offset="0.21875" stop-color="#E7E542"><stop offset="0.453125" stop-color="#AAEA5E"><stop offset="0.697917" stop-color="#51D9C6"><stop offset="1" stop-color="#4AA8FF"></lineargradient></defs>
          </svg>
          <span class="ml-3">Call us: +1-395-493-395</span>
        </a>
      </div>
      <div class="is-hidden-desktop navbar-brand mt-4">
        <div class="navbar-burger ml-0">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>

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

Bulma

Vendia

<section class="has-background-dark" x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent">
  <nav class="navbar is-dark py-4">
    <div class="navbar-brand">
      <a class="navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="navbar-burger">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item" href="#">Women</a><a class="navbar-item" href="#">Men</a><a class="navbar-item" href="#">Kids</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-item" href="#">Browse</a>
          <div class="navbar-dropdown has-background-dark"><a class="navbar-item" href="#">Option</a><a class="navbar-item" href="#">Option</a><a class="navbar-item" href="#">Option</a></div>
        </div>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center is-justify-content-center has-text-dark" href="#">
            <svg width="22" height="24" viewbox="0 0 22 24" 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 #1727

Bulma

Vendia

<section class="has-background-dark" x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent">
  <nav class="navbar is-dark py-4">
    <div class="navbar-brand">
      <a class="navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="navbar-burger">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    <div class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item" href="#">Women</a><a class="navbar-item" href="#">Men</a><a class="navbar-item" href="#">Kids</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-item" href="#">Browse</a>
          <div class="navbar-dropdown has-background-dark"><a class="navbar-item" href="#">Option</a><a class="navbar-item" href="#">Option</a><a class="navbar-item" href="#">Option</a></div>
        </div>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center is-justify-content-center has-text-dark" href="#">
            <svg width="22" height="24" viewbox="0 0 22 24" 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 #1728

Bulma

Vendia

<section x-data="{ mobileNavOpen: false }">
  <nav class="navbar is-dark is-relative py-4">
    <div class="is-hidden-touch navbar-brand is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <a class="navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
    </div>
    <div class="navbar-brand">
      <a class="is-hidden-desktop navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="navbar-burger">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    <div class="navbar-menu">
      <div class="navbar-start"><a class="navbar-item" href="#">House</a><a class="navbar-item" href="#">Office</a><a class="navbar-item" href="#">Brand</a><a class="navbar-item" href="#">Store</a></div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-block mr-9 has-text-white has-text-weight-bold" href="#">Help</a>
          <a class="is-inline-flex is-align-items-center" href="#">
            <svg width="16" height="18" viewbox="0 0 16 18" 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 #1729

Bulma

Vendia

<section x-data="{ mobileNavOpen: false }">
  <nav class="navbar is-dark is-relative py-4">
    <div class="is-hidden-touch navbar-brand is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <a class="navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
    </div>
    <div class="navbar-brand">
      <a class="is-hidden-desktop navbar-item mr-16" href="#">
        <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <div class="navbar-burger">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button 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>
    <div class="navbar-menu">
      <div class="navbar-start"><a class="navbar-item" href="#">House</a><a class="navbar-item" href="#">Office</a><a class="navbar-item" href="#">Brand</a><a class="navbar-item" href="#">Store</a></div>
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-block mr-9 has-text-white has-text-weight-bold" href="#">Help</a>
          <a class="is-inline-flex is-align-items-center" href="#">
            <svg width="16" height="18" viewbox="0 0 16 18" 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 #1730

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-lg mx-auto has-mw-none-desktop">
      <h3 class="title is-size-2 has-text-white mb-8">Recent reviews</h3>
      <div class="py-10 columns is-multiline" style="border-bottom: 1px solid rgba(17, 18, 21, 1);">
        <div class="column is-12-tablet is-3-desktop">
          <div>
            <h6 class="has-text-weight-bold has-text-white">Risako M</h6>
            <span class="has-text-grey-lighter">May 16, 2021</span>
          </div>
        </div>
        <div class="column is-12-tablet is-3-desktop">
          <div class="is-flex pr-24-desktop is-align-items-center is-justify-content-flex-end">
            <div class="is-flex is-align-items-center">
              <svg width="116" height="23" viewbox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#FFBB29"></path>
                <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#FFBB29"></path>
                <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#FFBB29"></path>
                <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#FFBB29"></path>
                <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#FFBB29"></path>
              </svg>
            </div>
            <span class="has-text-white ml-3 has-text-weight-bold">5</span>
          </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 #1731

Bulma

Vendia

<section class="section has-background-dark" x-data="{ deliveryMethod: '' }" x-init="deliveryMethod = $refs.standard.textContent">
  <div class="container">
    <div class="has-mw-md has-mw-none-tablet mx-auto">
      <h3 class="title is-size-2 has-text-white mb-12">Checkout</h3>
      <div class="columns is-multiline">
        <div class="column is-6 mb-8 mb-0-tablet">
          <form action="">
            <div class="field mb-10 pb-12" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15);">
              <h6 class="has-text-weight-bold has-text-white mb-6">Contact Information</h6>
              <div class="field pb-12 mb-8" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15);">
                <label class="label is-size-6">Email Address</label>
                <div class="control">
                  <input class="input" type="email">
                </div>
              </div>
              <h6 class="has-text-weight-bold has-text-white mb-6">Shipping Information</h6>
              <div class="field-body mb-6">
                <div class="field mb-6-touch">
                  <label class="label is-size-6">First Name</label>
                  <div class="control">
                    <input class="input" type="text">
                  </div>
                </div>
                <div class="field">

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

Bulma

Vendia

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }">
  <nav class="navbar is-dark py-5 has-background-dark">
    <div class="navbar-brand">
      <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 mr-6">
        <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">
      <div class="navbar-start">
        <a class="navbar-item has-text-white" href="#">Women</a><a class="navbar-item has-text-white" href="#">Men</a><a class="navbar-item has-text-white" href="#">Kids</a>
        <div class="navbar-item">
          <div class="is-clickable dropdown" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
            <div class="dropdown-trigger is-inline-flex has-text-white">
              <span>Browse</span>
              <span :class="{ 'is-rotate-180': dropdown, 'is-rotate-0': !dropdown }" class="ml-3">
                <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6666 1L5.99998 5.66667L1.33331 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </div>
            <div :class="{ 'is-block dropdown-menu': dropdown, 'is-hidden': !dropdown }" class="pt-6 has-background-dark" style="border-top: none;">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-md mx-auto has-mw-none-tablet">
      <h3 class="title has-text-white mb-12 is-size-2">Shopping Cart</h3>
      <div class="columns is-multiline">
        <div class="column is-7">
          <div x-data="{ item: true }" :class="{ 'is-hidden': !item }" class="py-10 is-relative">
            <div class="is-absolute is-top-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 2px;"></div>
            <div class="is-absolute is-bottom-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 2px;"></div>
            <button x-on:click="item = false" class="button is-ghost p-0 mt-10 is-absolute is-top-0 is-right-0">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 11L11 1M1 1L11 11" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <div class="columns is-multiline pr-16">
              <div class="column is-4">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/cart/cart-item1.png" alt="" style="max-width: 200px;">
              </div>
              <div class="column is-8">
                <div class="is-flex is-flex-direction-column" style="height: 100%">
                  <div class="pb-8 mb-auto">
                    <div class="is-flex is-align-items-start">
                      <div class="mb-6 mb-4-mobile mr-12 mr-32-widescreen is-flex-shrink-0">
                        <span class="has-text-white has-text-weight-medium">Basic Tee</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 #1734

Bulma

Vendia

<section class="section has-background-dark" x-data="{ active: 1, inc: 5, min: 5, max: 25 }">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-desktop">
        <div class="pt-9 pb-24 pl-12 pr-16 is-inline-block">
          <div class="mb-10">
            <h6 class="is-inline-block has-text-primary-gradient mb-5">Average Rating</h6>
            <div class="mb-2 is-flex is-align-items-center">
              <input class="form-check-input mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-5.svg" alt="">
            </div>
            <div class="mb-2 is-flex is-align-items-center">
              <input class="form-check-input mr-3" type="checkbox" checked="">
              <img src="vendia-assets/images/search/star-light-4.svg" alt="">
            </div>
            <div class="mb-2 is-flex is-align-items-center">
              <input class="form-check-input mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-3.svg" alt="">
            </div>
            <div class="mb-2 is-flex is-align-items-center">
              <input class="form-check-input mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-2.svg" alt="">
            </div>
            <div class="is-flex is-align-items-center">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-20 columns is-multiline">
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-md mx-auto px-10 pt-8 pb-12 is-flex is-flex-direction-column is-covered has-background-grey-darker" style="height: 100%">
          <h4 class="title is-size-3 has-text-white mb-3">
            <span class="is-block">100% Quality</span>
            <span>checked</span>
          </h4>
          <span class="has-text-grey-lighter has-text-weight-medium">Reliable</span>
          <div class="mt-auto pt-8 is-flex is-justify-content-end">
            <div class="is-inline-flex has-background-gradient-primary is-justify-content-center is-align-items-center is-rounded" style="width: 154px; height: 154px;">
              <svg width="56" height="64" viewbox="0 0 56 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M53.6668 15.9583L28.0002 3.125L2.3335 15.9583M53.6668 15.9583L28.0002 28.7917M53.6668 15.9583V48.0417L28.0002 60.875M28.0002 28.7917L2.3335 15.9583M28.0002 28.7917V60.875M2.3335 15.9583V48.0417L28.0002 60.875" stroke="black" stroke-width="4.5" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-md mx-auto px-10 pt-8 pb-12 is-flex is-flex-direction-column is-covered has-background-grey-darker" style="height: 100%">
          <h4 class="title is-size-3 has-text-white mb-3">
            <span class="is-block">Get Instant</span>
            <span>support all day.</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 #1736

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-lg mx-auto has-mw-none-desktop">
      <h3 class="title is-size-2 has-text-white mb-8">Recent reviews</h3>
      <div class="py-10 columns is-multiline is-relative">
        <div class="is-absolute is-bottom-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 1px;"></div>
        <div class="is-absolute is-top-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 1px;"></div>
        <div class="column is-12-tablet is-3-desktop">
          <div>
            <h6 class="has-text-weight-bold has-text-white">Risako M</h6>
            <span class="has-text-grey-lighter">May 16, 2021</span>
          </div>
        </div>
        <div class="column is-12-tablet is-3-desktop">
          <div class="is-flex pr-24-desktop is-align-items-center is-justify-content-flex-end">
            <div class="is-flex is-align-items-center">
              <svg width="116" height="23" viewbox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#EDFF7C"></path>
                <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#EDFF7C"></path>
                <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#EDFF7C"></path>
                <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#EDFF7C"></path>
                <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#EDFF7C"></path>
              </svg>
            </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 #1737

Bulma

Vendia

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }">
  <nav class="navbar is-dark py-5 has-background-dark">
    <div class="navbar-brand">
      <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 mr-6">
        <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">
      <div class="navbar-start">
        <a class="navbar-item has-text-white" href="#">Women</a><a class="navbar-item has-text-white" href="#">Men</a><a class="navbar-item has-text-white" href="#">Kids</a>
        <div class="navbar-item">
          <div class="is-clickable dropdown" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
            <div class="dropdown-trigger is-inline-flex has-text-white">
              <span>Browse</span>
              <span :class="{ 'is-rotate-180': dropdown, 'is-rotate-0': !dropdown }" class="ml-3">
                <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6666 1L5.99998 5.66667L1.33331 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </div>
            <div :class="{ 'is-block dropdown-menu': dropdown, 'is-hidden': !dropdown }" class="pt-6 has-background-dark is-hidden" style="border-top: none;">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-14">
      <h4 class="title is-size-3 has-text-white">Order history</h4>
      <p class="subtitle">Check the status of recent orders, manage return orders, and discover similar products.</p>
    </div>
    <div class="mb-10" style="border: 1px solid rgba(33, 33, 36, 1);">
      <div class="p-8" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
        <div class="-mb-6 columns is-multiline">
          <div class="column is-3-tabletmb-6">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Order number</span>
            <span class="has-text-white has-text-weight-bold">WU88191111</span>
          </div>
          <div class="column is-3-tabletmb-6">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Date placed</span>
            <span class="has-text-white has-text-weight-bold">Jul 6, 2021</span>
          </div>
          <div class="column is-2-tablet mb-6">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Total amount</span>
            <span class="has-text-white has-text-weight-bold">$160.00</span>
          </div>
          <div class="column is-4-tablet mb-6">
            <div class="buttons is-right"><a class="button is-outlined is-dark has-text-white" href="#" style="border: 1px solid rgba(33, 33, 36, 1);">View Order</a><a class="button is-outlined is-dark has-text-white" href="#" style="border: 1px solid rgba(33, 33, 36, 1);">View Invoice</a></div>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1739

Bulma

Vendia

<section>
  <div class="has-background-gradient-primary">
    <div class="section py-4">
      <div class="container">
        <div class="is-flex is-justify-content-center is-align-items-center">
          <p class="mr-5 has-text-weight-medium has-text-dark">This announcement bar can be used to inform visitors of something important.</p>
          <a class="button is-small is-rounded is-dark px-3" href="#">Dismiss</a>
        </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 #1740

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-20 columns is-multiline">
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-md mx-auto px-10 pt-8 pb-12 is-flex is-flex-direction-column is-covered has-background-grey-darker" style="height: 100%">
          <h4 class="title is-size-3 has-text-white mb-3">
            <span class="is-block">100% Quality</span>
            <span>checked</span>
          </h4>
          <span class="has-text-grey-lighter has-text-weight-medium">Reliable</span>
          <div class="mt-auto pt-8 is-flex is-justify-content-end">
            <div class="is-inline-flex has-background-primary is-justify-content-center is-align-items-center is-rounded" style="width: 154px; height: 154px;">
              <svg width="56" height="64" viewbox="0 0 56 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M53.6668 15.9583L28.0002 3.125L2.3335 15.9583M53.6668 15.9583L28.0002 28.7917M53.6668 15.9583V48.0417L28.0002 60.875M28.0002 28.7917L2.3335 15.9583M28.0002 28.7917V60.875M2.3335 15.9583V48.0417L28.0002 60.875" stroke="black" stroke-width="4.5" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-md mx-auto px-10 pt-8 pb-12 is-flex is-flex-direction-column is-covered has-background-grey-darker" style="height: 100%">
          <h4 class="title is-size-3 has-text-white mb-3">
            <span class="is-block">Get Instant</span>
            <span>support all day.</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

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

Get the code for 13,400+ components

Bulma Component #1722

Get the code for 13,400+ components

Bulma Component #1723

Get the code for 13,400+ components

Bulma Component #1724

Get the code for 13,400+ components

Bulma Component #1725

Get the code for 13,400+ components

Bulma Component #1726

Get the code for 13,400+ components

Bulma Component #1727

Get the code for 13,400+ components

Bulma Component #1728

Get the code for 13,400+ components

Bulma Component #1729

Get the code for 13,400+ components

Bulma Component #1730

Get the code for 13,400+ components

Bulma Component #1731

Get the code for 13,400+ components

Bulma Component #1732

Get the code for 13,400+ components

Bulma Component #1733

Get the code for 13,400+ components

Bulma Component #1734

Get the code for 13,400+ components

Bulma Component #1735

Get the code for 13,400+ components

Bulma Component #1736

Get the code for 13,400+ components

Bulma Component #1737

Get the code for 13,400+ components

Bulma Component #1738

Get the code for 13,400+ components

Bulma Component #1739

Get the code for 13,400+ components

Bulma Component #1740

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