Bulma Hero section Components (93)

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

Hero section from Flaro

Bulma

Flaro

<section class="has-background-light" x-data="{ mobileNavOpen: false }">
    <nav class="navbar py-8 is-light mb-24">
        <div class="container mx-auto px-8">
            <div class="navbar-brand">
                <a class="navbar-item" href="#">
                    <img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 32px;">
                  </a>
                  <button class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </button>
            </div>
            <div class="navbar-menu">
                <div class="navbar-end">
                    <ul class="navbar-item">
                        <li><a class="navbar-item" href="#">Features</a></li>
                        <li><a class="navbar-item" href="#">Solutions</a></li>
                        <li><a class="navbar-item" href="#">Resources</a></li>
                        <li><a class="navbar-item" href="#">Pricing</a></li>
                    </ul>
                    <div class="navbar-item is-hidden-mobile"><a class="button is-link" href="#">Try 14 Days Free Trial</a></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

Hero section from Zeus

Bulma

Zeus

<div class="pb-20">
  <nav class="navbar py-5">
    <div class="container is-fluid">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="zeus-assets/logo/logo-zeus-red.svg" alt="" style="height: 28px;" width="auto">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <ul class="navbar-item">
            <li><a class="navbar-item" href="#">About</a></li>
            <li><a class="navbar-item" href="#">Company</a></li>
            <li><a class="navbar-item" href="#">Services</a></li>
            <li><a class="navbar-item" href="#">Testimonials</a></li>
          </ul>
          <div class="navbar-item is-hidden-mobile pl-0"><a class="button is-primary has-background-danger-light has-text-danger" href="#">Contact Us</a></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

Hero section from Yofte

Bulma

Yofte

<section class="is-relative has-background-light is-clipped">
  <nav class="navbar has-background-light" style="border-bottom: 1px solid #CFD5E2">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item is-size-4" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <a class="navbar-burger navbar-menu-open is-flex-touch is-align-items-center is-justify-content-center" role="button">
        <svg class="has-text-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="currentColor"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="currentColor"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
    <div class="navbar-menu ml-10 is-align-items-center">
      <div class="navbar-start" style="width: 100%;">
        <div class="mr-10 pl-8 pr-6 is-hidden-touch-only is-hidden-desktop-only is-hidden-widescreen-only is-flex-fullhd has-background-white is-align-items-center" style="border-radius: 6px;">
          <svg class="mr-2 is-flex-shrink-0" style="width: 24px; height: 18px;" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <input class="input mr-2 has-background-white" style="border: none; box-shadow: none;" type="text" placeholder="">
          <select class="pl-6 py-3 has-background-white" style="border: none; border-left: 1px solid #E8E8E8; box-shadow: none;" name="">
            <option>All items</option>

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

Hero section from Pstls.

Bulma

Pstls.

<section class="pt-0 pb-20 is-relative is-clipped">
  <nav class="navbar py-8">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
        </a>
        <div class="navbar-item ml-auto is-hidden-desktop">
          <button class="button is-ghost navbar-menu-open">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start ml-32"><a class="navbar-item is-size-5 has-text-weight-bold" aria-current="page" href="#">Home</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Products</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Resources</a><a class="navbar-item is-size-5 has-text-weight-bold" href="#">Pricing</a></div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons"><a class="button is-ghost has-text-dark has-text-weight-bold" href="#">Log In</a><a class="button is-dark" href="#">Sign Up</a></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

Hero section from Acros

Bulma

Acros

<div>
  <nav class="navbar py-1 has-background-white">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="navbar-item px-0 title is-size-4 has-text-dark">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="" width="auto" style="max-height: initial;">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <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 ml-auto mr-0">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </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

Hero section from Bendis

Bulma

Bendis

<div>
  <nav class="is-relative navbar py-2 has-background-primary">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item" href="#">
        <span class="navbar-item px-0 title is-size-5 has-text-dark">
          <img src="bendis-assets/logos/bendis-light.svg" alt="" style="max-height: initial;">
        </span>
      </a>
      <a class="navbar-menu-open navbar-burger is-hidden-desktop is-flex is-align-items-center is-justify-content-center" role="button" type="button" data-toggle="side-menu">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
      </a>
    </div>
    <div class="is-hidden-mobile is-hidden-tablet-only is-absolute" style="top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);">
      <ul class="navbar-item">
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">About</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Company</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Services</a></li>
        <li><a class="has-text-weight-semibold navbar-item has-text-white" href="#">Testimonials</a></li>
      </ul>
    </div>
    <div class="navbar-menu is-hidden-mobile">
      <div class="navbar-end"><a class="navbar-item has-text-white" href="#">Sign In</a><a class="navbar-item has-text-white" href="#">Support</a></div>
    </div>
  </nav>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section from Metis

Bulma

Metis

<section class="is-background-contain is-background-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-position: top;">
  <nav class="navbar is-relative is-transparent py-3" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="auto" style="min-height: 40px;">
        </a>
        <a class="navbar-burger" role="button" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-expanded="false" aria-label="Toggle navigation">
          <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 is-centered-absolute"><a class="navbar-item" href="#">Product</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">About Us</a><a class="navbar-item" href="#">Features</a></div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons"><a class="button is-primary is-outlined" href="#">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="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

Hero section from Cronos

Bulma

Cronos

<section class="has-background-warning-light">
  <nav class="navbar has-background-warning-light py-5 is-relative">
    <div class="container is-fluid">
      <div class="navbar-brand is-justify-content-space-between">
        <a class="navbar-item pl-0 title is-size-4 mb-0" href="#">
          <img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132">
        </a>
        <button class="button is-ghost is-hidden-desktop navbar-menu-open">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
          </svg>
        </button>
      </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-end is-block-desktop is-hidden-touch"><a class="button is-warning" href="#">Contact Us</a></div>
      </div>
    </div>
  </nav>
  <div class="section pt-0">
    <div class="container mt-8">
      <div class="mb-12 is-vcentered columns is-multiline is-align-items-center">
        <div class="column is-12 is-6-desktop mb-20 mb-0-desktop">
          <div class="has-mw-md-desktop">

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

Hero section from Plain

Bulma

Plain

<section class="section pt-0">
  <nav class="navbar py-4">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="bulma-plain-assets/logos/plainb-logo.svg" alt="" width="96px">
      </a>
      <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end"><a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a><a class="navbar-item" href="#">Testimonials</a></div>
      <div class="navbar-item"><a class="button is-primary" href="#">Contact Us</a></div>
    </div>
  </nav>
  <div class="container pt-5">
    <div class="mb-5 is-vcentered columns is-multiline">
      <div class="column is-12 is-5-desktop mb-5 mr-auto">
        <h2 class="mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Take care of your performance every day.</h2>
        <p class="subtitle has-text-grey mb-6">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
        <div class="buttons"><a class="button is-primary" href="#">Track your performance</a><a class="button" href="#">Learn more</a></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

Hero section from asitrastudio

Bulma

asitrastudio

<section class="has-background-white-ter is-relative is-clipped" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 has-background-white-ter is-light" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-end">
        <a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a>
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">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>

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

Hero section from Vendia

Bulma

Vendia

<section class="has-background-dark" x-data="{ mobileNavOpen: false }">
  <nav class="navbar is-dark is-relative py-3 has-background-dark">
    <div class="navbar-brand pr-4">
      <a class="navbar-item mr-16" href="#">
        <img class="image" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button navbar-menu-open navbar-burger is-ghost has-text-white p-0">
        <svg viewbox="0 0 100 45" width="26" height="20" fill="currentColor"><rect width="100" height="6"></rect><rect y="18" width="100" height="6"></rect><rect y="38" width="100" height="6"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
      <div class="navbar-start"><a class="navbar-item has-text-primary" href="#">Home</a><a class="navbar-item has-text-white" href="#">Shop</a><a class="navbar-item has-text-white" href="#">Product</a><a class="navbar-item has-text-white" href="#">Blog</a><a class="navbar-item has-text-white" href="#">Support</a></div>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item">
          <a class="is-inline-block" href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.5 0.5H2.16667L2.5 2.16667M3.83333 8.83333H12.1667L15.5 2.16667H2.5M3.83333 8.83333L2.5 2.16667M3.83333 8.83333L1.92259 10.7441C1.39762 11.269 1.76942 12.1667 2.51184 12.1667H12.1667M12.1667 12.1667C11.2462 12.1667 10.5 12.9129 10.5 13.8333C10.5 14.7538 11.2462 15.5 12.1667 15.5C13.0871 15.5 13.8333 14.7538 13.8333 13.8333C13.8333 12.9129 13.0871 12.1667 12.1667 12.1667ZM5.5 13.8333C5.5 14.7538 4.75381 15.5 3.83333 15.5C2.91286 15.5 2.16667 14.7538 2.16667 13.8333C2.16667 12.9129 2.91286 12.1667 3.83333 12.1667C4.75381 12.1667 5.5 12.9129 5.5 13.8333Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </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

The header is the section at the very top of the page. It is not just a navigation bar, which you will find in another category. Bulma header component is a combination of menu and layout of the first view available to the user. It is a critical section in the viewer's interaction with the page. It determines whether the user stays and explores its content or abandons the session. That is why in Shuffle components we pay great attention to aesthetics and visibility of key information.

Choose from many variations of Bulma headers. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Bulma headers, code and our editor. Try the 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 Hero section Components

Framework

UI Library

Components

Hero section from Flaro

Get the code for 13,400+ components

Hero section from Zeus

Get the code for 13,400+ components

Hero section from Yofte

Get the code for 13,400+ components

Hero section from Pstls.

Get the code for 13,400+ components

Hero section from Acros

Get the code for 13,400+ components

Hero section from Bendis

Get the code for 13,400+ components

Hero section from Metis

Get the code for 13,400+ components

Hero section from Cronos

Get the code for 13,400+ components

Hero section from Plain

Get the code for 13,400+ components

Hero section from asitrastudio

Get the code for 13,400+ components

Hero section 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