Bulma Features Components (164)

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

Features from Flaro

Bulma

Flaro

<section class="has-background-white py-24 is-relative is-clipped">
    <img class="is-absolute is-left-0 is-top-0" src="flaro-assets/images/features/elipse.svg" alt="">
    <div class="container px-8">
        <div class="columns is-align-items-center">
            <div class="column is-6">
                <h1 class="title is-size-1 has-text-weight-bold mb-12">Build better customer experiences with Flaro</h1>
                <p class="has-text-dark">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
            </div>
            <div class="column is-6">
                <img src="flaro-assets/images/features/feature.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

Features from Zeus

Bulma

Zeus

<section class="section py-20">
  <div class="container">
    <div class="columns is-multiline -mb-12 -mb-20-desktop">
      <div class="column is-4 mb-12 mb-20-desktop">
        <div class="is-flex">
          <span class="is-flex-shrink-0 is-flex is-align-items-center is-justify-content-center mr-6 has-background-success" style="width: 48px; height: 48px; border-radius: 100%;">
            <svg width="18" height="21" viewbox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.98457 19.606C8.98457 19.606 16.6566 17.283 16.6566 10.879C16.6566 4.474 16.9346 3.974 16.3196 3.358C15.7036 2.742 9.99057 0.75 8.98457 0.75C7.97857 0.75 2.26557 2.742 1.65057 3.358C1.03457 3.974 1.31257 4.474 1.31257 10.879C1.31257 17.283 8.98457 19.606 8.98457 19.606Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.38599 9.87463L8.27799 11.7696L12.176 7.86963" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <div>
            <h4 class="mb-4 title is-4">Security in saving</h4>
            <p class="has-text-grey-dark">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-4 mb-12 mb-20-desktop">
        <div class="is-flex">
          <span class="is-flex-shrink-0 is-flex is-align-items-center is-justify-content-center mr-6 has-background-info" style="width: 48px; height: 48px; border-radius: 100%;">
            <svg 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="M10 0.750122C15.108 0.750122 19.25 4.89112 19.25 10.0001C19.25 15.1081 15.108 19.2501 10 19.2501C4.891 19.2501 0.75 15.1081 0.75 10.0001C0.75 4.89112 4.891 0.750122 10 0.750122Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.99512 6.20422V10.6232" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.995 13.7961H10.005" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></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

Features from Yofte

Bulma

Yofte

<section class="section has-background-light">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-3-desktop is-6-tablet mb-16 mb-0-desktop is-relative">
        <img class="ml-16 ml-52-desktop is-absolute is-hidden-touch is-top-0 is-left-0" src="yofte-assets/elements/dots.svg" alt="">
        <div class="is-relative has-text-centered">
          <span class="mb-16 is-inline-flex has-background-white is-justify-content-center is-align-items-center is-rounded" style="width: 80px; height: 80px; border-radius: 50% !important;">
            <svg width="37" height="27" viewbox="0 0 37 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M34.9845 6.67016C33.7519 5.33682 32 4.60814 30.0543 4.60814H24.9767V1.75543C24.9767 1.2438 24.5581 0.825195 24.0465 0.825195H0.930233C0.418605 0.825195 0 1.2438 0 1.75543V22.2128C0 22.7244 0.418605 23.143 0.930233 23.143H4.63566C4.93798 24.864 6.43411 26.174 8.24031 26.174C10.0465 26.174 11.5426 24.864 11.845 23.143H24.0465H26.0853C26.3876 24.864 27.8837 26.174 29.6899 26.174C31.4961 26.174 32.9922 24.864 33.2946 23.143H36.0698C36.5814 23.143 37 22.7244 37 22.2128V12.6004C36.9922 10.143 36.3023 8.08876 34.9845 6.67016ZM1.86047 2.68566H23.1163V5.53837V21.2903H11.6822C11.1783 19.8795 9.82171 18.864 8.24031 18.864C6.65892 18.864 5.30233 19.8795 4.79845 21.2903H1.86047V2.68566ZM8.24031 24.3136C7.24806 24.3136 6.44186 23.5074 6.44186 22.5151C6.44186 21.5229 7.24806 20.7167 8.24031 20.7167C9.23256 20.7167 10.0388 21.5229 10.0388 22.5151C10.0388 23.5074 9.23256 24.3136 8.24031 24.3136ZM29.6899 24.3136C28.6977 24.3136 27.8915 23.5074 27.8915 22.5151C27.8915 21.5229 28.6977 20.7167 29.6899 20.7167C30.6822 20.7167 31.4884 21.5229 31.4884 22.5151C31.4884 23.5074 30.6822 24.3136 29.6899 24.3136ZM35.1318 21.2826H33.1318C32.6279 19.8717 31.2713 18.8562 29.6899 18.8562C28.1085 18.8562 26.7519 19.8717 26.2481 21.2826H24.9845V6.46861H30.062C33.1938 6.46861 35.1395 8.81744 35.1395 12.6004V21.2826H35.1318Z" fill="black"></path>
            </svg>
          </span>
          <h3 class="title is-size-5 mb-4">Free Shipping</h3>
          <p>From $45</p>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet mb-16 mb-0-desktop is-relative">
        <img class="ml-8 ml-52-desktop is-absolute is-block-desktop is-hidden-touch is-top-0 is-left-0" src="yofte-assets/elements/dots.svg" alt="">
        <div class="is-relative has-text-centered">
          <span class="mb-16 is-inline-flex has-background-white is-justify-content-center is-align-items-center is-rounded" style="width: 80px; height: 80px; border-radius: 50% !important;">
            <svg width="39" height="38" viewbox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path d="M33.7601 6.67776C30.3819 3.38616 25.8883 1.57227 21.1139 1.57227C16.2512 1.57227 11.7014 3.44089 8.30713 6.83414C7.93802 7.20161 7.94604 7.79581 8.32318 8.16329C8.70032 8.52294 9.31017 8.51512 9.68731 8.14765C12.7205 5.12188 16.7727 3.45653 21.1139 3.45653C29.9165 3.44871 37.0742 10.4228 37.0742 18.9998C37.0742 27.5767 29.9165 34.5508 21.1139 34.5508C12.3113 34.5508 5.15359 27.5767 5.15359 18.9998V18.8043L6.7424 20.3524C6.92696 20.5322 7.17571 20.626 7.42446 20.626C7.67322 20.626 7.91395 20.5322 8.10653 20.3524C8.48367 19.9849 8.48367 19.3907 8.10653 19.0232L4.88077 15.8724C4.50363 15.5049 3.89378 15.5049 3.51664 15.8724L0.282856 19.0232C-0.0942853 19.3907 -0.0942853 19.9849 0.282856 20.3524C0.467414 20.5322 0.716167 20.626 0.96492 20.626C1.21367 20.626 1.4544 20.5322 1.64698 20.3524L3.23579 18.8043V18.9998C3.23579 23.6518 5.09742 28.0302 8.47565 31.3218C11.8539 34.6134 16.3475 36.4273 21.1219 36.4273C25.8964 36.4273 30.39 34.6134 33.7682 31.3218C37.1464 28.0302 39 23.6518 39 18.9998C39 14.3477 37.1384 9.96937 33.7601 6.67776Z" fill="black"></path>
                <path d="M21.1143 8.86719C17.9848 8.86719 15.4411 11.3457 15.4411 14.3949V17.061H13.6758C13.1462 17.061 12.7129 17.4832 12.7129 17.9992V27.358C12.7129 27.874 13.1462 28.2962 13.6758 28.2962H28.5608C29.0904 28.2962 29.5238 27.874 29.5238 27.358V18.007C29.5238 17.491 29.0904 17.0688 28.5608 17.0688H26.7955V14.4027C26.7955 11.3535 24.2438 8.86719 21.1143 8.86719ZM17.367 14.4027C17.367 12.3855 19.0521 10.7515 21.1143 10.7515C23.1766 10.7515 24.8617 12.3933 24.8617 14.4027V17.0688H17.367V14.4027ZM27.5979 26.4198H14.6387V18.9375H27.5979V26.4198Z" fill="black"></path>
              </g>

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

Features from Pstls.

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

Features from Acros

Bulma

Acros

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-align-items-center mb-16">
      <div class="column is-7 mb-5 mb-0-tablet">
        <h2 class="title">The latest version of this excellent product is waiting to deploy</h2>
      </div>
      <div class="column">
        <div class="buttons"><a class="button is-success is-outlined ml-auto-tablet" href="#">Learn more</a></div>
      </div>
    </div>
    <div class="columns">
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/auth.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">Frequent authentication</h5>
        <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/users.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">List of regular users</h5>
        <p class="subtitle is-size-6">Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="column mb-6 mb-0-tablet">
        <img class="mb-8" src="acros-assets/icons/features/exchange.svg" alt="">
        <h5 class="mb-4 title is-size-5 has-text-weight-medium">Change of access</h5>

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

Features from Bendis

Bulma

Bendis

<section class="section py-24 has-background-light">
  <div class="container">
    <div class="columns is-multiline -mb-16">
      <div class="column is-6-tablet is-4-widescreen mb-16">
        <div class="is-flex has-mw-xs mx-auto">
          <div class="is-flex-shrink-0">
            <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 -0.0633545L0 18.6833L19 37.43L38 18.6833L19 -0.0633545ZM4.47782 18.6833L19 4.35477L25.1417 10.4146L22.9026 12.6239L19 8.77429L8.95708 18.6833L12.8582 22.5339L10.6191 24.7432L4.47782 18.6833ZM24.5665 18.6833L19 24.177L13.4349 18.6833L19 13.1924L24.5665 18.6833ZM12.8582 26.9525L15.0974 24.7432L19 28.5923L29.0444 18.6833L25.1417 14.8327L27.3809 12.6235L33.5222 18.6833L19 33.0119L12.8582 26.9525Z" fill="#3C74F9"></path>
            </svg>
          </div>
          <div class="ml-7">
            <h3 class="is-size-5 has-text-primary has-text-weight-bold is-uppercase mb-4">Spectacular team plan</h3>
            <p class="has-text-grey has-leading-6">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-6-tablet is-4-widescreen mb-16">
        <div class="is-flex has-mw-xs mx-auto">
          <div class="is-flex-shrink-0">
            <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.5832 0V3.13632C28.5869 3.92368 34.8332 10.612 34.8332 18.7467C34.8332 26.8799 28.5869 33.5678 20.5832 34.3551V37.4933C30.3354 36.6957 38 28.613 38 18.7467C38 8.87889 30.3354 0.799545 20.5832 0Z" fill="#3C74F9"></path>
              <path d="M17.4168 34.3551C9.4164 33.5678 3.16683 26.8799 3.16683 18.7467C3.16683 10.6125 9.4164 3.92368 17.4168 3.13632V0C7.6665 0.799545 0 8.87889 0 18.7467C0 28.613 7.6665 36.6957 17.4168 37.4933V34.3551Z" fill="#3C74F9"></path>
              <path d="M9.6425 17.1846C10.3968 12.7524 14.2932 9.37332 19 9.37332C23.7068 9.37332 27.6032 12.7524 28.3575 17.1846H31.5566C30.7776 11.0212 25.4605 6.24872 19 6.24872C12.5429 6.24872 7.2238 11.0212 6.4429 17.1846H9.6425Z" fill="#3C74F9"></path>
              <path d="M28.3575 20.3087C27.6032 24.739 23.7068 28.12 19 28.12C14.2932 28.12 10.3968 24.739 9.6425 20.3087H6.44337C7.2238 26.4722 12.5428 31.2446 19 31.2446C25.4605 31.2446 30.7776 26.4722 31.5571 20.3087H28.3575Z" fill="#3C74F9"></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

Features from Metis

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-centered is-vcentered">
      <div class="column is-6">
        <div class="p-6" style="position: relative;">
          <img class="is-relative is-radius is-fullwidth is-object-cover" style="height: auto; max-height: 600px; z-index: 10;" src="https://images.unsplash.com/photo-1484308129484-ff3063eea281?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1080&amp;h=1250&amp;q=80" alt="">
          <img class="is-hidden-mobile is-absolute is-top is-left" src="metis-assets/elements/blob-tear.svg" alt="">
          <img class="is-hidden-mobile is-absolute is-bottom is-right" src="metis-assets/elements/blob-tear.svg" alt="">
        </div>
      </div>
      <div class="column is-6 pl-6">
        <div class="mb-6">
          <span class="tag is-info is-rounded">Lorem ipsum</span>
          <h2 class="mt-4 title is-size-3">Key Features</h2>
        </div>
        <div class="is-flex mb-6">
          <div class="mr-4 has-text-primary">
            <svg class="image is-32x32" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
          </div>
          <div>
            <h3 class="title is-size-5 is-spaced mb-3">Easy to customize</h3>
            <p class="subtitle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis expedita animi.</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

Features from Cronos

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md-desktop">
          <span class="tag is-warning">Lorem ipsum</span>
          <h3 class="my-6 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="has-mw-sm-desktop subtitle">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-6-desktop">
        <div class="columns is-multiline">
          <div class="column is-12 is-6-desktop mb-10">
            <span>
              <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <h6 class="mt-8 mb-4 is-size-4">Change of access</h6>
            <p class="subtitle">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="column is-12 is-6-desktop mb-10">

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

Features from Plain

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop mb-5">
        <div class="is-flex">
          <span class="mr-4">
            <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>
          </span>
          <div>
            <h4 class="is-size-5 has-text-weight-bold mb-2">Security in saving</h4>
            <p class="has-text-grey-dark">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
          </div>
        </div>
      </div>
      <div class="column is-6 is-4-desktop mb-5">
        <div class="is-flex">
          <span class="mr-4">
            <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

Features from asitrastudio

Bulma

asitrastudio

<section class="section has-background-white-ter">
  <div class="container">
    <h1 class="title is-size-2-mobile is-size-1-tablet mb-20" style="letter-spacing: -0.04em;">Get started quickly</h1>
    <div class="px-12 px-32-widescreen pt-20 pt-10-desktop pb-10 has-background-dark" style="border-radius: 40px;">
      <div class="columns is-multiline is-vcentered">
        <div class="column is-6">
          <div class="has-mw-md has-mw-lg-desktop mx-auto">
            <h3 class="title has-text-white mb-6 is-size-3-mobile is-size-2-desktop" style="letter-spacing: -0.02em;">Althhorpe Street Leamigton Spa</h3>
            <p class="has-mw-sm is-size-6 has-text-grey mb-10">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <a class="button is-outlined is-rounded is-light" href="#">
              <span class="mr-2">Get consulation</span>
              <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="column is-6">
          <img class="is-block image is-fullwidth has-mw-lg mx-auto has-mw-none-desktop" src="asitrastudio-assets/features/double-photo.png" alt="">
        </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

Features from Vendia

Bulma

Vendia

<section class="section has-background-dark">
  <div class="container">
    <div class="mb-20 columns is-multiline">
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-md mx-auto px-10 pt-8 pb-12 is-flex is-flex-direction-column is-covered has-background-grey-darker" style="height: 100%">
          <h4 class="title is-size-3 has-text-white mb-3">
            <span class="is-block">100% Quality</span>
            <span>checked</span>
          </h4>
          <span class="has-text-grey-lighter has-text-weight-medium">Reliable</span>
          <div class="mt-auto pt-8 is-flex is-justify-content-end">
            <div class="is-inline-flex has-background-gradient-primary is-justify-content-center is-align-items-center is-rounded" style="width: 154px; height: 154px;">
              <svg width="56" height="64" viewbox="0 0 56 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M53.6668 15.9583L28.0002 3.125L2.3335 15.9583M53.6668 15.9583L28.0002 28.7917M53.6668 15.9583V48.0417L28.0002 60.875M28.0002 28.7917L2.3335 15.9583M28.0002 28.7917V60.875M2.3335 15.9583V48.0417L28.0002 60.875" stroke="black" stroke-width="4.5" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-md mx-auto px-10 pt-8 pb-12 is-flex is-flex-direction-column is-covered has-background-grey-darker" style="height: 100%">
          <h4 class="title is-size-3 has-text-white mb-3">
            <span class="is-block">Get Instant</span>
            <span>support all day.</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

164 Bulma features section allows you to describe the features of your product or company in a clear way. Various layouts of icons, graphics, headings and descriptions allow you to choose the perfect variant of Bulma features component.

On this subpage, you can browse the different Bulma features component themes that are available in our UI libraries. You will also find many other types of components that will follow a similar style. Each of these libraries has been developed by experienced designers along with our in-house development team.

Get access to all Bulma features components, code and our editor. Test the editor demo for free.

Try for Free →

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

Bulma Features Components

Framework

UI Library

Components

Features from Flaro

Get the code for 13,400+ components

Features from Zeus

Get the code for 13,400+ components

Features from Yofte

Get the code for 13,400+ components

Features from Pstls.

Get the code for 13,400+ components

Features from Acros

Get the code for 13,400+ components

Features from Bendis

Get the code for 13,400+ components

Features from Metis

Get the code for 13,400+ components

Features from Cronos

Get the code for 13,400+ components

Features from Plain

Get the code for 13,400+ components

Features from asitrastudio

Get the code for 13,400+ components

Features from Vendia

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