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

Bulma

Vendia

<section class="section has-background-dark" x-data="{ quantity: 1 }">
  <div class="container">
    <div class="has-mw-md-mobile has-mw-4xl-desktop mx-auto">
      <div class="columns is-multiline">
        <div class="column is-6">
          <div>
            <img class="mb-5 is-block image is-fullwidth is-covered" src="vendia-assets/images/product-details/item-bag-gray-big.png" alt="" style="max-height: 400px; height: 100%">
            <div class="is-flex">
              <a class="mr-5 is-inline-block" href="#">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/item-bag-gray1.png" alt="">
              </a>
              <a class="mr-5 is-inline-block" href="#">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/item-bag-gray2.png" alt="">
              </a>
              <a class="is-inline-block" href="#">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/item-bag-gray3.png" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="column is-6">
          <div class="pl-12-widescreen">
            <div class="mb-2 is-flex">
              <button class="button is-ghost p-0 mr-1">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-md has-mw-none-tablet mx-auto">
      <div class="mb-16">
        <h4 class="title is-size-2 has-text-white">Your Orders</h4>
        <p class="has-text-grey-lighter mb-0">Check the status of recent orders, manage return orders, and discover similar products.</p>
      </div>
      <div class="mb-20">
        <div class="pb-10 columns is-multiline is-vcentered" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
          <div class="column is-6-tablet">
            <div class="is-flex-tablet is-align-items-center">
              <h5 class="is-size-4 has-text-weight-bold has-text-white mr-6 has-text-weight-bold">Order #4376</h5>
              <span class="has-text-grey-lighter has-text-weight-medium">Delivered on January 22, 2021</span>
            </div>
          </div>
          <div class="column is-6-tablet">
            <div class="is-flex is-justify-content-flex-end is-align-items-center">
              <a class="is-inline-block is-size-6 has-text-primary has-text-weight-bold" href="#">Manage Order</a>
              <div class="mx-6 has-background-grey-dark" style="height: 16px; width: 1px;"></div>
              <a class="is-inline-block is-size-6 has-text-primary has-text-weight-bold" href="#">View Invoice</a>
            </div>
          </div>
        </div>
        <div class="py-8" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">

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

Bulma

Vendia

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false }">
  <nav class="navbar has-background-grey-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">
        <div class="navbar-item" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
          <div class="is-clickable dropdown">
            <div class="dropdown-trigger has-text-primary is-inline-flex">
              <span>Why Vendia?</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="has-background-grey-darker is-hidden" style="border-top: none;">
              <div class="dropdown-content pt-10 has-background-dark" style="min-width: max-content;">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <div class="pb-9">
        <a class="mb-20 is-inline-block" href="#">
          <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="" style="height: 39px;">
        </a>
        <div class="-mb-4 columns is-multiline is-justify-content-center is-align-items-center" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-white has-text-weight-medium" href="#">Company</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-white has-text-weight-medium" href="#">Resource</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-white has-text-weight-medium" href="#">Tracking</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-white has-text-weight-medium" href="#">Help</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-white has-text-weight-medium" href="#">Privacy Policy</a></div>
        </div>
      </div>
      <p class="has-text-grey-lighter mt-8">Copyright &copy; 2022 Landingfolio. All Rights Reserved</p>
    </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 #1785

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-text-centered">
      <div class="pb-9">
        <a class="mb-20 is-inline-block" href="#">
          <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="" style="height: 39px;">
        </a>
        <div class="-mb-4 columns is-multiline is-justify-content-center is-align-items-center" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-primary-gradient" href="#">Company</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-primary-gradient" href="#">Resource</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-primary-gradient" href="#">Tracking</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-primary-gradient" href="#">Help</a></div>
          <div class="column is-2-desktop is-6-tablet mb-4"><a class="is-inline-block has-text-primary-gradient" href="#">Privacy Policy</a></div>
        </div>
      </div>
      <p class="has-text-grey-lighter mt-8">Copyright &copy; 2022 Landingfolio. All Rights Reserved</p>
    </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 #1786

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-5-desktop">
        <div class="has-mw-lg mx-auto mx-0-desktop">
          <div class="mb-8">
            <h4 class="title is-size-3 has-text-white mb-8">Order Receipt</h4>
            <div class="mb-2">
              <span class="has-text-grey-lighter mr-1">Order Placed:</span>
              <span class="has-text-white">06/12/2019</span>
            </div>
            <div>
              <span class="has-text-grey-lighter mr-1">Order Number:</span>
              <span class="has-text-white">7899663-001</span>
            </div>
          </div>
          <div>
            <span class="has-text-grey-lighter mb-4 is-block has-text-weight-medium">Items:</span>
            <div class="mb-12" style="border: 1px solid rgba(33, 33, 36, 1);">
              <div class="px-4 py-3 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
                <span class="has-text-white has-text-weight-medium">Aloe Plant</span>
                <span class="has-text-white has-text-weight-medium">$43.00</span>
              </div>
              <div class="px-4 py-3 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">

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

Bulma

Vendia

<section class="is-relative is-clipped has-background-white" style="min-height: 800px;" x-data="{ dropdown: false, mobileNavOpen: false }">
  <nav class="navbar py-3 has-background-dark">
    <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-block -mb-2" href="#">
            <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.875 19.875L13.625 13.625M15.7083 8.41667C15.7083 12.4437 12.4437 15.7083 8.41667 15.7083C4.38959 15.7083 1.125 12.4437 1.125 8.41667C1.125 4.38959 4.38959 1.125 8.41667 1.125C12.4437 1.125 15.7083 4.38959 15.7083 8.41667Z" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center" href="#" x-on:mouseover="dropdown = true">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-5-desktop">
        <div class="has-mw-lg mx-auto mx-0-desktop">
          <div class="mb-8">
            <h4 class="title is-size-3 has-text-white mb-8">Order Receipt</h4>
            <div class="mb-2">
              <span class="has-text-grey-lighter mr-1">Order Placed:</span>
              <span class="has-text-white">06/12/2019</span>
            </div>
            <div>
              <span class="has-text-grey-lighter mr-1">Order Number:</span>
              <span class="has-text-white">7899663-001</span>
            </div>
          </div>
          <div>
            <span class="has-text-grey-lighter mb-4 is-block has-text-weight-medium">Items:</span>
            <div class="mb-12 has-background-gradient-primary" style="padding: 1px;">
              <div class="has-background-dark">
                <div class="px-4 py-3 is-flex is-justify-content-space-between is-align-items-center is-relative">
                  <div class="is-absolute is-bottom-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 1px;"></div>
                  <span class="has-text-white has-text-weight-medium">Aloe Plant</span>
                  <span class="has-text-white has-text-weight-medium">$43.00</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 #1789

Bulma

Vendia

<section class="section py-12 py-24-tablet py-32-desktop has-background-dark">
  <div class="container">
    <div class="px-6 px-12-tablet px-20-desktop py-12 has-background-gradient-primary">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-6-desktop is-7-widescreen mb-8 mb-0-desktop">
          <div>
            <h3 class="title is-size-2-mobile is-size-1-desktop">Get the best fasion items</h3>
            <p class="has-mw-xl has-text-dark">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis.</p>
          </div>
        </div>
        <div class="column is-6-desktop is-5-widescreen">
          <div class="buttons is-vcentered is-right"><a class="button is-dark" href="#">Explore Items</a><a class="button is-outlined is-dark" href="#">Learn more</a></div>
        </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 #1790

Bulma

Vendia

<section class="section has-background-dark" x-data="{ active: 1, inc: 5, min: 5, max: 25 }">
  <div class="container">
    <nav class="pagination is-centered" role="navigation">
      <ul class="pagination-list">
        <li style="border: 1px solid rgba(33, 33, 36, 1);">
          <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="pagination-link m-0 has-text-weight-bold" href="#">
            <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 10.6666L1.33333 5.99992L6 1.33325" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page1" x-text="inc - 4" x-on:click.prevent="active = inc - 4" class="pagination-link m-0 has-text-weight-bold" href="#" :class="{ 'is-current': active == inc - 4 }">1</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page2" x-text="inc - 3" x-on:click.prevent="active = inc - 3" class="pagination-link m-0 has-text-weight-bold" href="#" :class="{ 'is-current': active == inc - 3 }">2</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page3" x-text="inc - 2" x-on:click.prevent="active = inc - 2" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current': active == inc - 2 }" href="#">3</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page4" x-text="inc - 1" x-on:click.prevent="active = inc - 1" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current': active == inc - 1 }" href="#">4</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page5" x-text="inc" x-on:click.prevent="active = inc" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current': active == inc }" href="#">5</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);">
          <a x-on:click.prevent="inc < max ? inc += 5 : max" class="pagination-link m-0 has-text-weight-bold" href="#">
            <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1.33341L5.66667 6.00008L1 10.6667" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </li>
      </ul>

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

Bulma

Vendia

<section x-data="{ alert: true }" :class="{ 'is-hidden': !alert }">
  <div class="is-relative has-background-dark">
    <div class="is-absolute is-bottom-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 2px;"></div>
    <div class="section py-4">
      <div class="container">
        <div class="has-text-centered pr-12-mobile">
          <p class="has-text-white has-text-weight-medium">FIRST TIMERS? Oh, hi! Get 20% discount on your first purchase</p>
        </div>
        <button x-on:click="alert = false" class="button is-ghost p-0 is-absolute is-top-0 is-right-0 mr-4-desktop" style="height: 100%;">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="11.25" fill="black" stroke="#84878A" stroke-width="1.5"></circle>
            <path d="M9.25 15.75L15.75 9.25M9.25 9.25L15.75 15.75" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </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 #1792

Bulma

Vendia

<section class="is-relative is-clipped has-background-white" style="min-height: 800px;" x-data="{ dropdown: false, mobileNavOpen: false }">
  <nav class="navbar has-background-dark">
    <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-block -mb-2" href="#">
            <svg width="21" height="21" viewbox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.875 19.875L13.625 13.625M15.7083 8.41667C15.7083 12.4437 12.4437 15.7083 8.41667 15.7083C4.38959 15.7083 1.125 12.4437 1.125 8.41667C1.125 4.38959 4.38959 1.125 8.41667 1.125C12.4437 1.125 15.7083 4.38959 15.7083 8.41667Z" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="navbar-item">
          <a class="is-inline-flex is-align-items-center" href="#" x-on:mouseover="dropdown = true">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-4xl-tablet mx-auto">
      <div class="-mb-8 columns is-multiline">
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="is-flex is-align-items-center">
            <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="has-text-grey-lighter ml-4 has-text-weight-bold">SHIPPING</span>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="is-flex is-align-items-center">
            <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="has-text-grey-lighter ml-4 has-text-weight-bold">PAYMENT</span>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="is-flex is-align-items-center">
            <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z" stroke="#F2FF5A" stroke-width="2" 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 #1794

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-4xl-tablet mx-auto">
      <div class="-mb-8 columns is-multiline">
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="is-flex is-align-items-center">
            <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="has-text-grey-lighter ml-4 has-text-weight-bold">SHIPPING</span>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="is-flex is-align-items-center">
            <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="has-text-grey-lighter ml-4 has-text-weight-bold">PAYMENT</span>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <div class="is-flex is-align-items-center">
            <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.75 20L17.9167 24.1667L26.25 15.8333M38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64466 38.75 1.25 30.3553 1.25 20C1.25 9.64466 9.64466 1.25 20 1.25C30.3553 1.25 38.75 9.64466 38.75 20Z" stroke="#F2FF5A" stroke-width="2" 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 #1795

Bulma

Vendia

<section class="section py-12 py-24-tablet py-32-desktop has-background-dark">
  <div class="container">
    <div class="px-6 px-12-tablet px-20-desktop py-12 has-background-primary">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-6-desktop is-7-widescreen mb-8 mb-0-desktop">
          <div>
            <h3 class="title is-size-2-mobile is-size-1-desktop">Get the best fasion items</h3>
            <p class="has-mw-xl has-text-dark">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis.</p>
          </div>
        </div>
        <div class="column is-6-desktop is-5-widescreen">
          <div class="buttons is-vcentered is-right"><a class="button is-dark" href="#">Explore Items</a><a class="button is-outlined is-dark" href="#">Learn more</a></div>
        </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 #1796

Bulma

Vendia

<section x-data="{ alert: true }" :class="{ 'is-hidden': !alert }">
  <div class="is-relative has-background-dark">
    <div class="section py-4">
      <div class="container">
        <div class="has-text-centered pr-12-mobile">
          <p class="has-text-white has-text-weight-medium">FIRST TIMERS? Oh, hi! Get 20% discount on your first purchase</p>
        </div>
        <button x-on:click="alert = false" class="button is-ghost p-0 is-absolute is-top-0 is-right-0 mr-4-desktop" style="height: 100%;">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="11.25" fill="black" stroke="#84878A" stroke-width="1.5"></circle>
            <path d="M9.25 15.75L15.75 9.25M9.25 9.25L15.75 15.75" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </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 #1797

Bulma

Vendia

<section class="section has-background-dark" x-data="{ active: 1, inc: 5, min: 5, max: 25 }">
  <div class="container">
    <nav class="pagination is-centered" role="navigation">
      <ul class="pagination-list">
        <li style="border: 1px solid rgba(33, 33, 36, 1);">
          <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="pagination-link m-0 has-text-weight-bold" href="#">
            <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 10.6666L1.33333 5.99992L6 1.33325" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page1" x-text="inc - 4" x-on:click.prevent="active = inc - 4" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == inc - 4 }" href="#">1</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page2" x-text="inc - 3" x-on:click.prevent="active = inc - 3" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == inc - 3 }" href="#">2</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page3" x-text="inc - 2" x-on:click.prevent="active = inc - 2" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == inc - 2 }" href="#">3</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page4" x-text="inc - 1" x-on:click.prevent="active = inc - 1" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == inc - 1 }" href="#">4</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);"><a x-ref="page5" x-text="inc" x-on:click.prevent="active = inc" class="pagination-link m-0 has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == inc }" href="#">5</a></li>
        <li style="border: 1px solid rgba(33, 33, 36, 1);">
          <a x-on:click.prevent="inc < max ? inc += 5 : max" class="pagination-link m-0 has-text-weight-bold" href="#">
            <svg width="7" height="12" viewbox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1.33341L5.66667 6.00008L1 10.6667" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </li>
      </ul>

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-none-tablet has-mw-lg mx-auto">
      <div class="columns is-multiline">
        <div class="column is-6 mb-8 mb-0-tablet">
          <div class="has-mw-md-touch has-mw-lg-desktop mx-auto ml-0-desktop">
            <div x-data="{ item: true }" :class="{ 'is-hidden': !item, 'is-flex': item }" class="py-8 is-align-items-start" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
              <img class="image is-fullwidth is-covered" src="vendia-assets/images/checkout/item-checkout2.png" alt="" style="max-width: 80px; max-height: 100px; height: 100%">
              <div class="pl-6 is-flex is-flex-direction-column is-covered" style="width: 100%; height: 100%">
                <div class="mb-4 is-flex is-justify-content-space-between is-align-items-start">
                  <div class="mr-10">
                    <a class="has-text-white mb-2 is-inline-block has-text-weight-bold" href="#">Women&rsquo;s Basic Tee</a>
                    <span class="has-text-white is-block has-text-weight-bold">$32.00</span>
                  </div>
                  <div class="is-flex is-align-items-center">
                    <a class="has-text-grey-lighter has-text-weight-medium" href="#">Edit</a>
                    <div class="mx-5 has-background-gradient-primary" style="width: 1px; height: 16px;"></div>
                    <a x-on:click.prevent="item = false" class="has-text-grey-lighter has-text-weight-medium" href="#">Remove</a>
                  </div>
                </div>
                <div class="mt-auto">
                  <span class="has-text-grey-lighter mr-4 is-inline-block has-text-weight-medium">S</span>
                  <span class="has-text-grey-lighter has-text-weight-medium">Gray</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 #1799

Bulma

Vendia

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent">
  <div class="px-14-desktop has-background-grey-darker">
    <nav class="navbar is-relative has-background-grey-darker">
      <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 is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%;">
        <div class="navbar-start">
          <div class="navbar-item dropdown p-0" x-on:mouseover="dropdown = true">
            <a class="navbar-item has-text-primary-gradient is-inline-flex" href="#">
              <span>Products</span>
              <span :class="{ 'is-rotate-180': !dropdown, 'is-rotate-0': dropdown }" class="ml-3">
                <svg width="10" height="6" viewbox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.760632 5.43635C1.11188 5.78782 1.68138 5.78782 2.03263 5.43635L4.99438 2.47274L7.95614 5.43635C8.30739 5.78782 8.87688 5.78782 9.22813 5.43635C9.57938 5.08488 9.57938 4.51503 9.22813 4.16355L5.63038 0.563555C5.27913 0.212083 4.70964 0.212083 4.35838 0.563555L0.760632 4.16355C0.409379 4.51503 0.409379 5.08488 0.760632 5.43635Z" fill="white"></path>
                </svg>
              </span>
            </a>
          </div>
          <a class="navbar-item has-text-white" href="#">Blog</a><a class="navbar-item has-text-white" href="#">Pricing</a><a class="navbar-item has-text-white" href="#">Download</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 #1800

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-14 is-flex-tablet is-justify-content-center is-align-items-center">
      <div class="is-flex is-align-items-center">
        <div class="mr-4 is-inline-flex has-background-primary is-justify-content-center is-align-items-center has-text-weight-bold is-rounded" style="width: 30px; height: 30px;">1</div>
        <span class="has-text-white has-text-weight-bold">Shopping Cart</span>
      </div>
      <span class="is-block my-4 my-0-tablet mx-4-tablet">
        <svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class=" is-flex is-align-items-center">
        <div class="has-text-white mr-4 is-inline-flex has-background-grey-dark is-justify-content-center is-align-items-center has-text-weight-bold is-rounded" style="width: 30px; height: 30px;">2</div>
        <span class="has-text-white has-text-weight-bold">Payment &amp; Delivery Options</span>
      </div>
      <span class="is-block my-4-mobile my-0-tablet mx-4-tablet">
        <svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class=" is-flex is-align-items-center">
        <div class="has-text-white mr-4 is-inline-flex has-background-grey-dark is-justify-content-center is-align-items-center has-text-weight-bold is-rounded" style="width: 30px; height: 30px;">3</div>
        <span class="has-text-white has-text-weight-bold">Order Received</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 #1781

Get the code for 13,400+ components

Bulma Component #1782

Get the code for 13,400+ components

Bulma Component #1783

Get the code for 13,400+ components

Bulma Component #1784

Get the code for 13,400+ components

Bulma Component #1785

Get the code for 13,400+ components

Bulma Component #1786

Get the code for 13,400+ components

Bulma Component #1787

Get the code for 13,400+ components

Bulma Component #1788

Get the code for 13,400+ components

Bulma Component #1789

Get the code for 13,400+ components

Bulma Component #1790

Get the code for 13,400+ components

Bulma Component #1791

Get the code for 13,400+ components

Bulma Component #1792

Get the code for 13,400+ components

Bulma Component #1793

Get the code for 13,400+ components

Bulma Component #1794

Get the code for 13,400+ components

Bulma Component #1795

Get the code for 13,400+ components

Bulma Component #1796

Get the code for 13,400+ components

Bulma Component #1797

Get the code for 13,400+ components

Bulma Component #1798

Get the code for 13,400+ components

Bulma Component #1799

Get the code for 13,400+ components

Bulma Component #1800

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