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

Bulma

Pstls.

<section class="section py-28 is-relative is-clipped">
  <img class="is-absolute is-top-0 is-left-0 image" src="pstls-assets/images/testimonials/testimonial-1-shadow.png" alt="">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-5-widescreen is-6-tablet mb-20 mb-0-tablet" style="z-index: 1;">
        <div class="has-mw-md-tablet">
          <img class="image" src="pstls-assets/icons/testimonials-quote.svg" alt="">
          <h2 class="title is-size-3 mt-6 mb-10 is-spaced">Recently, the US Federal government banned online casinos from operating in America by making it illegal to transfer money to them through any US bank.</h2>
          <h5 class="is-size-4 has-text-weight-bold mb-1">Sophie Kowalsky</h5>
          <span class="has-text-grey-light is-size-6">CTO at Shuffle</span>
        </div>
      </div>
      <div class="column is-6-tablet is-7-widescreen">
        <div class="has-mw-lg mx-auto mr-0-tablet pt-12 is-relative">
          <div class="-mr-32 is-absolute is-top-0 is-right-0 is-covered" style="background-image: url('pstls-assets/images/testimonials/colors.png'); background-size: cover; height: 100%; width: 100%;"></div>
          <img class="is-relative image is-fullwidth" src="pstls-assets/images/testimonials/woman.jpeg" alt="" style="z-index: 1">
          <div class="is-flex is-justify-content-around">
            <div class="mt-4 ml-4-widescreen mr-6">
              <div class="is-flex"><a class="mr-3 has-background-light" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a><a class="mr-3 has-background-primary" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a><a class="mr-3 has-background-light" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a><a class="has-background-light" style="width: 11px; height: 11px; transform: rotate(45deg)" href="#"></a></div>
            </div>
            <div class="ml-44-widescreen is-flex">
              <a class="button p-0 is-warning" style="width: 50px; height: 50px;" href="#">
                <img class="image mx-auto" src="pstls-assets/icons/testimonials-arrow-left.svg" alt="">
              </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 #622

Bulma

Pstls.

<section class="py-24 is-relative has-background-white">
  <div class="is-relative section pb-24 has-background-black" style="z-index: 1;">
    <div class="container">
      <p class="has-text-grey-light mb-20 has-text-centered">Trusted by brands all over the world</p>
      <div class="columns is-multiline is-vcentered is-mobile">
        <div class="column is-3-tablet is-6-mobile mb-6 mb-0-tablet">
          <img class="mx-auto image" src="pstls-assets/logos/coca-cola-w-xl.svg" alt="">
        </div>
        <div class="column is-3-tablet is-6-mobile mb-6 mb-0-tablet">
          <img class="mx-auto image" src="pstls-assets/logos/apple-w-xl.svg" alt="">
        </div>
        <div class="column is-3-tablet is-6-mobile">
          <img class="mx-auto image" src="pstls-assets/logos/champion-w-xl.svg" alt="">
        </div>
        <div class="column is-3-tablet is-6-mobile">
          <img class="mx-auto image" src="pstls-assets/logos/sony-w-xl.svg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="is-absolute is-top-0 is-left-0">
    <div class="p-32 has-background-primary-light"></div>
  </div>
  <div class="px-1 is-absolute is-bottom-0 is-right-0">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #623

Bulma

Pstls.

<section class="section py-24 is-relative">
  <div class="is-absolute is-top-0 is-right-0 p-20 p-40-tablet has-background-primary-light"></div>
  <div class="is-absolute is-bottom-0 is-left-0 p-20 p-40-tablet has-background-warning-light"></div>
  <div class="container is-relative">
    <div class="px-4 py-20 has-background-black">
      <div class="has-mw-2xl mx-auto has-text-centered">
        <span class="heading is-size-6">New feature</span>
        <h1 class="title mt-2 is-size-2-touch is-size-1-tablet has-text-white is-spaced">
          <span>Take</span>
          <span class="has-text-primary">quick action</span>
          <span>that increases your brand's regular profit.</span>
        </h1>
        <p class="has-text-white mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="buttons is-centered"><a class="button is-primary" href="#">Activate Demo</a><a class="button is-primary is-outlined" href="#">Share with friends</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 #624

Bulma

Pstls.

<section class="section py-24 is-relative">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-tablet mb-8 mb-0-tablet">
        <div class="box py-10 py-16-tablet has-background-white" style="border: 0; box-shadow: 0px 48px 86px rgb(0 0 0 / 3%) !important;">
          <div class="has-text-centered">
            <p class="is-size-6 mb-1 has-text-light has-text-weight-bold">Subscribers</p>
            <h2 class="title mb-0 is-size-3">12 350</h2>
          </div>
        </div>
      </div>
      <div class="column is-4-tablet mb-8 mb-0-tablet">
        <div class="box py-10 py-16-tablet has-background-white" style="border: 0; box-shadow: 0px 48px 86px rgb(0 0 0 / 3%) !important;">
          <div class="has-text-centered">
            <p class="is-size-6 mb-1 has-text-light has-text-weight-bold">Projects</p>
            <h2 class="title mb-0 is-size-3">5 065</h2>
          </div>
        </div>
      </div>
      <div class="column is-4-tablet">
        <div class="box py-10 py-16-tablet has-background-white" style="border: 0; box-shadow: 0px 48px 86px rgb(0 0 0 / 3%) !important;">
          <div class="has-text-centered">
            <p class="is-size-6 mb-1 has-text-light has-text-weight-bold">Tasks</p>
            <h2 class="title mb-0 is-size-3">45 065</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 #625

Bulma

Pstls.

<section class="section py-24 is-relative">
  <div class="container">
    <img class="is-absolute is-top-0 is-bottom-0 is-left-0 is-fullwidth" style="object-fit: cover;" src="pstls-assets/images/contacts/pink-shadows.png" alt="">
    <div class="mb-8 mb-24-tablet columns is-multiline is-relative">
      <div class="column is-6-tablet">
        <h2 class="title is-size-2-mobile is-size-1-tablet">Contact</h2>
      </div>
      <div class="column is-6-tablet">
        <p class="is-size-5 has-text-grey-light">Is the answer to your question missing?</p>
        <p class="is-size-5">Get in touch with us.</p>
      </div>
    </div>
    <div class="columns is-multiline is-relative">
      <div class="column is-6-tablet">
        <div class="columns is-multiline">
          <div class="column is-12 is-6-desktop mb-12-tablet">
            <p class="is-size-5 has-text-grey-light">E-mail</p>
            <a class="is-size-5 has-text-dark" href="mailto:contact@pstls.com">contact@pstls.com</a>
          </div>
          <div class="column is-12 is-6-desktop mb-12-tablet">
            <p class="is-size-5 has-text-grey-light">Phone</p>
            <p class="is-size-5">+1-2020-555-109</p>
          </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

Bulma Component #626

Bulma

Pstls.

<section class="section py-20 py-24-tablet has-background-white">
  <div class="container">
    <div class="mb-12 columns is-multiline is-vcentered">
      <div class="column is-narrow">
        <a href="#">
          <img class="image" src="pstls-assets/logos/pstls-logo.svg" alt="" width="87">
        </a>
      </div>
      <div class="column">
        <ul class="is-flex-tablet -mb-4 is-justify-content-center">
          <li class="mb-4 mr-12-tablet"><a class="has-text-weight-bold has-text-dark" href="#">Hello</a></li>
          <li class="mb-4 mr-12-tablet"><a class="has-text-weight-bold has-text-dark" href="#">Story</a></li>
          <li class="mb-4 mr-12-tablet"><a class="has-text-weight-bold has-text-dark" href="#">About us</a></li>
          <li class="mb-4"><a class="has-text-weight-bold has-text-dark" href="#">Services</a></li>
        </ul>
      </div>
      <div class="column is-narrow">
        <div class="is-flex is-flex-direction-row">
          <a href="#">
            <img class="image" src="pstls-assets/logos/twitter.svg" alt="">
          </a>
          <a class="mx-7" href="#">
            <img class="image" src="pstls-assets/logos/google.svg" alt="">
          </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 #627

Bulma

Pstls.

<section class="section py-24 is-relative has-background-white">
  <div class="column is-4 is-5-desktop is-absolute is-top-0 is-right-0 is-covered" style="background-image: url('pstls-assets/images/how-it-works/colors-right.png'); background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%"></div>
  <div class="container is-relative">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-tablet is-5-desktop mb-12 mb-0-desktop">
        <div class="has-mw-md has-mw-sm-desktop mx-auto">
          <h1 class="title is-size-2-mobile is-size-1-tablet">Build and launch without problems</h1>
        </div>
      </div>
      <div class="column is-12-tablet is-7-desktop">
        <div class="has-mw-md has-mw-xl-desktop mx-auto py-12 px-8-mobile px-12-tablet is-relative has-background-black" style="z-index: 1;">
          <div class="mb-14 columns">
            <div class="column is-narrow mb-2 mb-0-desktop">
              <div class="is-inline-flex is-align-items-center is-justify-content-center is-relative" style="width: 52px; height: 52px;">
                <div class="is-absolute is-top-0 is-left-0 has-background-primary" style="width: 100%; height: 100%; transform: rotate(45deg)"></div>
                <h2 class="title is-size-3 has-text-weight-bold is-relative">1</h2>
              </div>
            </div>
            <div class="column pl-6">
              <h2 class="title is-size-4-touch is-size-3-desktop has-text-white">Register account</h2>
              <h5 class="subtitle has-text-weight-medium is-size-5 has-text-white">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</h5>
            </div>
          </div>
          <div class="mb-14 columns">

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

Bulma

Pstls.

<section class="section">
  <div class="container">
    <div class="has-mw-xl mx-auto px-14 py-16 has-background-white has-text-centered">
      <img class="image mx-auto" src="pstls-assets/icons/modal-check-circle.svg" alt="">
      <h2 class="title is-size-2 mt-6">Some positive notification</h2>
      <p class="subtitle mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium sapien vitae elit ullamcorper, vel convallis tortor laoreet.</p>
      <a class="button is-dark" href="#">Go back to Homepage</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 #629

Bulma

Pstls.

<section class="has-text-white py-24 pt-48-tablet is-clipped">
  <div class="container">
    <div class="ml-auto pt-16 pb-24 is-relative has-background-black">
      <div class="is absolute is-top-0 is-left-0 -mt-40 -ml-52-widescreen is-left-0">
        <img class="has-mw-sm image" src="pstls-assets/images/features/features-women.png" alt="">
      </div>
      <div class="has-mw-md-tablet -mt-96 is-hidden-touch is-top-0 is-right-0" style="z-index: -1;"></div>
      <div class="has-mw-sm has-mw-3xl-desktop has-mw-5xl-widescreen mx-auto mt-12-mobile pl-96-desktop px-4 px-64-widescreen">
        <div class="columns is-multiline">
          <div class="column is-10-widescreen">
            <h2 class="title is-size-3 has-text-white">Lorem ipsum dolor sit amet conscetutar domor at elis</h2>
          </div>
        </div>
        <div class="mt-12 columns is-multiline">
          <div class="column is-12 is-6-widescreen mb-10">
            <img class="image" src="pstls-assets/icons/document-clean.svg" alt="">
            <h5 class="is-size-4 has-text-white mt-8 mb-6">Layer styles</h5>
            <p class="subtitle has-text-grey-light">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="column is-12 is-6-widescreen mb-10">
            <img class="image" src="pstls-assets/icons/check-circle.svg" alt="">
            <h5 class="is-size-4 has-text-white mt-8 mb-6">No errors</h5>
            <p class="subtitle has-text-grey-light">Take care to develop resources continually and integrity them with previous projects.</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 #630

Bulma

Pstls.

<section class="section py-24 has-background-white is-clipped">
  <div class="container is-relative">
    <img class="-mt-44 -ml-60 is-absolute is-top-0 is-left-0 image" src="pstls-assets/images/teams/team-1-shadow.png" alt="">
    <div class="is-relative">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-5-tablet">
          <h1 class="title is-size-2-mobile is-size-1-tablet">Team</h1>
        </div>
        <div class="column is-7-tablet">
          <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
      <div class="mt-20 columns is-multiline">
        <div class="column is-4-desktop is-6-tablet mb-14">
          <div class="has-mw-xs mx-auto px-7">
            <div class="mb-12 is-relative">
              <img class="is-relative image is-fullwidth" src="pstls-assets/images/teams/team-1-photo.jpg" style="z-index: 1" alt="">
              <div class="mt-6 -ml-6 is-absolute is-top-0 is-left-0 has-background-primary-light" style="height: 100%; width: 100%;"></div>
            </div>
            <h5 class="is-size-4 has-text-weight-bold mb-2">Sophie Kowalsky</h5>
            <span class="has-text-grey-light is-size-6">CTO at Shuffle</span>
          </div>
        </div>
        <div class="column is-4-desktop is-6-tablet mb-14">

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

Bulma

Pstls.

<section class="section py-24 py-36-desktop has-background-white" style="background-image: url('pstls-assets/images/forms/form-1-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;">
  <div class="container">
    <div class="has-mw-sm mx-auto">
      <div class="has-text-centered">
        <img class="image mx-auto" src="pstls-assets/logos/pstls-logo-form.svg" alt="">
        <h2 class="title is-size-3 mt-6 mb-2 is-spaced">Log in to your account</h2>
        <p class="subtitle mb-6">Please enter your details to proceed.</p>
      </div>
      <form action="">
        <div class="field mb-4">
          <label class="label" for="">Email</label>
          <div class="control">
            <input class="input" type="email" placeholder="Your email address">
          </div>
        </div>
        <div class="field mb-4">
          <label class="label" for="">Password</label>
          <div class="control">
            <input class="input" type="password" placeholder="Your password">
          </div>
        </div>
        <label class="checkbox is-flex mb-6">
          <input class="mr-4" type="checkbox" name="terms" value="1">
          <div class="is-size-7">

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

Bulma

Pstls.

<section class="section py-24 has-background-white">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-16 has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Choose a plan</h1>
      <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-touch is-4-desktop">
        <div class="has-mw-md mx-auto p-8-touch p-8-desktop p-12-widescreen has-background-primary-light">
          <div class="mb-12 is-flex is-justify-content-space-between is-align-items-flex-end">
            <h2 class="title is-size-3 mb-0">Free</h2>
            <h5 class="title is-size-5 is-size-4-widescreen has-text-primary mb-0">$0,00</h5>
          </div>
          <ul class="mb-10">
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 component categorie</span>
            </li>
            <li class="mb-2 is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt="">
              <span>1 mobile component</span>
            </li>
            <li class="is-flex">
              <img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" 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 #633

Bulma

Pstls.

<section class="section">
  <div class="container">
    <div class="columns is-vcentered is-multiline">
      <div class="column is-6">
        <div class="has-mw-md mx-auto">
          <h2 class="title is-size-2-mobile is-size-1-tablet is-spaced">Build and launch without problems</h2>
          <p class="subtitle mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          <div class="buttons">
            <a class="button is-ghost p-0" href="#">
              <img src="pstls-assets/images/applications/appstore.svg" alt="">
            </a>
            <a class="button is-ghost p-0" href="#">
              <img src="pstls-assets/images/applications/googleplay.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="column is-6">
        <img class="has-mw-xs has-mw-md-desktop mx-auto mb-8-mobile is-block image" src="pstls-assets/images/applications/phone-light-squares.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 #634

Bulma

Pstls.

<div class="has-mw-3xl mr-5-desktop pb-8 is-fixed is-bottom-0 is-right-0" style="z-index: 50;">
  <div class="card">
    <div class="p-4">
      <div class="p-6" style="border: 1px solid #F4F0FF;">
        <div class="columns is-vcentered is-multiline">
          <div class="column is-8-tablet">
            <h3 class="title mb-2 is-size-4-touch is-size-3-desktop is-spaced">Cookies settings</h3>
            <p class="subtitle is-size-6-touch is-size-5-desktop">By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation...</p>
          </div>
          <div class="column is-4-tablet">
            <div class="buttons"><a class="button is-fullwidth is-dark" href="#">Accept</a><a class="button is-fullwidth is-ghost has-text-grey-light" href="#">Show more</a></div>
          </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 #635

Bulma

Pstls.

<section class="section py-24 has-background-white-bis">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-20 mb-16-widescreen has-text-centered">
      <h1 class="title is-size-2-mobile is-size-1-tablet px-12-widescreen is-spaced">Frequently asked questions</h1>
      <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="mb-20 mb-24-widescreen columns is-multiline">
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">
          <h5 class="title is-size-4 mt-6 is-spaced">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
          <p class="subtitle has-text-grey-darker">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.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" alt="">
          <h5 class="title is-size-4 mt-6 is-spaced">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
          <p class="subtitle has-text-grey-darker">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.</p>
        </div>
      </div>
      <div class="column is-6">
        <div class="px-6 px-16-tablet py-12 has-background-white">
          <img class="image" src="pstls-assets/icons/faq-info.svg" 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 #636

Bulma

Pstls.

<section class="pb-8 is-fixed-bottom is-bottom-0 is-left-0 is-right-0" style="z-index: 50;">
  <div class="container">
    <div class="card">
      <div class="p-4">
        <div class="p-6" style="border: 1px solid #F4F0FF;">
          <div class="columns is-multiline is-vcentered">
            <div class="column is-6 is-9-widescreen">
              <h3 class="title mb-2 is-size-4-touch is-size-3-desktop is-spaced">Cookies settings</h3>
              <p class="subtitle is-size-6-touch is-size-5-desktop">By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation...</p>
            </div>
            <div class="column is-6 is-3-widescreen">
              <div class="buttons is-right"><a class="button is-dark" href="#">Accept</a><a class="button is-light" href="#">Decline</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #637

Bulma

Pstls.

<section>
  <div class="section py-24 pb-12 pb-52-widescreen" style="background-image: url('pstls-assets/images/pricing/background-colors.png'); background-size: cover; background-repeat: no-repeat; background-position: center;">
    <div class="container">
      <div class="has-mw-2xl mx-auto px-5 has-text-centered">
        <h1 class="title is-size-2-mobile is-size-1-tablet is-spaced">Choose a plan</h1>
        <p class="subtitle">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
    </div>
  </div>
  <div class="section -mt-32 py-24 pt-0-widescreen is-relative">
    <div class="container">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-4 is-hidden-touch">
          <ul class="pt-24">
            <li class="mb-6">
              <h5 class="is-size-5">Cloud storage</h5>
            </li>
            <li class="mb-6">
              <h5 class="is-size-5">Users</h5>
            </li>
            <li class="mb-6">
              <h5 class="is-size-5">Teams</h5>
            </li>
            <li 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 #638

Bulma

Pstls.

<section class="py-28 has-background-white">
  <div class="container">
    <div class="has-mw-6xl mx-auto">
      <div class="pb-4" style="overflow-x: scroll;">
        <table class="table is-bordered is-fullwidth">
          <thead>
            <tr>
              <th scope="col">
                <button class="button p-0 is-ghost has-text-dark is-flex is-align-items-center">
                  <small class="mr-2 has-text-weight-normal">Surname</small>
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.3327 6.00002L7.99935 2.66669L4.66602 6.00002M4.66602 10L7.99935 13.3334L11.3327 10" stroke="#C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </th>
              <th scope="col">
                <button class="button p-0 is-ghost has-text-dark is-flex is-align-items-center">
                  <small class="mr-2 has-text-weight-normal">Name</small>
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.3327 6.00002L7.99935 2.66669L4.66602 6.00002M4.66602 10L7.99935 13.3334L11.3327 10" stroke="#C5C5C5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </th>
              <th scope="col">

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

Bulma

Pstls.

<section class="section">
  <div class="container">
    <div class="has-mw-xl mx-auto px-14 py-16 has-background-white has-text-centered">
      <img class="image mx-auto" src="pstls-assets/icons/modal-cross-circle.svg" alt="">
      <h2 class="title is-size-2 mt-6 mb-3">Some positive notification</h2>
      <p class="subtitle mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium sapien vitae elit ullamcorper, vel convallis tortor laoreet.</p>
      <a class="button is-dark" href="#">Go back to Homepage</a>
    </div>
  </div>
  <div class="is-absolute is-top-0 is-left-0 has-background-dark is-fullwidth is-covered" style="z-index: -1; opacity: 0.7; height: 100%"></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 #640

Bulma

Pstls.

<section class="section py-20 has-background-white">
  <div class="container">
    <img class="mb-8 image is-fullwidth" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="">
    <div class="has-mw-4xl mx-auto mb-12 has-text-centered">
      <span class="has-text-primary">Published 02 September 2022</span>
      <h2 class="title mt-2 is-size-2">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    </div>
    <div class="content has-mw-xl mx-auto">
      <p class="subtitle mb-8 pb-8" style="border-bottom: 1px solid #DFDFDF;">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>
      <h2 class="title is-size-3 is-spaced">Lorem ipsum</h2>
      <p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <img class="mb-4 image is-fullwidth img-fluid" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="">
      <p class="is-size-6 mb-8">
        <span>Brown wooden dock by Mark Harpur via</span>
        <a class="is-primary" href="#">Unsplash</a>
      </p>
      <p class="subtitle mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
      <ol class="mb-12">
        <li class="subtitle">Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
        <li class="subtitle">Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
        <li class="subtitle">Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
      </ol>
      <div class="mb-6 is-flex is-relative">

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

Get the code for 13,400+ components

Bulma Component #622

Get the code for 13,400+ components

Bulma Component #623

Get the code for 13,400+ components

Bulma Component #624

Get the code for 13,400+ components

Bulma Component #625

Get the code for 13,400+ components

Bulma Component #626

Get the code for 13,400+ components

Bulma Component #627

Get the code for 13,400+ components

Bulma Component #628

Get the code for 13,400+ components

Bulma Component #629

Get the code for 13,400+ components

Bulma Component #630

Get the code for 13,400+ components

Bulma Component #631

Get the code for 13,400+ components

Bulma Component #632

Get the code for 13,400+ components

Bulma Component #633

Get the code for 13,400+ components

Bulma Component #634

Get the code for 13,400+ components

Bulma Component #635

Get the code for 13,400+ components

Bulma Component #636

Get the code for 13,400+ components

Bulma Component #637

Get the code for 13,400+ components

Bulma Component #638

Get the code for 13,400+ components

Bulma Component #639

Get the code for 13,400+ components

Bulma Component #640

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