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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4 mb-5">
        <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
        <h2 class="mt-2 mb-2 is-size-3 is-size-4-mobile has-text-weight-bold">Lorem ipsum dolor sit</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a href="#">Read More</a>
      </div>
      <div class="column is-4 mb-5">
        <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
        <h2 class="mt-2 mb-2 is-size-3 is-size-4-mobile has-text-weight-bold">Lorem ipsum dolor sit</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a href="#">Read More</a>
      </div>
      <div class="column is-4 mb-5">
        <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
        <h2 class="mt-2 mb-2 is-size-3 is-size-4-mobile has-text-weight-bold">Lorem ipsum dolor sit</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a href="#">Read More</a>
      </div>
      <div class="column is-4 mb-5">
        <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
        <h2 class="mt-2 mb-2 is-size-3 is-size-4-mobile has-text-weight-bold">Lorem ipsum dolor sit</h2>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-5 columns is-multiline is-centered">
      <div class="column is-8">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
      </div>
    </div>
    <div class="has-text-centered">
      <span class="has-text-grey-dark">Error 404</span>
      <h2 class="mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Page not found</h2>
      <p class="subtitle has-text-grey mb-6">Sorry! We are unable to find the page you are looking for</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button" href="#">Try Again</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 #1543

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6">
      <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
    </div>
    <div class="mb-5 columns is-multiline is-centered">
      <div class="column is-8 has-text-centered">
        <nav class="breadcrumb is-centered mb-3" aria-label="breadcrumbs">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Article</a></li>
          </ul>
        </nav>
        <h2 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <div class="is-flex is-justify-content-center is-align-items-center">
          <div class="mr-4 has-text-left">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 56px;height: 56px">
          </div>
          <div>
            <h4 class="is-size-5 has-text-weight-bold">Danny Bailey</h4>
            <p class="has-text-grey-dark mb-0">February 26, 2021</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 #1544

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-2 mb-4">
        <div class="is-flex is-align-items-center" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth img-fluid" style="height: 34px;" src="bulma-plain-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-2 mb-4">
        <div class="is-flex is-align-items-center" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth img-fluid" style="height: 34px;" src="bulma-plain-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-2 mb-4">
        <div class="is-flex is-align-items-center" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth img-fluid" style="height: 34px;" src="bulma-plain-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-2 mb-4">
        <div class="is-flex is-align-items-center" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth img-fluid" style="height: 34px;" src="bulma-plain-assets/logos/amazon.svg" alt="">
        </div>
      </div>
      <div class="column is-2 mb-4">

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

Bulma

Plain

<section class="section is-relative">
  <div class="container">
    <div class="mb-6 pb-3 columns is-multiline is-centered">
      <div class="column is-8 has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop mb-5">
        <div class="box p-6 is-relative has-background-light has-text-centered">
          <span class="has-text-white has-background-primary is-flex is-justify-content-center is-align-items-center" style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 48px;height: 48px; border-radius: 50% !important;">1</span>
          <h4 class="mb-4 is-size-4 has-text-weight-bold">Suspendisse interdum ullamcorper elit at</h4>
          <p class="subtitle has-text-grey">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop mb-5">
        <div class="box p-6 is-relative has-background-light has-text-centered">
          <span class="has-text-white has-background-primary is-flex is-justify-content-center is-align-items-center" style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 48px;height: 48px; border-radius: 50% !important;">2</span>
          <h4 class="mb-4 is-size-4 has-text-weight-bold">Suspendisse interdum ullamcorper elit at</h4>
          <p class="subtitle has-text-grey">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</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 #1546

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6">
        <a class="is-inline-block" href="#">
          <img class="image is-fullwidth" style="width:96px" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
        <div class="py-4 is-hidden-mobile"></div>
        <p class="is-hidden-mobile">All rights reserved © Wireframes Corporation 2021</p>
      </div>
      <div class="column is-6">
        <div class="is-flex is-flex-wrap-wrap">
          <ul class="ml-auto mb-4 is-flex is-flex-wrap-wrap is-align-items-center">
            <li><a class="button is-white" href="#">About</a></li>
            <li><a class="button is-white" href="#">Company</a></li>
            <li><a class="button is-white" href="#">Services</a></li>
            <li><a class="button is-white" href="#">Testimonials</a></li>
          </ul>
          <a class="ml-auto button is-primary" href="#">Get in Touch</a>
        </div>
      </div>
    </div>
    <p class="is-hidden-tablet mt-4 has-text-center"><small>All rights reserved © Wireframes Corporation 2021</small></p>
  </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 #1547

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6 columns is-multiline is-centered">
      <div class="column is-8 has-text-centered">
        <span class="has-text-grey-dark">Lorem Ipsum</span>
        <h2 class="mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="columns is-multiline is-centered">
      <div class="column is-6 is-4-desktop mb-4">
        <div class="pb-5 box has-background-light has-text-centered">
          <img class="mx-auto mb-5 image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          <h4 class="mb-2 is-size-5 has-text-weight-bold">Danny Bailey</h4>
          <p class="has-text-grey mb-5">CEO & Founder</p>
          <div>
            <a class="mr-4 is-inline-block" href="#">
              <img src="bulma-plain-assets/socials/facebook.svg">
            </a>
            <a class="mr-4 is-inline-block" href="#">
              <img src="bulma-plain-assets/socials/twitter.svg">
            </a>
            <a class="mr-4 is-inline-block" href="#">
              <img src="bulma-plain-assets/socials/instagram.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 #1548

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6 is-flex is-align-items-center">
      <div class="mr-auto">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ispum dolor sit</h2>
      </div>
      <a class="button is-primary is-inline-block" href="#">Action</a>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
      </div>
      <div class="column is-6">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
      </div>
      <div class="column is-4">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
      </div>
      <div class="column is-4">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
      </div>
      <div class="column is-4">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">

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

Bulma

Plain

<section class="section">
  <div class="container has-text-centered">
    <div class="columns is-multiline is-centered">
      <div class="column is-10 is-8-desktop">
        <span class="has-text-white mx-auto mb-3 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 56px;height: 56px; border-radius: 50% !important;">
          <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="CurrentColor"></path>
          </svg>
        </span>
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="subtitle has-text-grey mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <form action="#">
          <div class="columns is-multiline">
            <div class="column is-5 pb-0">
              <div class="control">
                <input class="input" type="e-mail" placeholder="Type your e-mail">
              </div>
            </div>
            <div class="column is-5 pb-0">
              <div class="control">
                <input class="input" type="name" placeholder="Your name">
              </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 #1550

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-align-items-center">
      <div class="column is-6 mb-5">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
      </div>
      <div class="column is-6 is-5-desktop ml-auto">
        <div>
          <h2 class="mb-5 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum</h2>
          <div class="mb-4 is-flex">
            <div class="has-text-primary mr-2">
              <svg class="mt-2" style="width: 24px; height: 24px" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </div>
            <div>
              <h4 class="is-size-4 has-text-weight-bold mb-2">Quick problem-solving contact</h4>
              <p class="has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
          </div>
          <div class="mb-4 is-flex">
            <div class="has-text-primary mr-2">
              <svg class="mt-2" style="width: 24px; height: 24px" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></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 #1551

Bulma

Plain

<nav class="navbar py-4">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
      <div class="navbar-item">
        <div class="buttons"><a class="button" href="#">Sign In</a><a class="button is-primary" href="#">Sign Up</a></div>
      </div>
    </div>
  </div>
</nav>

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

Bulma

Plain

<div class="mb-4" style="position: fixed; bottom: 0; left: 0; z-index: 50;">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-12 is-6-desktop">
        <div class="p-6 has-background-light mb-5">
          <div class="mb-4">
            <h4 class="mb-2 is-size-5 has-text-weight-bold">Cookie Policy</h4>
            <p class="has-text-grey-dark">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
          </div>
          <div class="buttons"><a class="button is-primary" href="#">Allow</a><a class="button is-outlined is-danger" href="#">Decline</a></div>
        </div>
      </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 #1553

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-10 is-6-desktop">
        <div class="mb-6 has-text-centered">
          <span class="has-text-grey-dark">Lorem ipsum</span>
          <h2 class="mt-3 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor</h2>
        </div>
        <div class="mb-5">
          <div class="columns is-multiline">
            <div class="column is-3 mb-3">
              <button class="button py-4 is-primary is-fullwidth is-flex-direction-column" style="height: 100%">
                <span class="is-block">
                  <svg class="mx-auto" style="width: 32px; height: 32px;" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="CurrentColor"></path>
                  </svg>
                </span>
                <p class="mt-2 mb-0 is-size-5 has-text-weight-bold">General</p>
              </button>
            </div>
            <div class="column is-3 mb-3">
              <button class="button py-4 is-light is-fullwidth is-flex-direction-column" style="height: 100%">
                <span>
                  <svg class="has-text-grey-dark mx-auto" style="width: 32px; height: 32px;" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1554

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-8 is-6-desktop">
        <h2 class="mb-5 is-size-1 is-size-3-mobile has-text-weight-bold">When I was a developer, I often had a hundred questions when</h2>
        <p class="subtitle has-text-grey mb-5">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
        <p class="subtitle has-text-grey mb-5">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
        <p class="subtitle has-text-grey mb-5">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
      </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 #1555

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6">
        <div class="mx-auto mb-5">
          <span class="has-text-grey-dark">Lorem ipsum</span>
          <h2 class="mt-2 mb-5 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="subtitle has-text-grey mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <a class="button is-primary" href="#">Action</a>
        </div>
      </div>
      <div class="column is-5 ml-auto">
        <div class="mx-auto box p-6 has-background-light">
          <div class="mb-6 is-flex">
            <span class="has-text-white mr-5 is-flex has-background-primary is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 48px;height: 48px; border-radius: 50% !important;">1</span>
            <div>
              <p class="subtitle has-text-grey">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
          </div>
          <div class="mb-6 is-flex">
            <span class="has-text-white mr-5 is-flex has-background-primary is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 48px;height: 48px; border-radius: 50% !important;">2</span>
            <div>
              <p class="subtitle has-text-grey">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </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 #1556

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6 has-text-centered">
      <span class="has-text-grey-dark">Error 404</span>
      <h2 class="mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-bold">Page not found</h2>
      <p class="subtitle has-text-grey mb-5">Sorry! We are unable to find the page you are looking for</p>
      <div class="buttons is-centered"><a class="button is-primary" href="#">Go back to Homepage</a><a class="button" href="#">Try Again</a></div>
    </div>
    <div class="columns is-multiline is-centered">
      <div class="column is-8">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
      </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 #1557

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-8 is-5-desktop">
        <div class="box p-6 has-background-light has-text-centered">
          <span class="has-text-grey-dark">Sign Up</span>
          <h3 class="mb-5 is-size-4 has-text-weight-bold">Create new account</h3>
          <form action="#">
            <div class="columns is-multiline">
              <div class="column is-6">
                <div class="control">
                  <input class="input" type="text" placeholder="First Name">
                </div>
              </div>
              <div class="column is-6">
                <div class="control">
                  <input class="input" type="text" placeholder="Last Name">
                </div>
              </div>
            </div>
            <div class="field">
              <div class="control">
                <input class="input" type="email" placeholder="E-mail address">
              </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 #1558

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-centered">
      <div class="column is-1">
        <button class="button p-0 is-light is-hidden-touch is-rounded" style="width: 56px;height: 56px;">
          <svg class="has-text-grey-dark" style="width:20px; height: 20px" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
          </svg>
        </button>
      </div>
      <div class="column is-6-desktop">
        <div class="is-flex is-align-items-center">
          <div class="is-vcentered columns is-multiline">
            <div class="column is-6">
              <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 48px;height: 48px">
              <h4 class="mt-2 mb-2 is-size-4 has-text-weight-bold">Danny Bailey</h4>
              <p class="has-text-grey">CEO & Founder</p>
            </div>
            <div class="mb-4 is-hidden-widescreen">
              <button class="button p-0 is-light is-rounded" style="width: 48px; height: 48px;">
                <svg class="has-text-grey-dark" style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
              </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

Bulma Component #1559

Bulma

Plain

<section class="section">
  <div class="container">
    <h5 class="is-size-5 has-text-grey-dark mb-5 has-text-centered">Trusted by brand all over the world</h5>
    <div class="is-vcentered columns is-multiline is-centered">
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth" style="height: 34px;" src="bulma-plain-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth" style="height: 34px;" src="bulma-plain-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth" style="height: 34px;" src="bulma-plain-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="column is-3 mb-4">
        <div class="box is-flex is-align-items-center has-background-light" style="height: 128px;">
          <img class="mx-auto is-block image is-fullwidth img-fluid" style="height: 34px;" src="bulma-plain-assets/logos/stripe.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 #1560

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered mb-6">
      <div class="column is-8 has-text-centered">
        <span class="has-text-grey-dark">Lorem ipsum</span>
        <h2 class="mt-2 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ispum dolor sit amet consectutar</h2>
      </div>
    </div>
    <div class="mb-6 buttons is-centered"><a class="button is-primary" href="#">Active tab</a><a class="button is-white" href="#">Normal tab</a><a class="button is-white" href="#">Normal tab</a><a class="button is-white" href="#">Normal tab</a></div>
    <div class="columns is-multiline">
      <div class="column is-6">
        <div class="columns is-multiline">
          <div class="column is-6">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          </div>
          <div class="column is-6">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          </div>
          <div class="column is-12">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          </div>
        </div>
      </div>
      <div class="column is-6">

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

Get the code for 13,400+ components

Bulma Component #1542

Get the code for 13,400+ components

Bulma Component #1543

Get the code for 13,400+ components

Bulma Component #1544

Get the code for 13,400+ components

Bulma Component #1545

Get the code for 13,400+ components

Bulma Component #1546

Get the code for 13,400+ components

Bulma Component #1547

Get the code for 13,400+ components

Bulma Component #1548

Get the code for 13,400+ components

Bulma Component #1549

Get the code for 13,400+ components

Bulma Component #1550

Get the code for 13,400+ components

Bulma Component #1551

Get the code for 13,400+ components

Bulma Component #1552

Get the code for 13,400+ components

Bulma Component #1553

Get the code for 13,400+ components

Bulma Component #1554

Get the code for 13,400+ components

Bulma Component #1555

Get the code for 13,400+ components

Bulma Component #1556

Get the code for 13,400+ components

Bulma Component #1557

Get the code for 13,400+ components

Bulma Component #1558

Get the code for 13,400+ components

Bulma Component #1559

Get the code for 13,400+ components

Bulma Component #1560

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