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

Bulma

Plain

<section class="section is-relative">
  <div class="container">
    <div class="is-vcentered columns is-multiline is-centered">
      <div class="column"></div>
      <button class="button p-0 is-light is-hidden-touch is-rounded" style="width: 56px;height: 56px;">
        <svg class="has-text-grey-dark" style="height: 20px; width: 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 class="column is-12 is-8-desktop px-5">
        <div class="is-vcentered columns is-multiline">
          <div class="column is-6">
            <h2 class="mb-3 is-size-1 is-size-3-mobile has-text-weight-bold">Danny Bailey</h2>
            <h4 class="mb-3">CEO & Founder</h4>
            <p class="subtitle has-text-grey mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div class="mb-5">
              <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 #1562

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="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 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="mb-5 is-flex is-justify-content-center">
          <label class="radio mr-3 is-flex is-align-items-center">
            <input class="radio mr-2" type="radio" name="license" value="1" checked="">
            <span>Lifetime license</span>
            <span class="ml-2 tag is-primary">$150</span>
          </label>
          <label class="radio is-flex is-align-items-center">
            <input class="radio mr-2" type="radio" name="license" value="2">
            <span>Monthly license</span>
            <span class="ml-2 tag is-primary">$85</span>
          </label>
        </div>
      </div>
      <div class="column is-8">
        <div class="columns is-multiline box has-background-light">
          <div class="column is-5-desktop mb-5">
            <div class="has-text-centered">

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

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-4 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 mb-5">
        <div class="columns is-multiline">
          <div class="column is-4 mb-4">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          </div>
          <div class="column is-8">
            <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
            <h2 class="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>
      </div>
      <div class="column is-6 mb-5">

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-8 is-6-desktop">
        <div class="mx-auto mb-5 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="has-text-grey-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="column is-12 is-8-desktop">
        <div class="columns is-multiline">
          <div class="column is-4 mb-4">
            <div class="box py-6 has-background-light has-text-centered" style="height: 100%">
              <h3 class="is-size-4 has-text-weight-bold">Address</h3>
              <p class="mt-3 mb-1">1686 Geraldine Lane</p>
              <p>New York, NY 10013</p>
            </div>
          </div>
          <div class="column is-4 mb-4">
            <div class="box py-6 has-background-light has-text-centered" style="height: 100%">
              <h3 class="is-size-4 has-text-weight-bold">Contact</h3>
              <p class="mt-3 mb-1">hello@wireframes.org</p>
              <p>+7-843-672-431</p>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-5-desktop mb-5 mr-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>
              </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 #1567

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="pb-5 columns is-multiline">
      <div class="column is-8">
        <div class="columns is-multiline">
          <div class="column is-6 is-3-desktop mb-4">
            <h3 class="mb-5 is-size-5 has-text-weight-bold">Company</h3>
            <ul>
              <li class="mb-2"><a class="button is-white" href="#">About Us</a></li>
              <li class="mb-2"><a class="button is-white" href="#">Careers</a></li>
              <li class="mb-2"><a class="button is-white" href="#">Press</a></li>
              <li><a class="button is-white" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="column is-6 is-3-desktop mb-4">
            <h3 class="mb-4 is-size-5 has-text-weight-bold">Pages</h3>
            <ul>
              <li class="mb-2"><a class="button is-white" href="#">Login</a></li>
              <li class="mb-2"><a class="button is-white" href="#">Register</a></li>
              <li class="mb-2"><a class="button is-white" href="#">Add list</a></li>
              <li><a class="button is-white" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="column is-6 is-3-desktop 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 #1568

Bulma

Plain

<section class="is-relative is-clipped section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-5-widescreen is-6-desktop">
        <h2 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem Ipsum dolor sit amet</h2>
        <p class="subtitle has-text-grey mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="mb-5 is-flex is-align-items-center">
          <span class="mr-4 is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 48px; height: 48px; border-radius: 50% !important;">
            <svg class="has-text-primary" 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>
          <div>
            <p class="mb-0">Lorem Ipsum dolor</p>
          </div>
        </div>
        <div class="mb-5 is-flex is-align-items-center">
          <span class="mr-4 is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 48px; height: 48px; border-radius: 50% !important;">
            <svg class="has-text-primary" 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>
          <div>
            <p class="mb-0">Phasellus sit amet blandit ligula</p>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered 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-5 ml-auto">
        <h2 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Expand your brand with this excellent extension tool</h2>
        <p class="subtitle has-text-grey mb-5">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p>
        <a class="button is-primary" href="#">Try Demo</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 #1570

Bulma

Plain

<section class="section">
  <div class="container">
    <h5 class="is-size-5 has-text-grey-dark mb-2 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="is-flex is-align-items-center" 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="is-flex is-align-items-center" 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="is-flex is-align-items-center" 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="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/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 #1571

Bulma

Plain

<section class="section has-background-primary">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-10">
        <div class="is-vcentered columns is-multiline">
          <div class="column is-2 is-hidden-touch">
            <button class="button p-0 is-light 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-8">
            <div class="mx-auto mb-5 has-text-centered">
              <h2 class="has-text-white mb-5 is-size-1 is-size-3-mobile has-text-weight-bold">Expand your brand with this excellent extension tool.</h2>
              <p class="has-text-white mb-5">A short message that will bring your customers into the world of your imagination. And will allow them to become more familiar with your brand.</p>
              <a class="button is-light" href="#">Try Demo</a>
            </div>
          </div>
          <div class="column is-2 is-hidden-touch has-text-right">
            <button class="button p-0 is-light 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="M9 5l7 7-7 7"></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 #1572

Bulma

Plain

<nav class="navbar py-4">
  <div class="container is-fluid">
    <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-start"><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="field has-addons">
          <div class="control">
            <input class="input" type="search" placeholder="Search" aria-label="Search">
          </div>
          <div class="control">
            <button class="button" type="submit">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></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 #1573

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 In</span>
          <h3 class="mb-5 is-size-4 has-text-weight-bold">Join our community</h3>
          <form action="#">
            <div class="field">
              <div class="control">
                <input class="input" type="email" placeholder="E-mail address">
              </div>
            </div>
            <div class="field">
              <div class="control">
                <input class="input" type="password" placeholder="Password">
              </div>
            </div>
            <button class="button is-primary mb-4 is-fullwidth">Get Started</button>
            <a class="mb-4 is-inline-block" href="#"><small>Forgot password?</small></a>
            <a class="button is-white mb-2 is-flex is-justify-content-center is-align-items-center is-fullwidth" href="#">
              <img class="image mr-2" style="height: 24px;" src="bulma-plain-assets/socials/facebook.svg" alt="">
              <span class="has-text-grey-dark">Sign in with Facebook</span>
            </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 #1574

Bulma

Plain

<section class="section is-relative">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-6 is-5-desktop mr-auto 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">
        <h2 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem Ipsum dolor sit amet</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>
        <div class="mb-4 is-flex">
          <div class="has-text-grey-dark">
            <svg style="width: 32px; height: 32px;" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#00d1b2"></path>
              <circle cx="24" cy="24" r="23.5" stroke="#00d1b2"></circle>
            </svg>
          </div>
          <div class="ml-3">
            <h5 class="is-size-5 has-text-weight-normal">Quick problem-solving contact</h5>
          </div>
        </div>
        <div class="mb-4 is-flex">
          <div class="has-text-grey-dark">
            <svg style="width: 32px; height: 32px;" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#00d1b2"></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 #1575

Bulma

Plain

<section class="is-relative is-clipped section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-5-widescreen is-6-desktop ml-auto">
        <h2 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem Ipsum dolor sit amet</h2>
        <p class="subtitle has-text-grey mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="mb-5 is-flex is-align-items-center">
          <span class="mr-4 is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">
            <svg class="has-text-primary" 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>
          <div>
            <p class="mb-0">Lorem Ipsum dolor</p>
          </div>
        </div>
        <div class="mb-5 is-flex is-align-items-center">
          <span class="mr-4 is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">
            <svg class="has-text-primary" 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>
          <div>
            <p class="mb-0">Phasellus sit amet blandit ligula</p>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-8 is-6-desktop">
        <div class="mb-4 box p-6 is-relative has-background-light">
          <span class="mt-4 ml-4" style="position: absolute; top: 0; left: 0;">
            <svg width="30" height="25" viewbox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.24 24.544C4.97867 24.544 3.272 23.7333 2.12 22.112C1.01067 20.448 0.456 18.144 0.456 15.2C0.456 12 1.26667 9.184 2.888 6.752C4.50933 4.27733 7.02667 2.22933 10.44 0.607998L12.744 5.344C10.696 6.24 9.16 7.34933 8.136 8.672C7.112 9.952 6.6 11.552 6.6 13.472C6.728 13.4293 6.94133 13.408 7.24 13.408C8.776 13.408 10.0773 13.8773 11.144 14.816C12.2107 15.7547 12.744 17.0347 12.744 18.656C12.744 20.448 12.232 21.8773 11.208 22.944C10.184 24.0107 8.86133 24.544 7.24 24.544ZM23.88 24.544C21.6187 24.544 19.912 23.7333 18.76 22.112C17.6507 20.448 17.096 18.144 17.096 15.2C17.096 12 17.9067 9.184 19.528 6.752C21.1493 4.27733 23.6667 2.22933 27.08 0.607998L29.384 5.344C27.336 6.24 25.8 7.34933 24.776 8.672C23.752 9.952 23.24 11.552 23.24 13.472C23.368 13.4293 23.5813 13.408 23.88 13.408C25.416 13.408 26.7173 13.8773 27.784 14.816C28.8507 15.7547 29.384 17.0347 29.384 18.656C29.384 20.448 28.872 21.8773 27.848 22.944C26.824 24.0107 25.5013 24.544 23.88 24.544Z" fill="#00d1b2"></path>
            </svg>
          </span>
          <p class="subtitle has-text-grey">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the “excessive” amount of work behind building something new. There’s just “so much to get done” before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
        </div>
        <p class="has-text-grey has-text-centered">Danny Bailey, CEO & Founder at Wireframes</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 #1577

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 mb-5">
        <div class="columns is-multiline">
          <div class="column is-4 mb-4">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          </div>
          <div class="column is-8">
            <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
            <h2 class="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>
      </div>
      <div class="column is-6 mb-5">
        <div class="columns is-multiline">
          <div class="column is-4 mb-4">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
          </div>
          <div class="column is-8">
            <span><small class="has-text-grey-dark">10 jun 2021 19:40</small></span>
            <h2 class="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 #1578

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6 pb-3 columns is-multiline">
      <div class="column is-12 is-6-desktop mx-auto has-text-centered">
        <h2 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Get our Free Mobile App</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>
        <div class="buttons is-centered">
          <a class="mr-3" href="#">
            <img src="bulma-plain-assets/images/buttons/app-store.svg" alt="">
          </a>
          <a href="#">
            <img src="bulma-plain-assets/images/buttons/google-play.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-4-desktop">
        <div class="mb-6 is-flex">
          <span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="#00d1b2"></path>
              <circle cx="24" cy="24" r="23.5" stroke="#00d1b2"></circle>
            </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 #1579

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>
        <div class="mb-5">
          <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
        </div>
        <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">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 #1580

Bulma

Plain

<section class="section" style="background-image: url('bulma-plain-assets/images/green-400-horizontal.png'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-5">
        <div class="box p-6 has-background-light">
          <svg 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="#00d1b2"></path>
          </svg>
          <h4 class="mt-3 mb-3 is-size-4 has-text-weight-bold">Weekly email updates</h4>
          <p class="subtitle has-text-grey mb-5">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
          <a class="is-flex is-align-items-center" href="#">
            <span class="pb-1">Learn More</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </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

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

Get the code for 13,400+ components

Bulma Component #1562

Get the code for 13,400+ components

Bulma Component #1563

Get the code for 13,400+ components

Bulma Component #1564

Get the code for 13,400+ components

Bulma Component #1565

Get the code for 13,400+ components

Bulma Component #1566

Get the code for 13,400+ components

Bulma Component #1567

Get the code for 13,400+ components

Bulma Component #1568

Get the code for 13,400+ components

Bulma Component #1569

Get the code for 13,400+ components

Bulma Component #1570

Get the code for 13,400+ components

Bulma Component #1571

Get the code for 13,400+ components

Bulma Component #1572

Get the code for 13,400+ components

Bulma Component #1573

Get the code for 13,400+ components

Bulma Component #1574

Get the code for 13,400+ components

Bulma Component #1575

Get the code for 13,400+ components

Bulma Component #1576

Get the code for 13,400+ components

Bulma Component #1577

Get the code for 13,400+ components

Bulma Component #1578

Get the code for 13,400+ components

Bulma Component #1579

Get the code for 13,400+ components

Bulma Component #1580

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