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

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="has-text-weight-bold has-text-white 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/stars5.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/stars4.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/stars3.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/stars2.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 #1742

Bulma

Vendia

<section class="has-background-dark">
  <div class="section py-0">
    <div>
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-7-desktop is-8-widescreen">
          <div class="has-mw-2xl mx-auto px-10-desktop pt-24 pb-24 pb-32-desktop has-text-centered">
            <img class="mx-auto mb-12 is-block image" src="vendia-assets/images/order/happy.png" alt="">
            <p class="has-text-grey-lighter mb-4 has-text-weight-medium">You have successfully ordered all items</p>
            <h4 class="title is-size-2-mobile is-size-1-tablet mb-6 has-text-white">Thank you for the order</h4>
            <p class="subtitle mt-6 mb-32 mb-64-desktop">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once for you turn off page of the transition preloader in theme options. Custom of a support was really quick.</p>
            <div>
              <span class="pr-10 has-text-grey-lighter has-text-weight-medium">Share with your friends</span>
              <div class="mt-5 mb-16 is-flex is-justify-content-center is-align-items-center">
                <a class="mr-5 is-inline-block" href="#">
                  <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M36 18.1102C36 8.10799 27.9415 0 18.0022 0C8.05849 0.00224972 0 8.10799 0 18.1125C0 27.1496 6.58268 34.6412 15.1856 36V23.3453H10.6187V18.1125H15.1901V14.1192C15.1901 9.58155 17.8785 7.07537 21.9888 7.07537C23.9595 7.07537 26.018 7.42857 26.018 7.42857V11.883H23.748C21.5141 11.883 20.8166 13.2801 20.8166 14.7132V18.1102H25.8065L25.0101 23.3431H20.8144V35.9977C29.4173 34.6389 36 27.1474 36 18.1102Z" fill="#EAEDF0"></path>
                  </svg>
                </a>
                <a class="mr-5 is-inline-block" href="#">
                  <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM13.5937 25.4606H9.94875V13.7306H13.5937V25.4606ZM11.7487 12.2906C10.5975 12.2906 9.85312 11.475 9.85312 10.4662C9.85312 9.43687 10.62 8.64562 11.7956 8.64562C12.9712 8.64562 13.6912 9.43687 13.7137 10.4662C13.7137 11.475 12.9712 12.2906 11.7487 12.2906ZM26.9062 25.4606H23.2612V18.96C23.2612 17.4469 22.7325 16.4194 21.4144 16.4194C20.4075 16.4194 19.8094 17.115 19.545 17.7844C19.4475 18.0225 19.4231 18.36 19.4231 18.6956V25.4587H15.7762V17.4713C15.7762 16.0069 15.7294 14.7825 15.6806 13.7287H18.8475L19.0144 15.3581H19.0875C19.5675 14.5931 20.7431 13.4644 22.71 13.4644C25.1081 13.4644 26.9062 15.0712 26.9062 18.525V25.4606Z" fill="#EAEDF0"></path>
                  </svg>
                </a>
                <a class="is-inline-block" href="#">

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

Bulma

Vendia

<section class="section has-background-dark" x-data="{ quantity: 1 }">
  <div class="container">
    <div class="has-mw-md has-mw-none-tablet mx-auto">
      <nav class="breadcrumb" aria-label="breadcrumb">
        <ul>
          <li><a class="has-text-grey-lighter has-text-weight-medium" href="#">Home</a></li>
          <li><a class="has-text-grey-lighter has-text-weight-medium" href="#">Fashion</a></li>
          <li><a class="has-text-primary-gradient" href="#">Basic Gray T-Shirt</a></li>
        </ul>
      </nav>
      <div class="mt-10 columns is-multiline">
        <div class="column is-6-tablet is-7-desktop is-8-widescreen">
          <div class="has-mw-3xl">
            <div class="is-flex-desktop is-covered" style="height: 100%">
              <div class="mr-6-desktop">
                <div class="-mb-4-desktop is-block-desktop is-flex-touch is-block-desktop is-justify-content-space-between">
                  <a class="mb-4 is-block" href="#">
                    <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/clothes1.png" alt="" style="max-height: 80px; max-width: 80px;">
                  </a>
                  <a class="mb-4 is-block" href="#">
                    <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/clothes2.png" alt="" style="max-height: 80px; max-width: 80px;">
                  </a>
                  <a class="mb-4 is-block" href="#">
                    <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/clothes3.png" alt="" style="max-height: 80px; max-width: 80px;">

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

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

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">
            <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>
                        <div>
                          <span class="has-text-grey-lighter mr-5 is-inline-block has-text-weight-medium">Sienna</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 #1746

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

Bulma

Vendia

<section class="section has-background-dark" x-data="{ quantity: 1 }">
  <div class="container">
    <div class="has-mw-md has-mw-none-tablet mx-auto">
      <nav class="breadcrumb" aria-label="breadcrumb">
        <ul>
          <li><a class="has-text-grey-lighter has-text-weight-medium" href="#">Home</a></li>
          <li><a class="has-text-grey-lighter has-text-weight-medium" href="#">Fashion</a></li>
          <li class="is-active"><a class="has-text-primary has-text-weight-medium" href="#" aria-current="page">Basic Gray T-Shirt</a></li>
        </ul>
      </nav>
      <div class="mt-10 columns is-multiline">
        <div class="column is-6-tablet is-7-desktop is-8-widescreen">
          <div class="has-mw-3xl">
            <div class="is-flex-desktop is-covered" style="height: 100%">
              <div class="mr-6-desktop">
                <div class="-mb-4-desktop is-block-desktop is-flex-touch is-block-desktop is-justify-content-space-between">
                  <a class="mb-4 is-block" href="#">
                    <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/clothes1.png" alt="" style="max-height: 80px; max-width: 80px;">
                  </a>
                  <a class="mb-4 is-block" href="#">
                    <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/clothes2.png" alt="" style="max-height: 80px; max-width: 80px;">
                  </a>
                  <a class="mb-4 is-block" href="#">
                    <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/clothes3.png" alt="" style="max-height: 80px; max-width: 80px;">

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

Bulma

Vendia

<section class="has-background-dark">
  <div class="section py-0">
    <div>
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-7-desktop is-8-widescreen">
          <div class="has-mw-2xl mx-auto px-10-desktop pt-24 pb-24 pb-32-desktop has-text-centered">
            <img class="mx-auto mb-12 is-block image" src="vendia-assets/images/order/happy.png" alt="">
            <p class="has-text-grey-lighter mb-4 has-text-weight-medium">You have successfully ordered all items</p>
            <h4 class="title is-size-2-mobile is-size-1-tablet mb-6 has-text-primary-gradient">Thank you for the order</h4>
            <p class="subtitle mt-6 mb-32 mb-64-desktop">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once for you turn off page of the transition preloader in theme options. Custom of a support was really quick.</p>
            <div>
              <span class="pr-10 has-text-grey-lighter has-text-weight-medium">Share with your friends</span>
              <div class="mt-5 mb-16 is-flex is-justify-content-center is-align-items-center">
                <a class="mr-5 is-inline-block" href="#">
                  <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M36 18.1102C36 8.10799 27.9415 0 18.0022 0C8.05849 0.00224972 0 8.10799 0 18.1125C0 27.1496 6.58268 34.6412 15.1856 36V23.3453H10.6187V18.1125H15.1901V14.1192C15.1901 9.58155 17.8785 7.07537 21.9888 7.07537C23.9595 7.07537 26.018 7.42857 26.018 7.42857V11.883H23.748C21.5141 11.883 20.8166 13.2801 20.8166 14.7132V18.1102H25.8065L25.0101 23.3431H20.8144V35.9977C29.4173 34.6389 36 27.1474 36 18.1102Z" fill="#EAEDF0"></path>
                  </svg>
                </a>
                <a class="mr-5 is-inline-block" href="#">
                  <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 0C8.05875 0 0 8.05875 0 18C0 27.9412 8.05875 36 18 36C27.9412 36 36 27.9412 36 18C36 8.05875 27.9412 0 18 0ZM13.5937 25.4606H9.94875V13.7306H13.5937V25.4606ZM11.7487 12.2906C10.5975 12.2906 9.85312 11.475 9.85312 10.4662C9.85312 9.43687 10.62 8.64562 11.7956 8.64562C12.9712 8.64562 13.6912 9.43687 13.7137 10.4662C13.7137 11.475 12.9712 12.2906 11.7487 12.2906ZM26.9062 25.4606H23.2612V18.96C23.2612 17.4469 22.7325 16.4194 21.4144 16.4194C20.4075 16.4194 19.8094 17.115 19.545 17.7844C19.4475 18.0225 19.4231 18.36 19.4231 18.6956V25.4587H15.7762V17.4713C15.7762 16.0069 15.7294 14.7825 15.6806 13.7287H18.8475L19.0144 15.3581H19.0875C19.5675 14.5931 20.7431 13.4644 22.71 13.4644C25.1081 13.4644 26.9062 15.0712 26.9062 18.525V25.4606Z" fill="#EAEDF0"></path>
                  </svg>
                </a>
                <a class="is-inline-block" href="#">

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

Bulma

Vendia

<section>
  <div class="has-background-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 #1750

Bulma

Vendia

<section class="section has-background-dark" x-data="{ active: 1 }">
  <div class="container">
    <nav class="pagination is-centered" role="navigation">
      <ul class="pagination-list">
        <li><a x-ref="page1" x-on:click.prevent="active = $refs.page1.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current': active == $refs.page1.textContent }" href="#">1</a></li>
        <li><a x-ref="page2" x-on:click.prevent="active = $refs.page2.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current': active == $refs.page2.textContent }" href="#">2</a></li>
        <li><a x-ref="page3" x-on:click.prevent="active = $refs.page3.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current': active == $refs.page3.textContent }" href="#">3</a></li>
        <li><a x-ref="page4" x-on:click.prevent="active = $refs.page4.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current': active == $refs.page4.textContent }" href="#">4</a></li>
        <li><a x-ref="page5" x-on:click.prevent="active = $refs.page5.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current': active == $refs.page5.textContent }" href="#">5</a></li>
      </ul>
    </nav>
  </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 #1751

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="is-flex-desktop is-justify-content-center is-align-items-center">
      <div class="is-flex is-align-items-center">
        <div class="mr-4 is-inline-flex is-justify-content-center is-align-items-center has-text-weight-bold has-background-primary is-rounded has-text-dark" 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-touch mx-8-touch mx-8-tablet mx-16-widescreen">
        <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 is-justify-content-center is-align-items-center has-text-weight-bold has-background-grey-dark 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-touch mx-8-touch mx-8-tablet mx-16-widescreen">
        <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 is-justify-content-center is-align-items-center has-text-weight-bold has-background-grey-dark 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

Bulma Component #1752

Bulma

Vendia

<section x-data="{ cart: true }" :class="{ 'is-hidden': !cart }" class="is-relative is-clipped has-background-white">
  <div class="py-12-mobile py-24-tablet is-fixed is-top-0 is-left-0" style="width: 100%;">
    <div class="has-mw-lg mx-auto px-8 pt-6 pb-8 has-background-grey-dark">
      <div class="mb-10 is-flex is-justify-content-space-between is-align-items-center">
        <h6 class="title is-size-4 has-text-white mb-0">Shopping Cart</h6>
        <button x-on:click="cart = false" class="button is-ghost p-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>
      <div class="pb-6 columns is-multiline" x-data="{ item: true }" :class="{ 'is-hidden': !item }">
        <div class="column is-3">
          <img class="image is-fullwidth is-covered" src="vendia-assets/images/cart-popup/item1.png" alt="" style="max-width: 110px; height: 100%">
        </div>
        <div class="column is-6">
          <div class="is-flex is-flex-direction-column is-covered" style="height: 100%">
            <h6 class="has-text-white has-text-weight-bold mb-1">Zip Tote Basket</h6>
            <span class="has-text-grey mb-auto is-block has-text-weight-medium">White and black</span>
            <div class="control">
              <div class="select">
                <select class="has-background-grey-dark" name="" id="" style="border: none;">
                  <option value="">1</option>
                  <option value="">2</option>

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

Bulma

Vendia

<section x-data="{ cart: true }" :class="{ 'is-hidden': !cart }" class="is-relative is-clipped has-background-white">
  <div class="py-12-mobile py-24-tablet is-fixed is-top-0 is-left-0" style="width: 100%;">
    <div class="has-mw-lg mx-auto px-8 pt-6 pb-8 has-background-grey-dark">
      <div class="mb-10 is-flex is-justify-content-space-between is-align-items-center">
        <h6 class="title is-size-4 has-text-white mb-0">Shopping Cart</h6>
        <button x-on:click="cart = false" class="button is-ghost p-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>
      <div class="pb-6 columns is-multiline" x-data="{ item: true }" :class="{ 'is-hidden': !item }">
        <div class="column is-3">
          <img class="image is-fullwidth is-covered" src="vendia-assets/images/cart-popup/item1.png" alt="" style="max-width: 110px; height: 100%">
        </div>
        <div class="column is-6">
          <div class="is-flex is-flex-direction-column is-covered" style="height: 100%">
            <h6 class="has-text-white has-text-weight-bold mb-1">Zip Tote Basket</h6>
            <span class="has-text-grey mb-auto is-block has-text-weight-medium">White and black</span>
            <div class="control">
              <div class="select">
                <select class="has-background-grey-dark" name="" id="" style="border: none;">
                  <option value="">1</option>
                  <option value="">2</option>

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

Bulma

Vendia

<section class="section py-12 py-24-tablet py-32-desktop has-background-dark">
  <div class="container">
    <div class="has-mw-xl mx-auto has-text-centered">
      <h3 class="title is-size-2-mobile is-size-1 has-text-white mb-5">Grab 30% Off Today</h3>
      <p class="has-text-grey-lighter mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="buttons is-centered"><a class="button is-borderless has-background-gradient-primary" href="#">Shop &amp; Save Now</a><a class="button has-background-white has-text-dark" href="#">Explore All</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 #1755

Bulma

Vendia

<section class="section has-background-dark" x-data="{ active: 1 }">
  <div class="container">
    <nav class="pagination is-centered" role="navigation">
      <ul class="pagination-list">
        <li><a x-ref="page1" x-on:click.prevent="active = $refs.page1.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == $refs.page1.textContent }" href="#">1</a></li>
        <li><a x-ref="page2" x-on:click.prevent="active = $refs.page2.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == $refs.page2.textContent }" href="#">2</a></li>
        <li><a x-ref="page3" x-on:click.prevent="active = $refs.page3.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == $refs.page3.textContent }" href="#">3</a></li>
        <li><a x-ref="page4" x-on:click.prevent="active = $refs.page4.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == $refs.page4.textContent }" href="#">4</a></li>
        <li><a x-ref="page5" x-on:click.prevent="active = $refs.page5.textContent" class="pagination-link has-text-weight-bold" :class="{ 'is-current is-borderless has-background-gradient-primary': active == $refs.page5.textContent }" href="#">5</a></li>
      </ul>
    </nav>
  </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 #1756

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <h1 class="title is-size-2 has-text-white mb-16 has-text-centered">Shop by category</h1>
    <div class="mb-20 mx-n3 is-flex">
      <div class="px-3 is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">
          <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/category/category-item1.png" alt="" style="height: 160px; object-fit: cover;">
          <h6 class="has-text-primary-gradient">Trendy Fashion</h6>
        </a>
      </div>
      <div class="px-3 is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">
          <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/category/category-item5.png" alt="" style="height: 160px; object-fit: cover;">
          <h6 class="has-text-primary-gradient">Winter Collection</h6>
        </a>
      </div>
      <div class="px-3 is-block-tablet is-hidden-mobile is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">
          <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/category/category-item2.png" alt="" style="height: 160px; object-fit: cover;">
          <h6 class="has-text-primary-gradient">Beauty</h6>
        </a>
      </div>
      <div class="px-3 is-block-widescreen is-hidden-mobile is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-sm has-mw-none-desktop has-mw-xl-tablet mx-auto">
      <div class="mb-16">
        <span class="is-size-6 has-text-primary has-text-weight-bold">Trending</span>
        <h1 class="title is-size-2 has-text-white mt-6 mb-3">The best of the best</h1>
        <p class="subtitle mt-3">The coolest, hottest furniture pieces.</p>
      </div>
      <div class="-mb-8 columns is-multiline">
        <div class="column is-3-desktop is-6-tablet mb-8">
          <a class="is-block" href="#">
            <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/item-cards/shirt-products4.png" alt="" style="height: 365px; object-fit: cover;">
            <span class="has-text-primary has-text-weight-bold">$99.63</span>
            <h6 class="has-text-white has-text-weight-bold mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <a class="is-block" href="#">
            <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/item-cards/shirt-products3.png" alt="" style="height: 365px; object-fit: cover;">
            <span class="has-text-primary has-text-weight-bold">$99.63</span>
            <h6 class="has-text-white has-text-weight-bold mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1758

Bulma

Vendia

<section class="section py-12 py-24-tablet py-32-desktop has-background-dark">
  <div class="container">
    <div class="has-mw-xl mx-auto has-text-centered">
      <h3 class="title is-size-2-mobile is-size-1 has-text-white mb-5">Grab 30% Off Today</h3>
      <p class="has-text-grey-lighter mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Shop &amp; Save Now</a><a class="button has-background-white has-text-dark" href="#">Explore All</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 #1759

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-sm has-mw-none-desktop has-mw-xl-tablet mx-auto">
      <div class="mb-16">
        <span class="is-inline-block is-size-6 has-text-primary-gradient">Trending</span>
        <h1 class="title is-size-2 has-text-white mt-6 mb-3">The best of the best</h1>
        <p class="subtitle mt-3">The coolest, hottest furniture pieces.</p>
      </div>
      <div class="-mb-8 columns is-multiline">
        <div class="column is-3-desktop is-6-tablet mb-8">
          <a class="is-block" href="#">
            <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/item-cards/shirt-products4.png" alt="" style="height: 365px; object-fit: cover;">
            <span class="has-text-primary-gradient">$99.63</span>
            <h6 class="has-text-white has-text-weight-bold mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">
          <a class="is-block" href="#">
            <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/item-cards/shirt-products3.png" alt="" style="height: 365px; object-fit: cover;">
            <span class="has-text-primary-gradient">$99.63</span>
            <h6 class="has-text-white has-text-weight-bold mt-2">Summer T-Shirt 0492</h6>
          </a>
        </div>
        <div class="column is-3-desktop is-6-tablet mb-8">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1760

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="pb-20 columns is-multiline">
      <div class="column is-12-tablet is-6-widescreen mb-8 mb-0-widescreen">
        <div class="has-mw-md">
          <a class="mb-20 is-inline-block" href="#">
            <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="" style="height: 30px;">
          </a>
          <p class="has-text-grey-lighter is-size-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum aliquet accumsan porta lectus ridiculus in mattis.</p>
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div>
          <h6 class="has-text-grey-lighter mb-6 has-text-weight-medium">Company</h6>
          <ul class="mb-0">
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">About</a></li>
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Support</a></li>
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Products</a></li>
            <li><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <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 #1741

Get the code for 13,400+ components

Bulma Component #1742

Get the code for 13,400+ components

Bulma Component #1743

Get the code for 13,400+ components

Bulma Component #1744

Get the code for 13,400+ components

Bulma Component #1745

Get the code for 13,400+ components

Bulma Component #1746

Get the code for 13,400+ components

Bulma Component #1747

Get the code for 13,400+ components

Bulma Component #1748

Get the code for 13,400+ components

Bulma Component #1749

Get the code for 13,400+ components

Bulma Component #1750

Get the code for 13,400+ components

Bulma Component #1751

Get the code for 13,400+ components

Bulma Component #1752

Get the code for 13,400+ components

Bulma Component #1753

Get the code for 13,400+ components

Bulma Component #1754

Get the code for 13,400+ components

Bulma Component #1755

Get the code for 13,400+ components

Bulma Component #1756

Get the code for 13,400+ components

Bulma Component #1757

Get the code for 13,400+ components

Bulma Component #1758

Get the code for 13,400+ components

Bulma Component #1759

Get the code for 13,400+ components

Bulma Component #1760

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