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

Bulma

Yofte

<section class="section is-clipped">
  <div class="container">
    <nav class="breadcrumb" aria-label="breadcrumb mb-8">
      <ul>
        <li><a class="is-size-7 has-text-grey has-text-weight-bold" href="#">HOME</a></li>
        <li><a class="is-size-7 has-text-grey has-text-weight-bold" href="#">WATER FILTERS</a></li>
        <li class="is-active"><a class="is-size-7" href="#" aria-current="page">BRILE WATER FILTER CARAFE</a></li>
      </ul>
    </nav>
    <div class="mb-16 columns is-multiline">
      <div class="column is-6 mb-8 mb-0-desktop">
        <img class="image is-cover" style="height: 100%" src="yofte-assets/images/product-bottle.png" alt="">
      </div>
      <div class="column is-6 is-covered" style="height: 100%">
        <div class="mb-2 mb-8-tablet columns is-mobile is-multiline">
          <div class="column is-6">
            <img class="image is-cover" style="width: 100%;" src="yofte-assets/images/product-bottle2.png" alt="">
          </div>
          <div class="column is-6">
            <img class="image is-cover" style="height: 100%" src="yofte-assets/images/product-bottle4.png" alt="">
          </div>
          <div class="column is-12">
            <img class="image is-cover" style="max-height: 270px; height: 100%; width: 100%;" src="yofte-assets/images/product-bottle.png" alt="">
          </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 #562

Bulma

Yofte

<section class="has-background-light is-clipped">
  <div class="py-2 has-background-info-dark">
    <div class="is-flex is-justify-content-center is-align-items-center">
      <svg class="mr-2" width="18" height="11" viewbox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="3.07129" width="4" height="10" rx="2" transform="rotate(-45 0 3.07129)" fill="white"></rect><rect x="8" y="2.82861" width="4" height="10" rx="2" transform="rotate(-45 8 2.82861)" fill="white"></rect></svg>
      <p class="has-text-light is-size-7 has-text-weight-bold">Hi, you&rsquo; re new here! Get 20% off card!</p>
    </div>
  </div>
  <nav class="navbar has-background-info">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item is-size-4" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo-white.svg" alt="" width="auto">
      </a>
      <a class="navbar-burger navbar-menu-open is-flex-touch is-align-items-center is-justify-content-center" role="button">
        <svg class="has-text-white" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="currentColor"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="currentColor"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-start ml-12" style="width: 100%">
        <div class="navbar-item px-3"><a class="is-block py-2 px-6 is-size-5 has-text-dark has-background-white is-rounded" href="#">Category</a></div>
        <div class="navbar-item px-3"><a class="is-block py-2 px-6 is-size-5 has-text-dark has-background-white is-rounded" href="#">Collection</a></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 #563

Bulma

Yofte

<section class="section has-background-light is-clipped">
  <div class="container">
    <h2 class="title mb-14">Checkout</h2>
    <div class="columns is-multiline">
      <div class="column is-6">
        <form action="">
          <div class="mb-10 is-flex is-align-items-center">
            <span class="has-text-white mr-8 is-inline-flex is-justify-content-center is-align-items-center is-flex-shrink-0 is-rounded has-background-success" style="width: 48px; height: 48px;">1</span>
            <h5 class="title is-size-5">Delivery</h5>
          </div>
          <div class="field mb-12">
            <label class="label mb-4" for="">Email address</label>
            <div class="control">
              <input class="input" type="email">
            </div>
          </div>
          <div class="mb-10 is-flex is-align-items-center">
            <span class="has-text-white mr-8 is-inline-flex has-background-info is-justify-content-center is-align-items-center is-flex-shrink-0 is-rounded" style="width: 48px; height: 48px;">2</span>
            <h5 class="title is-size-5">Shipping informations</h5>
          </div>
          <div class="mb-12">
            <div class="columns is-multiline">
              <div class="column is-6 mb-4">
                <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 #564

Bulma

Yofte

<section class="section has-background-light is-clipped">
  <div class="container">
    <div class="mb-8 mb-16-tablet columns is-vcentered is-multiline is-justify-content-space-between">
      <div class="column is-12-touch is-6-desktop">
        <h2 class="title">
          <span>Found 125 results for</span>
          <a class="has-text-info" href="#">Sports</a>
        </h2>
      </div>
      <div class="column is-narrow">
        <div class="columns is-multiline is-align-items-end">
          <div class="column is-narrow">
            <div class="select">
              <select name="">
                <option value="1">Sort by newest</option>
                <option value="2">Sort by price</option>
                <option value="3">Sort by most popular</option>
              </select>
            </div>
          </div>
          <div class="column is-narrow">
            <a class="button p-6 mr-2 has-background-white" href="#" style="height: 100%">
              <svg width="20" height="24" viewbox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="8" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="16" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect y="10" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect y="20" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="#2B51C6"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="#2B51C6"></rect></svg>
            </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #565

Bulma

Yofte

<section class="section has-background-light">
  <div class="container">
    <div class="has-mw-4xl mx-auto">
      <div class="columns is-multiline">
        <div class="column is-6-tablet">
          <div class="py-16 px-8 px-16-desktop has-background-white has-text-centered">
            <span class="mb-16 is-inline-flex has-background-info is-justify-content-center is-align-items-center is-rounded" style="width: 80px; height: 80px; border-radius: 50% !important;">
              <svg width="37" height="37" viewbox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M34.9845 11.6702C33.7519 10.3368 32 9.60814 30.0543 9.60814H24.9767V6.75543C24.9767 6.2438 24.5581 5.8252 24.0465 5.8252H0.930233C0.418605 5.8252 0 6.2438 0 6.75543V27.2128C0 27.7244 0.418605 28.143 0.930233 28.143H4.63566C4.93798 29.864 6.43411 31.174 8.24031 31.174C10.0465 31.174 11.5426 29.864 11.845 28.143H24.0465H26.0853C26.3876 29.864 27.8837 31.174 29.6899 31.174C31.4961 31.174 32.9922 29.864 33.2946 28.143H36.0698C36.5814 28.143 37 27.7244 37 27.2128V17.6004C36.9922 15.143 36.3023 13.0888 34.9845 11.6702ZM1.86047 7.68566H23.1163V10.5384V26.2903H11.6822C11.1783 24.8795 9.82171 23.864 8.24031 23.864C6.65892 23.864 5.30233 24.8795 4.79845 26.2903H1.86047V7.68566ZM8.24031 29.3136C7.24806 29.3136 6.44186 28.5074 6.44186 27.5151C6.44186 26.5229 7.24806 25.7167 8.24031 25.7167C9.23256 25.7167 10.0388 26.5229 10.0388 27.5151C10.0388 28.5074 9.23256 29.3136 8.24031 29.3136ZM29.6899 29.3136C28.6977 29.3136 27.8915 28.5074 27.8915 27.5151C27.8915 26.5229 28.6977 25.7167 29.6899 25.7167C30.6822 25.7167 31.4884 26.5229 31.4884 27.5151C31.4884 28.5074 30.6822 29.3136 29.6899 29.3136ZM35.1318 26.2826H33.1318C32.6279 24.8717 31.2713 23.8562 29.6899 23.8562C28.1085 23.8562 26.7519 24.8717 26.2481 26.2826H24.9845V11.4686H30.062C33.1938 11.4686 35.1395 13.8174 35.1395 17.6004V26.2826H35.1318Z" fill="white"></path>
              </svg>
            </span>
            <h3 class="title is-size-5 mb-4">Free Shipping</h3>
            <p class="mb-6">From $45</p>
            <p class="subtitle has-text-grey-dark">Ante ipsum primis in faucibus orci luctus.</p>
          </div>
        </div>
        <div class="column is-6-tablet">
          <div class="py-16 px-8 px-16-desktop has-background-white has-text-centered">
            <span class="mb-16 is-inline-flex has-background-primary is-justify-content-center is-align-items-center is-rounded" style="width: 80px; height: 80px; border-radius: 50% !important;">
              <svg width="39" height="36" viewbox="0 0 39 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M33.7601 5.67776C30.3819 2.38616 25.8883 0.572266 21.1139 0.572266C16.2512 0.572266 11.7014 2.44089 8.30713 5.83414C7.93802 6.20161 7.94604 6.79581 8.32318 7.16329C8.70032 7.52294 9.31017 7.51512 9.68731 7.14765C12.7205 4.12188 16.7727 2.45653 21.1139 2.45653C29.9165 2.44871 37.0742 9.42284 37.0742 17.9998C37.0742 26.5767 29.9165 33.5508 21.1139 33.5508C12.3113 33.5508 5.15359 26.5767 5.15359 17.9998V17.8043L6.7424 19.3524C6.92696 19.5322 7.17571 19.626 7.42446 19.626C7.67322 19.626 7.91395 19.5322 8.10653 19.3524C8.48367 18.9849 8.48367 18.3907 8.10653 18.0232L4.88077 14.8724C4.50363 14.5049 3.89378 14.5049 3.51664 14.8724L0.282856 18.0232C-0.0942853 18.3907 -0.0942853 18.9849 0.282856 19.3524C0.467414 19.5322 0.716167 19.626 0.96492 19.626C1.21367 19.626 1.4544 19.5322 1.64698 19.3524L3.23579 17.8043V17.9998C3.23579 22.6518 5.09742 27.0302 8.47565 30.3218C11.8539 33.6134 16.3475 35.4273 21.1219 35.4273C25.8964 35.4273 30.39 33.6134 33.7682 30.3218C37.1464 27.0302 39 22.6518 39 17.9998C39 13.3477 37.1384 8.96937 33.7601 5.67776Z" fill="white"></path>
                <path d="M20.4014 8C17.272 8 14.7283 10.4785 14.7283 13.5277V16.1938H12.9629C12.4333 16.1938 12 16.616 12 17.132V26.4908C12 27.0068 12.4333 27.429 12.9629 27.429H27.848C28.3776 27.429 28.8109 27.0068 28.8109 26.4908V17.1399C28.8109 16.6238 28.3776 16.2016 27.848 16.2016H26.0826V13.5355C26.0826 10.4863 23.5309 8 20.4014 8ZM16.6541 13.5355C16.6541 11.5183 18.3392 9.88427 20.4014 9.88427C22.4637 9.88427 24.1488 11.5262 24.1488 13.5355V16.2016H16.6541V13.5355ZM26.885 25.5526H13.9258V18.0703H26.885V25.5526Z" fill="white"></path>
              </svg>
            </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 #566

Bulma

Yofte

<section class="section has-background-light is-clipped">
  <div class="container">
    <div class="has-mw-4xl mx-auto has-background-info">
      <div class="py-10 has-background-white has-text-centered">
        <a class="is-inline-block is-size-6" href="#">
          <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="">
        </a>
      </div>
      <div class="has-mw-xl mx-auto px-6 pt-20 pb-32 is-relative has-text-centered">
        <img class="-mr-80 is-absolute is-hidden-touch is-top-0 is-right-0 image" src="yofte-assets/elements/white-sign-line.svg" alt="">
        <img class="-ml-80 is-absolute is-bottom-0 is-left-0 image" src="yofte-assets/elements/orange-sign-line.svg" alt="">
        <img class="-mb-12 -mr-96 is-absolute is-bottom-0 is-right-0 image" src="yofte-assets/elements/purple-sign-line.svg" alt="">
        <h3 class="title is-size-3 has-mw-md has-text-white mx-auto mb-20">Signing up with social is super quick</h3>
        <form action="">
          <div class="field">
            <div class="control">
              <input class="input mb-4" type="text" placeholder="john@example.com">
            </div>
            <div class="control">
              <input class="input mb-4" type="password" placeholder="Password">
            </div>
            <div class="control">
              <input class="input mb-10" type="password" placeholder="Repeat password">
            </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 #567

Bulma

Yofte

<div class="is-fixed is-bottom-0 is-right-0 p-8" style="z-index: 50;">
  <div class="container">
    <div class="p-6 pl-12-desktop is-flex is-flex-wrap-wrap is-relative has-background-primary is-align-items-center">
      <div class="mt-n2 is-absolute is-top-0 has-background-primary" style="width: 24px; height: 24px; transform: rotate(45deg);"></div>
      <div class="has-mw-4xl mb-6">
        <h5 class="title is-4 has-text-white mb-2 has-text-weight-bold">Cookies settings</h5>
        <p class="has-text-light mb-0">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation. Etiam commodo ipsum et imperdiet imperdiet. Fusce pellentesque, lacus.</p>
      </div>
      <div class="buttons">
        <a class="button is-ghost" href="#">
          <span class="has-text-white mr-2">More</span>
          <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26.0871 7.41489L19.3999 14.102L18.564 13.2661L24.2439 7.58625L0.592385 7.59043L0.592385 6.41183L24.2439 6.40765L18.982 1.14571L19.8179 0.309822L26.0871 6.579C26.3179 6.80984 26.3179 7.18406 26.0871 7.41489Z" fill="white"></path>
          </svg>
        </a>
        <a class="button is-dark" href="#">Accept</a>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #568

Bulma

Yofte

<section class="section is-relative" style="background-image: url('yofte-assets/images/placeholder-jogging.png'); background-repeat: no-repeat; background-size: cover;">
  <div class="column is-5 py-52 is-absolute is-bottom-0 is-right-0 has-background-white"></div>
  <div class="column is-9 ml-auto mr-auto-mobile mr-auto-tablet-only">
    <img class="mt-8 is-absolute is-block-tablet is-hidden-touch is-top-0 is-right-0" style="z-index: 10;" src="yofte-assets/elements/lines2.svg" alt="">
    <div class="is-relative has-mw-2xl-tablet has-mw-3xl-desktop ml-auto-desktop py-12 py-28-desktop px-6 px-32-desktop has-background-info">
      <div class="is-relative" style="z-index: 10;">
        <span class="has-text-white is-size-5 has-text-weight-normal">More inspirations</span>
        <h2 class="title has-leading-2 has-text-white mt-2 mb-8 mb-16-tablet">Sunday: Features styles. Check it now.</h2>
        <p class="subtitle has-text-white mb-8 mb-20-tablet">Discover more products and inspiration.</p>
        <a class="button is-primary" href="#">More</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 #569

Bulma

Yofte

<section class="section has-background-light">
  <div class="container">
    <div class="has-background-white p-8 p-24-desktop">
      <h2 class="title is-3 mb-8">Shopping Cart</h2>
      <p class="subtitle is-6 mb-10 mb-16-tablet has-text-grey">Fusce pharetra lectus felis, eget temp.</p>
      <div class="mb-12 pb-12">
        <div class="mb-12 columns is-multiline is-vcentered">
          <div class="column is-7 mb-8 mb-0-widescreen">
            <div class="columns is-vcentered">
              <div class="column is-3 mb-4 mb-0-desktop has-background-light is-flex is-justify-content-center is-align-items-center" style="height: 128px;">
                <img class="image is-fullwidth" style="object-fit: contain; height: 100%" src="yofte-assets/images/waterbottle.png" alt="">
              </div>
              <div class="column is-9 pl-8-tablet">
                <h3 class="subtitle mb-2 has-text-weight-bold">BRILE water filter carafe</h3>
                <p class="mb-8 has-text-grey">Maecenas 0.7 commodo sit</p>
                <p class="mb-0 has-text-grey">In Stock</p>
              </div>
            </div>
          </div>
          <div class="column is-12 is-5-widescreen">
            <div class="columns is-vcentered is-multiline">
              <div class="column is-4 mb-4 mb-0-tablet">
                <div class="px-4 is-inline-flex is-align-items-center has-text-weight-bold" style="border: 1px solid #DBDDE1; border-radius: 8px;">
                  <button class="button is-ghost has-text-grey p-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 #570

Bulma

Yofte

<section class="section py-40-desktop is-relative has-background-light is-clipped">
  <img class="is-absolute is-top-0 is-left-0 is-fullwidth is-covered img-fluid" src="yofte-assets/elements/color-lines.svg" alt="" style="height: 100%">
  <div class="container is-relative">
    <div class="has-text-centered">
      <h2 class="title mb-2">Join Our Newsletter</h2>
      <p class="subtitle mb-6">Sign me up for Yofte newsletters to get exclusive perks.</p>
      <img class="mb-12 image is-block mx-auto" src="yofte-assets/elements/quote-orange.svg" alt="">
      <div class="has-mw-xl mx-auto is-relative">
        <img class="-mt-12 -mr-20 is-absolute is-top-0 is-right-0 image" style="height: 160px;" src="yofte-assets/elements/quote-light.png" alt="">
        <div class="field has-addons">
          <div class="control is-relative" style="width: 100%;">
            <input class="input has-background-white py-6 is-medium" style="border: none; box-shadow: none;" type="text" placeholder="john@example.com">
          </div>
          <div class="control"><a class="button is-dark" href="#">Join</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 #571

Bulma

Yofte

<section class="section has-background-light">
  <div class="container">
    <h2 class="title mb-16 mb-24-tablet">Discover our products</h2>
    <div class="has-mw-4xl mx-auto">
      <div class="mb-14 columns is-multiline -mx-6 -mt-6">
        <div class="column is-6-tablet">
          <div class="m-6-tablet has-background-white is-relative">
            <span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-info has-text-weight-bold" style="z-index: 10;">NEW</span>
            <div class="card-image">
              <a href="#">
                <img class="image is-fullwidth is-cover" style="height: 296px;" src="yofte-assets/images/placeholder-cream.png" alt="">
              </a>
            </div>
            <div class="card-content pt-8 px-6 pb-6">
              <div class="content" href="">
                <a class="mb-2 px-6 is-block" href="#">
                  <h5 class="mb-2">QUAI hand cream</h5>
                  <span class="has-text-info is-size-5 has-text-weight-bold">$29.30</span>
                </a>
              </div>
              <div class="has-text-right"><a class="button is-small is-info" href="#">Add to cart</a></div>
            </div>
          </div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #572

Bulma

Yofte

<section class="section has-background-dark is-clipped">
  <div class="container">
    <div class="pb-20 has-text-centered">
      <a class="mb-20 is-inline-block" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo-white.svg" alt="">
      </a>
      <ul class="-mb-4 columns is-vcentered is-mobile is-multiline is-justify-content-center">
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Category</a></li>
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Collection</a></li>
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Story</a></li>
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Brand</a></li>
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Partners</a></li>
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Videos</a></li>
        <li class="column is-narrow mb-4"><a class="button is-dark py-0 is-rounded" style="border: 1px solid white; height: 40px;" href="#">Contact</a></li>
      </ul>
      <div class="mt-20 columns is-multiline is-vcentered">
        <div class="column is-3 mb-10 mb-0-desktop has-text-left">
          <h6 class="title is-size-5 has-text-primary mb-3 has-text-weight-bold">Contact Us</h6>
          <a class="has-text-white is-size-4 has-text-weight-bold" href="#">+41 0087 44 431</a>
        </div>
        <div class="column is-3 mb-10 mb-0-desktop has-text-left">
          <h6 class="title is-size-5 has-text-primary mb-3 has-text-weight-bold">Email</h6>
          <a class="has-text-white is-size-4 has-text-weight-bold" href="#">help@example.com</a>
        </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 #573

Bulma

Yofte

<section class="has-background-dark is-clipped">
  <div class="section py-10 has-background-white">
    <div class="container">
      <a class="is-inline-block is-size-6" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="">
      </a>
    </div>
  </div>
  <div class="section py-20 py-40-tablet is-relative has-background-dark" style="background-image: url('yofte-assets/elements/lines-color4.svg'); background-size: cover;" alt="">
    <div class="container">
      <div class="columns is-vcentered is-multiline">
        <div class="column is-5">
          <img class="mx-auto is-block image is-fullwidth" style="width: 80%; object-fit: contain;" src="yofte-assets/images/placeholder-colorful.png" alt="">
        </div>
        <div class="column is-7">
          <span class="has-text-white has-text-weight-bold" style="font-size: 126px;">404</span>
          <h4 class="title is-3 has-text-white mt-3 mb-12">Sorry, we can&rsquo;t find that page or something has gone wrong</h4>
          <div class="columns has-mw-xl is-align-items-center">
            <div class="column is-6">
              <p class="has-text-light has-text-weight-bold">Checkout for any URL misspelling.</p>
            </div>
            <div class="column is-6"><a class="button is-primary ml-6 ml-0-mobile" href="#">Homepage</a></div>
          </div>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #574

Bulma

Yofte

<section class="section">
  <div class="container">
    <h2 class="title is-size-7 has-text-grey mb-8">TRUSTED BY BRANDS ALL OVER THE WORLD</h2>
    <div class="-mb-6 columns is-multiline">
      <div class="column is-2-desktop is-4-tablet mb-6">
        <div class="px-2 py-10">
          <img class="mx-auto is-block image" style="height: 48px;" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet mb-6">
        <div class="px-2 py-10">
          <img class="mx-auto is-block image" style="height: 48px;" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet mb-6">
        <div class="px-2 py-10">
          <img class="mx-auto is-block image" style="height: 48px;" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
      </div>
      <div class="column is-2-desktop is-4-tablet mb-6">
        <div class="px-2 py-10">
          <img class="mx-auto is-block image" style="height: 48px;" src="yofte-assets/brands/nike.svg" alt="">
        </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 #575

Bulma

Yofte

<section class="section is-clipped">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 mb-12 mb-0-desktop px-8-tablet">
        <h2 class="title mb-16 is-size-3">General question</h2>
        <div class="pt-12 pb-16 pr-8 pr-20-desktop has-background-light is-fullwidth">
          <div class="columns">
            <div class="column is-narrow">
              <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></div>
            </div>
            <div class="column pl-8 pl-16-tablet pl-28-desktop">
              <h3 class="title is-size-5 mb-5">Sed eget accumsan ipsum. Praesent dignissim?</h3>
              <p class="has-text-grey">Aliquam tincidunt placerat mollis. Lorem euismod dignissim, felis tortor ollis eros, non ultricies turpis.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-6 px-8-tablet">
        <h2 class="title mb-16 is-size-3">Orders &amp; returns</h2>
        <div class="pt-12 pb-16 pr-8 pr-20-desktop has-background-light is-fullwidth">
          <div class="columns">
            <div class="column is-narrow">
              <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></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 #576

Bulma

Yofte

<section class="section pt-32-desktop is-relative has-background-dark is-clipped">
  <img class="is-absolute is-top-0 is-left-0 is-right-0 is-fullwidth image" style="z-index: 10; height: 384px; object-fit: cover;" src="yofte-assets/images/placeholder-banner.png" alt="">
  <img class="is-absolute is-hidden-touch is-top-0 is-left-0 image" style="z-index: 10;" src="yofte-assets/elements/white-line.svg" alt="">
  <img class="-mr-12 is-absolute is-right-0 image" style="z-index: 10; transform: rotate(90deg);" src="yofte-assets/elements/orange-line.svg" alt="">
  <img class="is-absolute is-top-0 is-left-0 image" style="width: 388px;" src="yofte-assets/elements/violet-line.svg" alt="">
  <div class="container is-relative" style="z-index: 10;">
    <span class="has-text-white is-size-6">The most popular</span>
    <h2 class="title has-text-white mt-4 mb-16">Summer Sports</h2>
    <div class="columns is-multiline">
      <div class="column is-4-desktop mb-16 mb-0-desktop">
        <a class="mb-10 is-block" href="#">
          <div class="is-relative">
            <span class="mb-6 ml-6 tag is-danger is-absolute is-bottom-0 is-left-0" style="z-index: 10;">-15%</span>
            <img class="image is-fullwidth" style="height: 384px; object-fit: cover;" src="yofte-assets/images/placeholder-playing-tennis.png" alt="">
          </div>
          <div class="mt-12">
            <div class="mb-2">
              <h4 class="title is-size-4 has-text-white mb-3">Tennis racket Sanks 2</h4>
              <p class="has-text-white">
                <span class="is-size-5 has-text-weight-bold">$295.30</span>
                <span class="is-size-7 has-text-light" style="text-decoration: line-through;">$330.90</span>
              </p>
            </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 #577

Bulma

Yofte

<section class="section has-background-light is-clipped">
  <div class="container">
    <div class="px-4 py-20 p-10-tablet" style="background-image: url('yofte-assets/images/placeholder-surfing.png'); background-repeat: no-repeat; background-size: cover;">
      <div class="has-mw-xl-desktop ml-auto" style="height: 384px;">
        <div class="is-relative">
          <div class="has-mw-xl-desktop -ml-8-tablet py-8 is-relative has-background-white has-text-centered" style="z-index: 10;">
            <h2 class="title is-3 is-2-desktop has-leading-2 has-mw-md mx-auto mb-0">Check our new collection</h2>
          </div>
          <div class="-mb-12 px-4 pt-2 pt-14-tablet pb-2 is-absolute is-bottom-0 is-left-0 has-background-info-dark has-text-centered" style="width: 100%">
            <h4 class="title is-size-4 has-text-white mb-0 is-uppercase">Student Discount (10%)</h4>
          </div>
          <a class="button is-primary -mb-40 -mb-40-mobile is-absolute is-bottom-0 is-right-0" href="#" style="z-index: 10;">More</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 #578

Bulma

Yofte

<section class="section has-background-light is-clipped">
  <div class="container">
    <h2 class="title mb-16 mb-24-tablet">Latest Blog</h2>
    <div class="mb-20 columns is-centered">
      <div class="column is-4 mb-6 mb-0-desktop">
        <div class="has-mw-sm-widescreen is-relative is-clipped">
          <a class="button is-light is-small mt-64 mr-5 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
          <a class="pb-16 is-block has-background-white" href="#">
            <div class="is-relative" style="height: 320px;">
              <img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
            </div>
            <div class="mt-12 is-relative">
              <div class="pl-1 is-absolute is-top-0 has-background-info" style="height: 174px;"></div>
              <div class="px-12">
                <h4 class="title mb-8 is-size-4 has-text-dark">After curabitur eu laoreet libero eget en vel odio ultricies!</h4>
                <span class="has-text-info is-size-6 has-text-weight-bold is-uppercase">15 MAY 2021</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="column is-4 mt-24-tablet mb-6 mb-0-desktop">
        <div class="has-mw-sm-widescreen is-relative mx-auto is-clipped">
          <a class="button is-light is-small mt-64 mr-5 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</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 #579

Bulma

Yofte

<section class="section py-32-tablet is-relative has-background-dark is-clipped">
  <img class="is-absolute is-top-0 is-left-0 is-right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="container mb-20 is-relative">
    <div class="columns is-vcentered">
      <div class="column is-8">
        <h2 class="title has-text-white mb-10-mobile">What Customers Say</h2>
      </div>
      <div class="column is-4">
        <div class="ml-auto-desktop is-flex">
          <a class="button is-primary p-0 mr-5" style="width: 48px; height: 48px;" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
            </svg>
          </a>
          <a class="button is-info p-0" style="width: 48px; height: 48px;" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container">

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

Bulma

Yofte

<section class="is-clipped">
  <div class="section pb-0 pt-20">
    <div class="container">
      <nav class="breadcrumb mb-12-mobile mb-8-tablet" aria-label="breadcrumb">
        <ul>
          <li><a class="is-size-7 has-text-grey has-text-weight-bold" href="#">HOME</a></li>
          <li><a class="is-size-7 has-text-grey has-text-weight-bold" href="#">WATER FILTERS</a></li>
          <li class="is-active"><a class="is-size-7" href="#" aria-current="page">BRILE WATER FILTER CARAFE</a></li>
        </ul>
      </nav>
      <div class="mb-24 mb-52-desktop columns is-vcentered is-multiline">
        <div class="column is-4 mb-10 mb-0-desktop">
          <span class="has-text-grey-dark">Brille</span>
          <h1 class="title is-1 is-size-2-touch has-leading-2 has-mw-xl mt-2 mb-6">BRILE water filter carafe</h1>
          <div class="mb-8">
            <button class="button is-ghost p-0">
              <img class="image" src="yofte-assets/elements/star-gold.svg" alt="">
            </button>
            <button class="button is-ghost p-0">
              <img class="image" src="yofte-assets/elements/star-gold.svg" alt="">
            </button>
            <button class="button is-ghost p-0">
              <img class="image" src="yofte-assets/elements/star-gold.svg" alt="">
            </button>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Bulma Component #562

Get the code for 13,400+ components

Bulma Component #563

Get the code for 13,400+ components

Bulma Component #564

Get the code for 13,400+ components

Bulma Component #565

Get the code for 13,400+ components

Bulma Component #566

Get the code for 13,400+ components

Bulma Component #567

Get the code for 13,400+ components

Bulma Component #568

Get the code for 13,400+ components

Bulma Component #569

Get the code for 13,400+ components

Bulma Component #570

Get the code for 13,400+ components

Bulma Component #571

Get the code for 13,400+ components

Bulma Component #572

Get the code for 13,400+ components

Bulma Component #573

Get the code for 13,400+ components

Bulma Component #574

Get the code for 13,400+ components

Bulma Component #575

Get the code for 13,400+ components

Bulma Component #576

Get the code for 13,400+ components

Bulma Component #577

Get the code for 13,400+ components

Bulma Component #578

Get the code for 13,400+ components

Bulma Component #579

Get the code for 13,400+ components

Bulma Component #580

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