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

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-20 has-text-centered">
        <span class="has-text-primary-gradient">Recent Products</span>
        <h1 class="title is-size-3 has-text-white mt-3">Minimal Items, Perfect Interior</h1>
      </div>
      <div class="columns is-multiline">
        <div class="column is-3-desktop is-6-tablet">
          <div class="px-4 pt-4 pb-2" style="border: 1px solid rgba(33, 33, 36, 1);">
            <img class="mb-4 is-block image is-fullwidth" src="vendia-assets/images/item-cards/decoration1.png" alt="" style="height: 258px; object-fit: cover;">
            <div>
              <div class="mb-2 is-flex is-justify-content-space-between is-align-items-center">
                <span class="is-size-7 has-text-grey-lighter">Cleanser</span>
                <span class="is-size-7 has-text-primary has-text-weight-bold">$ 56.00 USD</span>
              </div>
              <h6 class="has-text-white mb-4 has-text-weight-medium">Wooden Tool</h6>
              <a class="button is-borderless has-background-gradient-primary is-fullwidth" href="#">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="column is-3-desktop is-6-tablet">
          <div class="px-4 pt-4 pb-2" style="border: 1px solid rgba(33, 33, 36, 1);">
            <img class="mb-4 is-block image is-fullwidth" src="vendia-assets/images/item-cards/decoration4.png" alt="" style="height: 258px; object-fit: cover;">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="px-8 px-12-tablet py-12 has-background-grey-darker">
      <div class="mb-6 pb-12" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
        <h5 class="title is-size-3 has-text-white mb-0">Your order has been confirmed and will be shipping soon.</h5>
      </div>
      <div class="mb-14 pb-8" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
        <div class="columns is-multiline">
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Order Date</span>
            <span class="has-text-white has-text-weight-bold">18 March, 2021</span>
          </div>
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Order Code</span>
            <span class="has-text-white has-text-weight-bold">BK98601090</span>
          </div>
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Payment</span>
            <span class="has-text-white has-text-weight-bold">Visa -4699</span>
          </div>
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Address</span>
            <span class="has-text-white has-text-weight-bold">8502 Preston Road</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 #1823

Bulma

Vendia

<section x-data="{ alert: true }" :class="{ 'is-hidden': !alert }">
  <div class="section py-4 is-relative">
    <img class="is-absolute is-top-0 is-left-0" src="vendia-assets/images/alerts/bg-yellow.png" alt="" style="width: 100%; height: 100%;">
    <div class="container is-relative">
      <div>
        <p class="has-text-white has-text-weight-medium">Get 50% off the first week with the promo code HER050</p>
      </div>
    </div>
    <button x-on:click="alert = false" class="button is-ghost is-absolute is-top-0 is-right-0">
      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 18L18 6M6 6L18 18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>
  </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 #1824

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-4-widescreen">
        <div class="has-mw-md mx-auto is-flex is-align-items-center">
          <div class="mr-5 is-inline-flex is-justify-content-center is-align-items-center is-flex-shrink-0 is-rounded" style="width: 60px; height: 60px; border: 1.5px solid #212124;">
            <svg width="26" height="16" viewbox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.3333 1.33337H25M25 1.33337V12M25 1.33337L14.3333 12L9 6.66671L1 14.6667" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h4 class="has-text-white is-size-4 has-text-weight-bold">Get trending items</h4>
            <span class="has-text-grey-lighter has-text-weight-medium">on inbox</span>
          </div>
        </div>
      </div>
      <div class="column is-12-tablet is-4-widescreen">
        <div class="has-mw-md mx-auto is-flex is-align-items-center">
          <div class="mr-5 is-inline-flex is-justify-content-center is-align-items-center is-flex-shrink-0 is-rounded" style="width: 60px; height: 60px; border: 1.5px solid #212124;">
            <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.904 20.571C25.5317 20.1987 25.0576 19.9449 24.5413 19.8417L21.358 19.205C19.6135 18.8561 17.8025 19.0986 16.2113 19.8942L15.7881 20.1058C14.197 20.9014 12.386 21.144 10.6415 20.7951L8.06584 20.2799C7.19155 20.1051 6.28771 20.3787 5.65725 21.0092M10.6664 5.33337H21.3331L19.9997 6.66671V13.5621C19.9997 14.2694 20.2807 14.9477 20.7808 15.4478L27.4475 22.1144C29.1274 23.7943 27.9376 26.6667 25.5618 26.6667H6.43764C4.06189 26.6667 2.87211 23.7943 4.55202 22.1144L11.2187 15.4478C11.7188 14.9477 11.9997 14.2694 11.9997 13.5621V6.66671L10.6664 5.33337Z" stroke="#F2FF5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </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 #1825

Bulma

Vendia

<section x-data="{ alert: true }" :class="{ 'is-hidden': !alert }">
  <div class="section py-4 is-relative has-background-dark">
    <div class="container is-relative">
      <div>
        <p class="has-text-white has-text-weight-medium">Get 50% off the first week with the promo code HER050</p>
      </div>
    </div>
    <button x-on:click="alert = false" class="button is-ghost is-absolute is-top-0 is-right-0">
      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 18L18 6M6 6L18 18" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>
  </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 #1826

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-4-widescreen">
        <div class="has-mw-md mx-auto is-flex is-align-items-center">
          <div class="mr-5 is-inline-flex is-justify-content-center is-align-items-center is-flex-shrink-0 is-rounded" style="width: 60px; height: 60px; border: 1.5px solid #212124;">
            <svg width="26" height="16" viewbox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.3333 1.33337H25M25 1.33337V12M25 1.33337L14.3333 12L9 6.66671L1 14.6667" stroke="url(#paint0_linear_3069_75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <defs><lineargradient id="paint0_linear_3069_75" x1="1" y1="1.33337" x2="22.7842" y2="17.6288" 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>
          </div>
          <div>
            <h4 class="has-text-white is-size-4 has-text-weight-bold">Get trending items</h4>
            <span class="has-text-grey-lighter has-text-weight-medium">on inbox</span>
          </div>
        </div>
      </div>
      <div class="column is-12-tablet is-4-widescreen">
        <div class="has-mw-md mx-auto is-flex is-align-items-center">
          <div class="mr-5 is-inline-flex is-justify-content-center is-align-items-center is-flex-shrink-0 is-rounded" style="width: 60px; height: 60px; border: 1.5px solid #212124;">
            <svg width="28" height="24" viewbox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.904 16.571C23.5317 16.1987 23.0576 15.9449 22.5413 15.8417L19.358 15.205C17.6135 14.8561 15.8025 15.0986 14.2113 15.8942L13.7881 16.1058C12.197 16.9014 10.386 17.144 8.64151 16.7951L6.06584 16.2799C5.19155 16.1051 4.28771 16.3787 3.65725 17.0092M8.6664 1.33337H19.3331L17.9997 2.66671V9.56214C17.9997 10.2694 18.2807 10.9477 18.7808 11.4478L25.4475 18.1144C27.1274 19.7943 25.9376 22.6667 23.5618 22.6667H4.43764C2.06189 22.6667 0.872114 19.7943 2.55202 18.1144L9.21869 11.4478C9.71878 10.9477 9.99973 10.2694 9.99973 9.56214V2.66671L8.6664 1.33337Z" stroke="url(#paint0_linear_3069_93)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <defs><lineargradient id="paint0_linear_3069_93" x1="1.76562" y1="1.33337" x2="29.99" y2="14.7863" 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>

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

Bulma

Vendia

<section class="section has-background-dark" x-data="{ showContent: false }">
  <div class="container">
    <div class="has-mw-md mx-auto has-mw-none-tablet">
      <div class="mb-10 columns is-multiline is-align-items-end">
        <div class="column is-6">
          <h1 class="title is-size-2 has-text-white">Shop by Category</h1>
        </div>
        <div class="column is-6 has-text-right-tablet">
          <a x-on:click.prevent="showContent = true" :class="{ 'is-hidden': showContent, 'is-inline-flex': !showContent }" class="is-align-items-center has-text-primary has-text-weight-medium" href="#">
            <span class="mr-3">Browse all categories</span>
            <svg width="11" height="12" viewbox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.95669 1.75742L9.55635 1.75742M9.55635 1.75742L9.55635 8.35709M9.55635 1.75742L1.07107 10.2427" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-6">
          <a class="is-block is-relative is-clipped is-covered" href="#" style="height: 100%">
            <div class="is-absolute is-bottom-0 is-left-0 p-8" style="width: 100%; z-index: 1;">
              <h4 class="title is-size-4 has-text-white mb-2">New Arrivals</h4>
              <span class="has-text-primary has-text-weight-medium">Shop now</span>
            </div>
            <img class="is-block image is-fullwidth" src="vendia-assets/images/category/shop-category-style1.png" alt="" style="object-fit: cover;">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-lg-tablet mx-auto">
      <div class="is-relative">
        <div class="is-hidden-mobile mt-3 px-10 is-absolute is-top-0 is-left-0" style="width: 100%;">
          <div class="has-background-grey-dark" style="height: 1.5px; width: 100%;"></div>
        </div>
        <div class="is-flex-tablet is-relative is-justify-content-space-between is-align-items-center">
          <div class="has-text-centered mb-10-mobile">
            <div class="px-2 is-inline-block has-background-dark">
              <div class="is-inline-flex is-align-items-center has-background-gradient-primary is-rounded" style="width: 30px; height: 30px;">
                <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.95898 16.2917L13.1257 19.4584L21.0423 11.5417" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
            <span class="has-text-white mt-3 is-block has-text-weight-bold">Cart</span>
          </div>
          <div class="has-text-centered mb-10-mobile">
            <div class="px-2 is-inline-block has-background-dark">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="15" cy="15" r="14.5" fill="black" stroke="#F2FF5A"></circle>
                <path d="M9.95898 16.2917L13.1257 19.4584L21.0423 11.5417" stroke="#F2FF5A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </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 #1829

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-lg-tablet mx-auto">
      <div class="is-relative">
        <div class="is-hidden-mobile mt-3 px-10 is-absolute is-top-0 is-left-0" style="width: 100%;">
          <div class="has-background-grey-dark" style="height: 1.5px; width: 100%;"></div>
        </div>
        <div class="is-flex-tablet is-relative is-justify-content-space-between is-align-items-center">
          <div class="has-text-centered mb-10-mobile">
            <div class="px-2 is-inline-block has-background-dark">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="15" cy="15" r="15" fill="#F2FF5A"></circle>
                <path d="M9.95898 16.2917L13.1257 19.4584L21.0423 11.5417" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span class="has-text-white mt-3 is-block has-text-weight-bold">Cart</span>
          </div>
          <div class="has-text-centered mb-10-mobile">
            <div class="px-2 is-inline-block has-background-dark">
              <svg width="30" height="30" viewbox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="15" cy="15" r="14.5" fill="black" stroke="#F2FF5A"></circle>
                <path d="M9.95898 16.2917L13.1257 19.4584L21.0423 11.5417" stroke="#F2FF5A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></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 #1830

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="px-8 px-12-tablet py-12 has-background-grey-darker">
      <div class="mb-6 pb-12 is-relative">
        <div class="is-absolute is-bottom-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 1px;"></div>
        <h5 class="title is-size-3 has-text-white mb-0">Your order has been confirmed and will be shipping soon.</h5>
      </div>
      <div class="mb-14 pb-8 is-relative">
        <div class="is-absolute is-bottom-0 is-left-0 has-background-gradient-primary" style="width: 100%; height: 1px;"></div>
        <div class="columns is-multiline">
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Order Date</span>
            <span class="has-text-white has-text-weight-bold">18 March, 2021</span>
          </div>
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Order Code</span>
            <span class="has-text-white has-text-weight-bold">BK98601090</span>
          </div>
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Payment</span>
            <span class="has-text-white has-text-weight-bold">Visa -4699</span>
          </div>
          <div class="column is-12-tablet is-3-desktop">
            <span class="has-text-grey-lighter mb-1 is-block has-text-weight-medium">Address</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 #1831

Bulma

Vendia

<section class="section has-background-dark" x-data="{ showContent: false }">
  <div class="container">
    <div class="has-mw-md mx-auto has-mw-none-tablet">
      <div class="mb-10 columns is-multiline is-align-items-end">
        <div class="column is-6">
          <h1 class="title is-size-2 has-text-white">Shop by Category</h1>
        </div>
        <div class="column is-6 has-text-right-tablet">
          <a x-on:click.prevent="showContent = true" :class="{ 'is-hidden': showContent, 'is-inline-flex': !showContent }" class="is-align-items-center has-text-primary-gradient" href="#">
            <span class="mr-3">Browse all categories</span>
            <svg width="11" height="10" viewbox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.95645 0.757299L9.55611 0.757299M9.55611 0.757299L9.55611 7.35696M9.55611 0.757299L1.07083 9.24258" stroke="url(#paint0_linear_3069_969)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <defs><lineargradient id="paint0_linear_3069_969" x1="-2.229" y1="5.94275" x2="12.1075" y2="1.59138" 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>
          </a>
        </div>
      </div>
      <div class="columns is-multiline">
        <div class="column is-6">
          <a class="is-block is-relative is-clipped is-covered" href="#" style="height: 100%">
            <div class="is-absolute is-bottom-0 is-left-0 p-8" style="width: 100%; z-index: 1;">
              <h4 class="title is-size-4 has-text-white mb-2">New Arrivals</h4>
              <span class="has-text-primary-gradient">Shop now</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 #1832

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-8 columns is-multiline is-vcentered">
      <div class="column is-6">
        <h4 class="title is-size-3 has-text-white">Order #54879</h4>
      </div>
      <div class="column is-6 has-text-right">
        <div class="is-flex-desktop is-justify-content-end is-align-items-center">
          <div class="mr-9-desktop">
            <span class="has-text-grey-lighter mr-2 has-text-weight-medium">Order placed</span>
            <span class="has-text-white has-text-weight-medium">March 22,2021</span>
          </div>
          <a class="is-inline-flex is-align-items-center has-text-weight-bold" href="#">
            <span class="has-text-primary-gradient mr-2">View invoice</span>
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="#F2FF5A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="mb-10 has-background-grey-darker">
      <div class="px-6-mobile px-10-tablet py-10" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
        <div class="columns is-multiline">

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

Bulma

Vendia

<section class="has-background-dark is-clipped">
  <div>
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-5-desktop has-background-grey-darker">
        <div class="px-5 px-10-tablet pt-20 pt-32-tablet pb-24 is-covered" style=" height: 100%">
          <div class="has-mw-md mx-auto">
            <h5 class="title is-size-4 has-text-white mb-16">Your Orders</h5>
            <div class="mb-24 is-flex is-align-items-center">
              <img class="image is-fullwidth" src="vendia-assets/images/order/item1.png" alt="" style="width: 70px; height: 70px;">
              <div class="pl-5">
                <a class="has-text-white mb-1 is-inline-block has-text-weight-bold" href="#">Wireframing Kit for Figma</a>
                <span class="has-text-grey-lighter is-block">The Basic Kit</span>
              </div>
            </div>
            <div>
              <h5 class="title is-size-4 has-text-white">Access this later?</h5>
              <p class="has-text-grey-lighter mb-8">Enter a password below to create a Lemon Squeezy account. Keep track of orders and access downloads at any time.</p>
              <div class="field mb-8">
                <div class="control has-icons-right">
                  <input class="input has-background-grey-dark" type="password" placeholder="*********">
                  <span class="icon is-right">
                    <button class="button is-ghost p-0">
                      <svg width="16" height="12" viewbox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.99984 6.35148C9.99984 7.45605 9.10441 8.35148 7.99984 8.35148C6.89527 8.35148 5.99984 7.45605 5.99984 6.35148C5.99984 5.24691 6.89527 4.35148 7.99984 4.35148C9.10441 4.35148 9.99984 5.24691 9.99984 6.35148Z" stroke="white" stroke-width="1.5" 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 #1834

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-xl has-mw-3xl-widescreen mx-auto">
      <div class="mb-7 is-flex">
        <div class="mr-4 is-flex-shrink-0">
          <img class="is-block image is-fullwidth" src="vendia-assets/images/reviews/avatar-people-testimonial1.png" alt="">
        </div>
        <div class="has-mw-2xl pb-8 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 is-block has-text-weight-bold">Emily Selmon</span>
          <span class="has-text-grey-lighter mb-4 is-block">July 16, 2021</span>
          <div class="mb-3">
            <svg width="100" height="20" viewbox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.04917 3.92707C9.34853 3.00576 10.6519 3.00576 10.9513 3.92707L12.0209 7.21886C12.1547 7.63089 12.5387 7.90985 12.9719 7.90985H16.4331C17.4018 7.90985 17.8046 9.14946 17.0209 9.71886L14.2207 11.7533C13.8702 12.0079 13.7236 12.4593 13.8575 12.8713L14.927 16.1631C15.2264 17.0844 14.1719 17.8506 13.3882 17.2812L10.588 15.2467C10.2375 14.9921 9.76293 14.9921 9.41244 15.2467L6.61227 17.2812C5.82856 17.8506 4.77408 17.0844 5.07343 16.1631L6.143 12.8713C6.27688 12.4593 6.13022 12.0079 5.77973 11.7533L2.97956 9.71886C2.19585 9.14946 2.59862 7.90985 3.56735 7.90985H7.02855C7.46177 7.90985 7.84573 7.63089 7.9796 7.21886L9.04917 3.92707Z" fill="#EDFF7C"></path>
              <path d="M29.0492 3.92707C29.3485 3.00576 30.6519 3.00576 30.9513 3.92707L32.0209 7.21886C32.1547 7.63089 32.5387 7.90985 32.9719 7.90985H36.4331C37.4018 7.90985 37.8046 9.14946 37.0209 9.71886L34.2207 11.7533C33.8702 12.0079 33.7236 12.4593 33.8575 12.8713L34.927 16.1631C35.2264 17.0844 34.1719 17.8506 33.3882 17.2812L30.588 15.2467C30.2375 14.9921 29.7629 14.9921 29.4124 15.2467L26.6123 17.2812C25.8286 17.8506 24.7741 17.0844 25.0734 16.1631L26.143 12.8713C26.2769 12.4593 26.1302 12.0079 25.7797 11.7533L22.9796 9.71886C22.1958 9.14946 22.5986 7.90985 23.5673 7.90985H27.0285C27.4618 7.90985 27.8457 7.63089 27.9796 7.21886L29.0492 3.92707Z" fill="#EDFF7C"></path>
              <path d="M49.0492 3.92707C49.3485 3.00576 50.6519 3.00576 50.9513 3.92707L52.0209 7.21886C52.1547 7.63089 52.5387 7.90985 52.9719 7.90985H56.4331C57.4018 7.90985 57.8046 9.14946 57.0209 9.71886L54.2207 11.7533C53.8702 12.0079 53.7236 12.4593 53.8575 12.8713L54.927 16.1631C55.2264 17.0844 54.1719 17.8506 53.3882 17.2812L50.588 15.2467C50.2375 14.9921 49.7629 14.9921 49.4124 15.2467L46.6123 17.2812C45.8286 17.8506 44.7741 17.0844 45.0734 16.1631L46.143 12.8713C46.2769 12.4593 46.1302 12.0079 45.7797 11.7533L42.9796 9.71886C42.1958 9.14946 42.5986 7.90985 43.5673 7.90985H47.0285C47.4618 7.90985 47.8457 7.63089 47.9796 7.21886L49.0492 3.92707Z" fill="#EDFF7C"></path>
              <path d="M69.0492 3.92707C69.3485 3.00576 70.6519 3.00576 70.9513 3.92707L72.0209 7.21886C72.1547 7.63089 72.5387 7.90985 72.9719 7.90985H76.4331C77.4018 7.90985 77.8046 9.14946 77.0209 9.71886L74.2207 11.7533C73.8702 12.0079 73.7236 12.4593 73.8575 12.8713L74.927 16.1631C75.2264 17.0844 74.1719 17.8506 73.3882 17.2812L70.588 15.2467C70.2375 14.9921 69.7629 14.9921 69.4124 15.2467L66.6123 17.2812C65.8286 17.8506 64.7741 17.0844 65.0734 16.1631L66.143 12.8713C66.2769 12.4593 66.1302 12.0079 65.7797 11.7533L62.9796 9.71886C62.1958 9.14946 62.5986 7.90985 63.5673 7.90985H67.0285C67.4618 7.90985 67.8457 7.63089 67.9796 7.21886L69.0492 3.92707Z" fill="#EDFF7C"></path>
              <path d="M89.0492 3.92707C89.3485 3.00576 90.6519 3.00576 90.9513 3.92707L92.0209 7.21886C92.1547 7.63089 92.5387 7.90985 92.9719 7.90985H96.4331C97.4018 7.90985 97.8046 9.14946 97.0209 9.71886L94.2207 11.7533C93.8702 12.0079 93.7236 12.4593 93.8575 12.8713L94.927 16.1631C95.2264 17.0844 94.1719 17.8506 93.3882 17.2812L90.588 15.2467C90.2375 14.9921 89.7629 14.9921 89.4124 15.2467L86.6123 17.2812C85.8286 17.8506 84.7741 17.0844 85.0734 16.1631L86.143 12.8713C86.2769 12.4593 86.1302 12.0079 85.7797 11.7533L82.9796 9.71886C82.1958 9.14946 82.5986 7.90985 83.5673 7.90985H87.0285C87.4618 7.90985 87.8457 7.63089 87.9796 7.21886L89.0492 3.92707Z" fill="#84878A"></path>
            </svg>
          </div>
          <p class="has-text-grey-lighter">You made it so simple. My new site is so much faster and easier to work with than my old sit. I am just choose the page, make the changes that can make you too.</p>
        </div>
      </div>
      <div class="mb-7 is-flex">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-14 has-mw-lg has-mw-none-tablet mx-auto 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 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 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="mr-4 is-inline-flex has-background-primary is-justify-content-center is-align-items-center has-text-weight-bold is-rounded has-text-dark" 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

Bulma Component #1836

Bulma

Vendia

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent">
  <nav class="navbar is-relative py-5 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 is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <div class="navbar-start"><a class="navbar-item has-text-grey-lighter" href="#">Home</a><a x-on:mouseover="dropdown = true" class="navbar-item has-text-primary-gradient" href="#">Browse</a><a class="navbar-item has-text-grey-lighter" href="#">Collection</a><a class="navbar-item has-text-grey-lighter" href="#">Contact</a></div>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item px-0">
          <a class="is-inline-block" href="#">
            <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.5 16.5L11.5 11.5M13.1667 7.33333C13.1667 10.555 10.555 13.1667 7.33333 13.1667C4.11167 13.1667 1.5 10.555 1.5 7.33333C1.5 4.11167 4.11167 1.5 7.33333 1.5C10.555 1.5 13.1667 4.11167 13.1667 7.33333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="navbar-item"><a class="button is-size-6 is-borderless has-background-gradient-primary" href="#">Create Free Account</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 #1837

Bulma

Vendia

<section class="has-background-dark is-clipped">
  <div>
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-5-desktop has-background-grey-darker">
        <div class="px-5 px-10-tablet pt-20 pt-32-tablet pb-24 is-covered" style=" height: 100%">
          <div class="has-mw-md mx-auto">
            <h5 class="title is-size-4 has-text-white mb-16">Your Orders</h5>
            <div class="mb-24 is-flex is-align-items-center">
              <img class="image is-fullwidth" src="vendia-assets/images/order/item1.png" alt="" style="width: 70px; height: 70px;">
              <div class="pl-5">
                <a class="has-text-white mb-1 is-inline-block has-text-weight-bold" href="#">Wireframing Kit for Figma</a>
                <span class="has-text-grey-lighter is-block">The Basic Kit</span>
              </div>
            </div>
            <div>
              <h5 class="title is-size-4 has-text-white">Access this later?</h5>
              <p class="has-text-grey-lighter mb-8">Enter a password below to create a Lemon Squeezy account. Keep track of orders and access downloads at any time.</p>
              <div class="field mb-8">
                <div class="control has-icons-right">
                  <input class="input has-background-grey-dark" type="password" placeholder="*********">
                  <span class="icon is-right">
                    <button class="button is-ghost p-0">
                      <svg width="16" height="12" viewbox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9.99984 6.35148C9.99984 7.45605 9.10441 8.35148 7.99984 8.35148C6.89527 8.35148 5.99984 7.45605 5.99984 6.35148C5.99984 5.24691 6.89527 4.35148 7.99984 4.35148C9.10441 4.35148 9.99984 5.24691 9.99984 6.35148Z" stroke="white" stroke-width="1.5" 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 #1838

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-8 columns is-multiline is-vcentered">
      <div class="column is-6">
        <h4 class="title is-size-3 has-text-white">Order #54879</h4>
      </div>
      <div class="column is-6 has-text-right">
        <div class="is-flex-desktop is-justify-content-end is-align-items-center">
          <div class="mr-9-desktop">
            <span class="has-text-grey-lighter mr-2 has-text-weight-medium">Order placed</span>
            <span class="has-text-white has-text-weight-medium">March 22,2021</span>
          </div>
          <a class="is-inline-flex is-align-items-center has-text-weight-bold" href="#">
            <span class="has-text-primary mr-2">View invoice</span>
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="#F2FF5A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="mb-10 has-background-grey-darker">
      <div class="px-6-mobile px-10-tablet py-10" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
        <div class="columns is-multiline">

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

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-xl has-mw-3xl-widescreen mx-auto">
      <div class="mb-7 is-flex">
        <div class="mr-4 is-flex-shrink-0">
          <img class="is-block image is-fullwidth" src="vendia-assets/images/reviews/avatar-people-testimonial1.png" alt="">
        </div>
        <div class="has-mw-2xl pb-8" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
          <span class="has-text-white is-block has-text-weight-bold">Emily Selmon</span>
          <span class="has-text-grey-lighter mb-4 is-block">July 16, 2021</span>
          <div class="mb-3">
            <svg width="100" height="20" viewbox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.04917 3.92707C9.34853 3.00576 10.6519 3.00576 10.9513 3.92707L12.0209 7.21886C12.1547 7.63089 12.5387 7.90985 12.9719 7.90985H16.4331C17.4018 7.90985 17.8046 9.14946 17.0209 9.71886L14.2207 11.7533C13.8702 12.0079 13.7236 12.4593 13.8575 12.8713L14.927 16.1631C15.2264 17.0844 14.1719 17.8506 13.3882 17.2812L10.588 15.2467C10.2375 14.9921 9.76293 14.9921 9.41244 15.2467L6.61227 17.2812C5.82856 17.8506 4.77408 17.0844 5.07343 16.1631L6.143 12.8713C6.27688 12.4593 6.13022 12.0079 5.77973 11.7533L2.97956 9.71886C2.19585 9.14946 2.59862 7.90985 3.56735 7.90985H7.02855C7.46177 7.90985 7.84573 7.63089 7.9796 7.21886L9.04917 3.92707Z" fill="#FFBB29"></path>
              <path d="M29.0492 3.92707C29.3485 3.00576 30.6519 3.00576 30.9513 3.92707L32.0209 7.21886C32.1547 7.63089 32.5387 7.90985 32.9719 7.90985H36.4331C37.4018 7.90985 37.8046 9.14946 37.0209 9.71886L34.2207 11.7533C33.8702 12.0079 33.7236 12.4593 33.8575 12.8713L34.927 16.1631C35.2264 17.0844 34.1719 17.8506 33.3882 17.2812L30.588 15.2467C30.2375 14.9921 29.7629 14.9921 29.4124 15.2467L26.6123 17.2812C25.8286 17.8506 24.7741 17.0844 25.0734 16.1631L26.143 12.8713C26.2769 12.4593 26.1302 12.0079 25.7797 11.7533L22.9796 9.71886C22.1958 9.14946 22.5986 7.90985 23.5673 7.90985H27.0285C27.4618 7.90985 27.8457 7.63089 27.9796 7.21886L29.0492 3.92707Z" fill="#FFBB29"></path>
              <path d="M49.0492 3.92707C49.3485 3.00576 50.6519 3.00576 50.9513 3.92707L52.0209 7.21886C52.1547 7.63089 52.5387 7.90985 52.9719 7.90985H56.4331C57.4018 7.90985 57.8046 9.14946 57.0209 9.71886L54.2207 11.7533C53.8702 12.0079 53.7236 12.4593 53.8575 12.8713L54.927 16.1631C55.2264 17.0844 54.1719 17.8506 53.3882 17.2812L50.588 15.2467C50.2375 14.9921 49.7629 14.9921 49.4124 15.2467L46.6123 17.2812C45.8286 17.8506 44.7741 17.0844 45.0734 16.1631L46.143 12.8713C46.2769 12.4593 46.1302 12.0079 45.7797 11.7533L42.9796 9.71886C42.1958 9.14946 42.5986 7.90985 43.5673 7.90985H47.0285C47.4618 7.90985 47.8457 7.63089 47.9796 7.21886L49.0492 3.92707Z" fill="#FFBB29"></path>
              <path d="M69.0492 3.92707C69.3485 3.00576 70.6519 3.00576 70.9513 3.92707L72.0209 7.21886C72.1547 7.63089 72.5387 7.90985 72.9719 7.90985H76.4331C77.4018 7.90985 77.8046 9.14946 77.0209 9.71886L74.2207 11.7533C73.8702 12.0079 73.7236 12.4593 73.8575 12.8713L74.927 16.1631C75.2264 17.0844 74.1719 17.8506 73.3882 17.2812L70.588 15.2467C70.2375 14.9921 69.7629 14.9921 69.4124 15.2467L66.6123 17.2812C65.8286 17.8506 64.7741 17.0844 65.0734 16.1631L66.143 12.8713C66.2769 12.4593 66.1302 12.0079 65.7797 11.7533L62.9796 9.71886C62.1958 9.14946 62.5986 7.90985 63.5673 7.90985H67.0285C67.4618 7.90985 67.8457 7.63089 67.9796 7.21886L69.0492 3.92707Z" fill="#FFBB29"></path>
              <path d="M89.0492 3.92707C89.3485 3.00576 90.6519 3.00576 90.9513 3.92707L92.0209 7.21886C92.1547 7.63089 92.5387 7.90985 92.9719 7.90985H96.4331C97.4018 7.90985 97.8046 9.14946 97.0209 9.71886L94.2207 11.7533C93.8702 12.0079 93.7236 12.4593 93.8575 12.8713L94.927 16.1631C95.2264 17.0844 94.1719 17.8506 93.3882 17.2812L90.588 15.2467C90.2375 14.9921 89.7629 14.9921 89.4124 15.2467L86.6123 17.2812C85.8286 17.8506 84.7741 17.0844 85.0734 16.1631L86.143 12.8713C86.2769 12.4593 86.1302 12.0079 85.7797 11.7533L82.9796 9.71886C82.1958 9.14946 82.5986 7.90985 83.5673 7.90985H87.0285C87.4618 7.90985 87.8457 7.63089 87.9796 7.21886L89.0492 3.92707Z" fill="#84878A"></path>
            </svg>
          </div>
          <p class="has-text-grey-lighter">You made it so simple. My new site is so much faster and easier to work with than my old sit. I am just choose the page, make the changes that can make you too.</p>
        </div>
      </div>
      <div class="mb-7 is-flex">
        <div class="mr-4 is-flex-shrink-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1840

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-4 is-clipped">
      <div style="overflow: scroll;">
        <table class="table is-fullwidth has-background-dark">
          <thead>
            <tr><th class="has-text-grey-lighter py-5 pl-32 has-text-weight-medium">Product</th><th class="has-text-grey-lighter px-16 py-5 has-text-weight-medium">Price</th><th class="has-text-grey-lighter px-16 py-5 has-text-weight-medium">Quantity</th><th class="has-text-grey-lighter py-5 px-16 has-text-weight-medium">Subtotal</th></tr>
          </thead>
          <tbody>
            <tr x-data="{ item: true, quantity: 1 }" :class="{ 'is-hidden': !item }" class="has-background-grey-darker">
              <td>
                <div class="pl-14 is-flex is-align-items-center" style="height: 125px;">
                  <button x-on:click="item = false" class="button is-ghost p-0 mr-14">
                    <svg width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.75 9.25L9.25 1.75M1.75 1.75L9.25 9.25" stroke="#A1A4A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </button>
                  <div class="is-flex is-align-items-center" style="height: 125px;">
                    <img class="image is-fullwidth" src="vendia-assets/images/cart/item-medium-table1.png" alt="" style="width: 65px; height: 65px;">
                    <span class="has-text-white ml-6 is-inline-block has-text-weight-bold">Body Scrub</span>
                  </div>
                </div>
              </td>
              <td>

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

Get the code for 13,400+ components

Bulma Component #1822

Get the code for 13,400+ components

Bulma Component #1823

Get the code for 13,400+ components

Bulma Component #1824

Get the code for 13,400+ components

Bulma Component #1825

Get the code for 13,400+ components

Bulma Component #1826

Get the code for 13,400+ components

Bulma Component #1827

Get the code for 13,400+ components

Bulma Component #1828

Get the code for 13,400+ components

Bulma Component #1829

Get the code for 13,400+ components

Bulma Component #1830

Get the code for 13,400+ components

Bulma Component #1831

Get the code for 13,400+ components

Bulma Component #1832

Get the code for 13,400+ components

Bulma Component #1833

Get the code for 13,400+ components

Bulma Component #1834

Get the code for 13,400+ components

Bulma Component #1835

Get the code for 13,400+ components

Bulma Component #1836

Get the code for 13,400+ components

Bulma Component #1837

Get the code for 13,400+ components

Bulma Component #1838

Get the code for 13,400+ components

Bulma Component #1839

Get the code for 13,400+ components

Bulma Component #1840

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