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

Bulma

Plain

<footer class="section">
  <div class="container">
    <div class="pb-5 is-flex is-flex-wrap-wrap is-justify-content-between is-align-items-center">
      <div class="mr-auto mb-2">
        <a class="is-inline-block" href="#">
          <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
        </a>
      </div>
      <div>
        <ul class="is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-center">
          <li class="mr-4"><a class="button is-white" href="#">About</a></li>
          <li class="mr-4"><a class="button is-white" href="#">Company</a></li>
          <li class="mr-4"><a class="button is-white" href="#">Services</a></li>
          <li><a class="button is-white" href="#">Testimonials</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="pt-5" style="border-top: 1px solid #dee2e6;"></div>
  <div class="container">
    <div class="is-flex-tablet is-justify-content-between is-align-items-center">
      <p>All rights reserved © Wireframes Corporation 2021</p>
      <div class="py-2 is-hidden-tablet"></div>
      <div class="ml-auto">

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

Bulma

Plain

<section class="section is-relative">
  <img class="column is-6 ml-auto is-hidden-touch" style="position: absolute; top: 0; right: 0; object-fit: cover; height: 100%" src="bulma-plain-assets/images/green-400-square.png" alt="">
  <img class="is-hidden-desktop is-fullwidth" style="max-height: 512px; width: 100%; object-fit: cover;" src="bulma-plain-assets/images/green-400-square.png" alt="">
  <div class="container py-6">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop 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>
  </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 #1503

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6 is-vcentered columns is-multiline">
      <div class="column is-6 mb-4">
        <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 class="column is-6">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-4 mb-5 is-flex">
        <div class="is-flex">
          <span class="has-text-white mr-3 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>
      <div class="column is-4 mb-5 is-flex">
        <span class="has-text-white mr-3 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>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-7 mb-4">
        <div class="is-flex is-align-items-center">
          <span class="has-text-white mr-4 is-flex has-background-primary is-justify-content-center is-align-items-center is-flex-shrink-0" 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>
          <div>
            <h3 class="is-size-2 is-size-3-mobile has-text-weight-bold">Sign up to our newsletter</h3>
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
      <div class="column is-4 ml-auto">
        <form action="#">
          <div class="is-flex">
            <div class="control mr-2 is-flex-grow-1">
              <input class="input" type="email" placeholder="Type your e-mail">
            </div>
            <button class="button is-primary">Action</button>
          </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 #1505

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-justify-content-center">
      <div class="column is-3 mb-5 has-text-centered">
        <span class="has-text-light mx-auto mb-4 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>
        <h5 class="is-size-5 mb-2 has-text-weight-bold">Change of access</h5>
        <p class="has-text-grey-dark mx-auto">Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="column is-3 mb-5 has-text-centered">
        <span class="has-text-light mx-auto mb-4 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>
        <h5 class="is-size-5 mb-2 has-text-weight-bold">Frequent authentication</h5>
        <p class="has-text-grey-dark mx-auto">Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="column is-3 has-text-centered">
        <span class="has-text-light mx-auto mb-4 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">

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-8 mb-5">
        <div class="mb-4 is-flex">
          <img class="image" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
        </div>
        <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 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>
        <a href="#">Read More</a>
      </div>
      <div class="column is-4 mb-5">
        <div class="mb-4 is-flex">
          <img class="image" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
        </div>
        <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</h2>
        <p class="subtitle has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Read More</a>
      </div>
      <div class="column is-4 mb-5">
        <div class="mb-4 is-flex">
          <img class="image" src="bulma-plain-assets/images/green-400-horizontal.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 #1507

Bulma

Plain

<section class="section is-relative is-clipped">
  <div class="is-hidden-touch has-background-primary" style="position: absolute; top: 0; left: 0; width: 70%; height: 100%"></div>
  <div class="is-hidden-desktop has-background-primary is-fullwidth" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></div>
  <div class="container mx-auto is-relative">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-5-desktop mb-5">
        <div>
          <h2 class="has-text-white 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="has-text-white mb-0">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-6 is-4-desktop mx-auto">
        <div class="box has-background-light has-text-centered">
          <form action="#">
            <span class="has-text-grey-dark">Sign In</span>
            <h3 class="mb-5 is-size-4 has-text-weight-bold">Join our community</h3>
            <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">

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

Bulma

Plain

<section class="section">
  <div class="container has-text-centered">
    <div class="mb-5 columns is-multiline is-centered">
      <div class="column is-10-tablet is-6-desktop">
        <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 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 mb-5"><a class="button is-primary" href="#">Action</a><a class="button is-dark is-outlined is-primary" href="#">Action</a></div>
        <div>
          <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/images/devices/laptop.svg" alt="">
        </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 #1509

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-8 mb-6 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-4">
        <div class="box p-6 has-background-light">
          <div class="has-text-centered">
            <img class="mx-auto mb-5 image" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 80px;height: 80px">
            <h4 class="mb-2 is-size-5 has-text-weight-bold">Danny Bailey</h4>
            <p class="has-text-grey">CEO & Founder</p>
          </div>
        </div>
      </div>
      <div class="column is-6 is-4-desktop mb-4">
        <div class="box p-6 has-background-light">
          <div class="has-text-centered">
            <img class="mx-auto mb-5 image" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 80px;height: 80px">
            <h4 class="mb-2 is-size-5 has-text-weight-bold">Danny Bailey</h4>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-8 is-6-tablet is-4-desktop mb-5 mr-auto">
        <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 class="column is-6 is-3-desktop mb-5">
        <div class="box has-background-primary has-text-centered">
          <h4 class="has-text-white">Pro</h4>
          <span class="has-text-white mb-5 is-inline-block is-size-1 is-size-3-mobile has-text-weight-bold">$65,99</span>
          <ul class="mb-5">
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">Complete documentation</p>
            </li>
            <li class="mb-3 is-flex is-align-items-center">
              <svg class="has-text-light mr-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <p class="has-text-white mb-0">Working materials in Figma</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 #1511

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4 mb-5">
        <ul>
          <li class="mb-3"><a class="is-size-3 has-text-primary" href="#">Lorem ipsum</a></li>
          <li class="mb-3"><a class="is-size-3 has-text-primary" href="#">Dolor Sit</a></li>
          <li class="mb-3"><a class="is-size-3 has-text-primary" href="#">Amet consectutar</a></li>
          <li class="mb-3"><a class="is-size-3 has-text-primary" href="#">Domor at elis</a></li>
        </ul>
      </div>
      <div class="column is-8">
        <div class="columns is-multiline">
          <div class="column is-4">
            <img class="image is-fullwidth" style="height: 360px; object-fit: cover;" src="bulma-plain-assets/images/green-400-vertical.png" alt="">
          </div>
          <div class="column is-8">
            <img class="image is-fullwidth" style="height: 360px; object-fit: cover;" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
          </div>
          <div class="column is-8">
            <img class="image is-fullwidth" style="height: 360px; object-fit: cover;" src="bulma-plain-assets/images/green-400-horizontal.png" alt="">
          </div>
          <div class="column is-4">
            <img class="image is-fullwidth" style="height: 360px; object-fit: cover;" src="bulma-plain-assets/images/green-400-vertical.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 #1513

Bulma

Plain

<section class="section is-relative is-clipped">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-5 mr-auto">
        <h4 class="is-size-5 has-text-weight-bold">Danny Bailey</h4>
        <p class="has-text-grey mb-6">CEO & Founder</p>
        <h2 class="mb-5 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-align-items-center">
          <button class="button p-0 is-light mr-2 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>
          <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="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="column is-6 ml-auto is-relative">
        <div class="mb-5 is-flex is-hidden-widescreen">
          <button class="button p-0 is-light mr-2 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">

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6">
        <div class="box p-6 has-background-light">
          <div class="has-text-centered">
            <span class="has-text-light mx-auto mb-4 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>
            <h5 class="mb-3 is-size-5 has-text-weight-bold">Frequent authentication</h5>
            <p class="has-text-grey-dark">The best way to archive better skills is by challenging yourself with exciting projects on the side of your day-to-day work. You can try some of our free projects. Developing you and your brand is a crucial task for any business.</p>
          </div>
        </div>
      </div>
      <div class="column is-6">
        <div class="box p-6 has-background-light">
          <div class="has-text-centered">
            <span class="has-text-light mx-auto mb-4 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>

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

Bulma

Plain

<section class="pt-6 pb-6">
  <div class="container mb-5">
    <div class="columns is-multiline">
      <div class="column is-4 mb-5 has-text-centered">
        <svg class="mx-auto has-text-primary mb-4" 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="currentColor"></path>
          <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
        </svg>
        <p class="mb-1">1686, Geraldine Lane</p>
        <p class="mb-0">New York, NY 10013</p>
      </div>
      <div class="column is-4 mb-5 has-text-centered">
        <svg class="mx-auto has-text-primary mb-4" 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="currentColor"></path>
          <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
        </svg>
        <p class="mb-0">hello@wireframes.org</p>
      </div>
      <div class="column is-4 has-text-centered">
        <svg class="mx-auto has-text-primary mb-4" 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="currentColor"></path>
          <circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
        </svg>
        <p class="mb-0">+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 #1516

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 has-text-centered">
    <span class="has-text-white">Error 404</span>
    <h2 class="has-text-white mt-2 mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">Page not found</h2>
    <p class="has-text-white mb-6">Sorry! We are unable to find the page you are looking for</p>
    <div class="buttons is-centered"><a class="button is-light" href="#">Go back to Homepage</a><a class="button is-outlined is-light" href="#">Try Again</a></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 #1517

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">
        <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">
            <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 56px;height: 56px">
          </div>
          <div class="has-text-left">
            <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>
      </div>
    </div>
    <div class="mb-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

Bulma Component #1518

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered">
      <div class="column is-10 is-6-desktop">
        <ul>
          <li class="mb-4">
            <button class="button is-fullwidth is-flex is-justify-content-between is-align-items-center is-primary has-text-left" style="height: auto; white-space: unset;" type="button">
              <h2 class="pr-4 mr-auto">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h2>
              <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2498 10C19.2498 4.892 15.1088 0.75 9.99976 0.75C4.89176 0.75 0.749756 4.892 0.749756 10C0.749756 15.108 4.89176 19.25 9.99976 19.25C15.1088 19.25 19.2498 15.108 19.2498 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M13.4709 11.4423L9.99995 7.95626L6.52895 11.4423" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <div class="p-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</div>
          </li>
          <li class="mb-4">
            <button class="button is-fullwidth is-flex is-justify-content-between is-align-items-center is-primary has-text-left" style="height: auto; white-space: unset;" type="button">
              <h2 class="pr-4 mr-auto">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h2>
              <svg class="is-flex-shrink-0 ml-auto" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.750244 10C0.750244 15.108 4.89124 19.25 10.0002 19.25C15.1082 19.25 19.2502 15.108 19.2502 10C19.2502 4.892 15.1082 0.75 10.0002 0.75C4.89124 0.75 0.750244 4.892 0.750244 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6.52905 8.55768L10.0001 12.0437L13.4711 8.55768" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <div class="p-4 is-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</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 #1519

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="mb-6 pb-5 columns is-multiline is-centered">
      <div class="column is-8-desktop 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="is-vcentered columns is-multiline is-centered">
      <button class="button p-0 is-light mr-5 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 class="column is-8 is-6-desktop is-relative">
        <div class="mx-auto mb-5 box p-6 has-background-light has-text-centered">
          <div style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -40%)">
            <img class="mx-auto image is-fullwidth" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 80px;height: 80px">
          </div>
          <h4 class="mt-3 mb-2 is-size-5 has-text-weight-bold">Danny Bailey</h4>
          <p class="mb-5 has-text-grey">CEO & Founder</p>
          <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>

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

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <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 class="column is-8 mx-auto 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 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p>
        <img class="mx-auto mb-3 image is-fullwidth" src="bulma-plain-assets/images/green-400-avatar.png" alt="" style="width: 56px;height: 56px">
        <h4 class="mb-2 is-size-5 has-text-weight-bold">Danny Bailey</h4>
        <p class="has-text-grey">CEO & Founder</p>
        <div class="is-hidden-desktop mt-6">
          <button class="button p-0 is-light mr-2 is-rounded" style="width: 56px;height: 56px;">
            <svg class="has-text-grey-dark" style="width: 28px; height: 28px;" 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>
          <button class="button p-0 is-light is-rounded" style="width: 56px;height: 56px;">
            <svg class="has-text-grey-dark" style="width: 28px; height: 28px;" 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>

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

Get the code for 13,400+ components

Bulma Component #1502

Get the code for 13,400+ components

Bulma Component #1503

Get the code for 13,400+ components

Bulma Component #1504

Get the code for 13,400+ components

Bulma Component #1505

Get the code for 13,400+ components

Bulma Component #1506

Get the code for 13,400+ components

Bulma Component #1507

Get the code for 13,400+ components

Bulma Component #1508

Get the code for 13,400+ components

Bulma Component #1509

Get the code for 13,400+ components

Bulma Component #1510

Get the code for 13,400+ components

Bulma Component #1511

Get the code for 13,400+ components

Bulma Component #1512

Get the code for 13,400+ components

Bulma Component #1513

Get the code for 13,400+ components

Bulma Component #1514

Get the code for 13,400+ components

Bulma Component #1515

Get the code for 13,400+ components

Bulma Component #1516

Get the code for 13,400+ components

Bulma Component #1517

Get the code for 13,400+ components

Bulma Component #1518

Get the code for 13,400+ components

Bulma Component #1519

Get the code for 13,400+ components

Bulma Component #1520

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