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

Bulma

Cronos

<section class="pb-64 has-background-light">
  <div class="pb-64 is-relative has-background-primary">
    <nav class="navbar is-primary 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 has-text-white" href="#">
            <img src="cronos-assets/logos/cronos-logo-white.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="white"></path>
            </svg>
          </button>
        </div>
        <div class="navbar-menu">
          <div class="navbar-end mr-4"><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="is-block-desktop is-hidden-touch"><a class="button is-dark" href="#">Request Demo</a></div>
        </div>
      </div>
    </nav>
    <div class="container pt-12 has-text-centered">
      <div class="has-mw-4xl mx-auto">
        <h1 class="has-text-white title is-size-1 is-spaced mb-2">
          Take care of your

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

Bulma

Cronos

<section class="has-background-primary" style="background-image: url('cronos-assets/elements/squares-background.svg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
  <nav class="navbar is-primary mb-10 mb-16-desktop py-5 is-relative" style="background-color: transparent !important;">
    <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 has-text-white" href="#">
          <img src="cronos-assets/logos/cronos-logo-white.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="white"></path>
          </svg>
        </button>
      </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 class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-white has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section pt-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto mb-20 mb-32-desktop has-text-centered">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1263

Bulma

Cronos

<section style="background: linear-gradient(#fff, #FEF8E8);">
  <nav class="navbar has-background-white mb-10 mb-16-desktop py-5 is-relative" style="background-color: transparent !important;">
    <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-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 class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section pt-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto mb-20 mb-32-desktop has-text-centered">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1264

Bulma

Cronos

<section class="has-background-warning-light">
  <nav class="navbar has-background-white mb-10 mb-16-desktop py-5 is-relative" style="background-color: transparent !important;">
    <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-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 class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section pt-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto mb-20 mb-32-desktop has-text-centered">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1265

Bulma

Cronos

<section class="pb-20 is-relative" style="background-image: url('https://images.unsplash.com/photo-1529260830199-42c24126f198?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80'); background-size: cover; background-repeat: no-repeat;">
  <div class="is-absolute is-inset-0 has-background-dark" style="opacity: 80%;"></div>
  <div class="is-relative">
    <nav class="navbar is-dark mb-10 mb-16-desktop py-5" style="background-color: transparent !important;">
      <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-white.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="white"></path>
            </svg>
          </button>
        </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 class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-white has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </nav>
    <div class="section py-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 #1266

Bulma

Cronos

<section class="pb-20">
  <nav class="navbar has-background-white mb-10 mb-16-desktop py-5 is-relative" style="background-color: transparent !important;">
    <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-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 class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto mb-20 mb-32-desktop has-text-centered">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1267

Bulma

Cronos

<section class="pb-20 has-background-light">
  <nav class="navbar has-background-light mb-10 mb-16-desktop py-5">
    <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-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 class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto mb-20 mb-32-desktop has-text-centered">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1268

Bulma

Cronos

<section class="mb-32-desktop pb-20 pb-10-desktop has-background-warning-light">
  <nav class="navbar has-background-white py-5" style="background-color: transparent !important;">
    <div class="container">
      <div class="navbar-brand is-flex is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-end">
          <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="#006251"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1269

Bulma

Cronos

<section class="mb-32-desktop pb-20 pb-10-desktop has-background-primary">
  <nav class="navbar is-dark py-5" style="background-color: transparent !important;">
    <div class="container">
      <div class="navbar-brand is-align-items-center is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" href="#">
          <img src="cronos-assets/logos/cronos-logo-white.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="white"></path>
          </svg>
        </button>
      </div>
      <div class="navbar-menu ml-4">
        <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="is-block-desktop is-hidden-touch navbar-end"><a class="button is-ghost has-text-light has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container pt-10-desktop">
      <div class="columns is-multiline">
        <div class="column is-12 is-6-desktop mb-10 pt-20-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

Bulma Component #1270

Bulma

Cronos

<section class="mb-32-desktop pb-20 pb-10-desktop has-background-warning-light">
  <nav class="navbar py-5 pb-12-desktop" style="background-color: transparent;">
    <div class="container">
      <div class="navbar-brand is-justify-content-space-between">
        <a class="navbar-item pl-0-desktop 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-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container">
      <div class="columns is-multiline">
        <div class="column is-12 is-6-desktop mb-10 pt-20-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

Bulma Component #1271

Bulma

Cronos

<section class="mb-32-desktop pb-20 pb-10-desktop has-background-primary">
  <nav class="navbar is-dark py-5" style="background-color: transparent !important;">
    <div class="container">
      <div class="navbar-brand is-flex is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" href="#">
          <img src="cronos-assets/logos/cronos-logo-white.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="white"></path>
          </svg>
        </button>
      </div>
      <div class="navbar-menu">
        <div class="navbar-end">
          <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="white"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1272

Bulma

Cronos

<section class="mb-32-desktop pb-20 pb-10-desktop has-background-light">
  <nav class="navbar py-5" style="background-color: transparent !important;">
    <div class="container">
      <div class="navbar-brand is-flex is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-end">
          <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="#006251"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1273

Bulma

Cronos

<section class="mb-32-desktop pb-20 pb-10-desktop has-background-light">
  <nav class="navbar py-5 pb-12-desktop" style="background-color: transparent;">
    <div class="container">
      <div class="navbar-brand is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="section pt-0">
    <div class="container">
      <div class="columns is-multiline">
        <div class="column is-12 is-6-desktop mb-10 pt-20-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

Bulma Component #1274

Bulma

Cronos

<section class="pb-32-desktop has-background-primary" style="background-image: url('cronos-assets/elements/squares-background.svg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
  <nav class="navbar is-dark py-5 mb-20" style="background-color: transparent !important;">
    <div class="container">
      <div class="navbar-brand is-align-items-center is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" href="#">
          <img src="cronos-assets/logos/cronos-logo-white.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="white"></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="is-block-desktop is-hidden-touch navbar-end"><a class="button is-ghost has-text-light has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto has-text-centered">
        <span class="has-text-light">Develop your skills</span>
        <h1 class="title is-size-1 has-text-white mt-2 mb-12">

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

Bulma

Cronos

<section class="pb-32-desktop has-background-primary" style="background-image: url('cronos-assets/elements/sign-background.svg'); background-repeat: no-repeat; background-size: cover; background-position-x: center;">
  <nav class="navbar is-dark py-5 mb-20" style="background-color: transparent !important;">
    <div class="container">
      <div class="navbar-brand is-align-items-center is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" href="#">
          <img src="cronos-assets/logos/cronos-logo-white.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="white"></path>
          </svg>
        </button>
      </div>
      <div class="navbar-menu ml-4">
        <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="is-block-desktop is-hidden-touch navbar-end"><a class="button is-ghost has-text-light has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="section py-0">
    <div class="container">
      <div class="has-mw-2xl mx-auto has-text-centered">
        <span class="has-text-light">Develop your skills</span>
        <h1 class="title is-size-1 has-text-white mt-2 mb-12">

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

Bulma

Cronos

<section class="pb-20 is-relative is-clipped has-background-warning-light">
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0 is-cover" src="cronos-assets/elements/sign-background-light.svg" alt="">
  <div class="column is-3 is-4-widescreen is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0 has-background-white"></div>
  <nav class="navbar has-background-white py-5 is-relative" style="background-color: transparent !important;">
    <div class="container is-fluid">
      <div class="navbar-brand d-flex is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-end">
          <a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a>
          <div class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section py-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 #1277

Bulma

Cronos

<section class="pb-20 is-relative is-clipped has-background-light">
  <img class="is-absolute is-block-desktop is-hidden-touch is-top-0 is-right-0 is-cover" src="cronos-assets/elements/sign-background-light.svg" alt="">
  <div class="column is-3 is-4-widescreen is-absolute is-block-desktop is-hidden-touch is-top-0 is-bottom-0 is-left-0 has-background-white"></div>
  <nav class="navbar has-background-white py-5 is-relative" style="background-color: transparent !important;">
    <div class="container is-fluid">
      <div class="navbar-brand d-flex is-justify-content-space-between">
        <a class="navbar-item title is-size-4 mb-0 pl-0-desktop" 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-end">
          <a class="navbar-item" href="#">About</a><a class="navbar-item" href="#">Company</a><a class="navbar-item" href="#">Services</a>
          <div class="is-hidden-touch navbar-item pr-0"><a class="button is-ghost has-text-dark has-text-weight-medium mr-2" href="#">Sign In</a><a class="button is-warning" href="#">Sign Up</a></div>
        </div>
      </div>
    </div>
  </nav>
  <div class="section py-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 #1278

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-3xl mx-auto mb-8 has-text-centered">
      <span class="tag is-warning is-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="has-mw-xl subtitle mx-auto mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="buttons mx-auto mb-16 is-centered">
        <button class="button is-ghost has-text-primary is-size-5 has-text-weight-bold">General</button>
        <button class="button is-ghost is-size-5 has-text-dark has-text-weight-bold">Payments</button>
        <button class="button is-ghost is-size-5 has-text-dark has-text-weight-bold">Returns</button>
        <button class="button is-ghost is-size-5 has-text-dark has-text-weight-bold">Refunds</button>
      </div>
      <div class="has-mw-3xl mx-auto has-text-left">
        <ul>
          <li class="mb-8 px-6 pb-4">
            <a class="is-medium pl-0 is-ghost has-text-dark is-flex is-justify-content-space-between is-align-items-center is-fullwidth" href="#">
              <h6 class="title is-4">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h6>
              <svg class="is-flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.17461 3.87962C7.38428 4.05933 7.69993 4.03505 7.87964 3.82539C8.05935 3.61572 8.03507 3.30007 7.8254 3.12036L4.3254 0.120363C4.13816 -0.040133 3.86186 -0.040133 3.67461 0.120363L0.174613 3.12036C-0.0350495 3.30007 -0.0593303 3.61572 0.120381 3.82539C0.300092 4.03505 0.615742 4.05933 0.825405 3.87962L4.00001 1.15853L7.17461 3.87962Z" fill="#001410"></path>
              </svg>
            </a>
            <p class="subtitle mt-6">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.</p>
          </li>
          <li class="mb-8 px-6 pb-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1279

Bulma

Cronos

<nav class="navbar has-background-white py-5">
  <div class="navbar-brand mx-auto">
    <a class="navbar-item mx-auto title is-size-4 px-0" href="#">
      <img class="image is-fullwidth" src="cronos-assets/logos/cronos-logo.svg" alt="alt" width="132">
    </a>
  </div>
</nav>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #1280

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="has-mw-xl mx-auto mb-12 has-text-centered">
      <span class="tag is-warning is-light">Lorem ipsum</span>
      <h2 class="my-6 title is-size-2 is-spaced">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="subtitle 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><a class="px-8 pb-4 has-text-dark has-text-weight-bold" style="border-bottom: 2px solid #006251" href="#">Monthly</a><a class="px-8 pb-4" href="#">Yearly</a></div>
    </div>
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-4-desktop mb-5 mb-0-desktop">
        <div class="p-6 has-mw-xl mx-auto has-text-centered has-background-light">
          <h6 class="mb-4 is-size-4 has-text-weight-bold">Starter</h6>
          <h2 class="title is-size-2 has-text-primary is-spaced mb-6">$34,99</h2>
          <ul class="mb-6">
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="has-text-grey-dark mb-0">Complete documentation</p>
            </li>
            <li class="mb-2 is-flex is-align-items-center">
              <svg class="has-text-primary mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" 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

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

Get the code for 13,400+ components

Bulma Component #1262

Get the code for 13,400+ components

Bulma Component #1263

Get the code for 13,400+ components

Bulma Component #1264

Get the code for 13,400+ components

Bulma Component #1265

Get the code for 13,400+ components

Bulma Component #1266

Get the code for 13,400+ components

Bulma Component #1267

Get the code for 13,400+ components

Bulma Component #1268

Get the code for 13,400+ components

Bulma Component #1269

Get the code for 13,400+ components

Bulma Component #1270

Get the code for 13,400+ components

Bulma Component #1271

Get the code for 13,400+ components

Bulma Component #1272

Get the code for 13,400+ components

Bulma Component #1273

Get the code for 13,400+ components

Bulma Component #1274

Get the code for 13,400+ components

Bulma Component #1275

Get the code for 13,400+ components

Bulma Component #1276

Get the code for 13,400+ components

Bulma Component #1277

Get the code for 13,400+ components

Bulma Component #1278

Get the code for 13,400+ components

Bulma Component #1279

Get the code for 13,400+ components

Bulma Component #1280

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