Bulma Components in Metis library

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

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

Bulma Component #2

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="#sideMenuHeaders02" aria-controls="sideMenuHeaders02" 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

Bulma Component #3

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="#sideMenuHeaders03" aria-controls="sideMenuHeaders03" 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

Bulma Component #4

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="#sideMenuHeaders04" aria-controls="sideMenuHeaders04" 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

Bulma Component #5

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="#sideMenuHeaders05" aria-controls="sideMenuHeaders05" 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

Bulma Component #6

Bulma

Metis

<section class="is-relative" style="overflow: hidden;">
  <div class="is-hidden-mobile is-absolute is-top is-left is-right is-bottom has-background-white-bis column is-6 ml-auto"></div>
  <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="#sideMenuHeaders06" aria-controls="sideMenuHeaders06" 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"><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>

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

Bulma

Metis

<section>
  <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="#sideMenuHeaders07" aria-controls="sideMenuHeaders07" 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

Bulma Component #8

Bulma

Metis

<section class="is-relative" style="overflow: hidden;">
  <div class="is-hidden-mobile column is-3" style="position: absolute; top: 0; left: 0; margin-top: 250px; margin-left: -40px;">
    <img style="max-height: 350px;" src="metis-assets/illustrations/walk-dog.png" alt="">
  </div>
  <div class="is-hidden-mobile column is-3" style="position: absolute; top: 0; right: 0; margin-top: 220px; margin-right: -130px;">
    <img style="max-height: 350px;" src="metis-assets/illustrations/phone-online-shopping.png" alt="">
  </div>
  <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="#sideMenuHeaders08" aria-controls="sideMenuHeaders08" 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>

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

Bulma

Metis

<section>
  <div class="is-background-cover is-background-no-repeat mb-6" style="background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=450&amp;q=80&amp;blend=1e293b&amp;sat=30&amp;blend-mode=multiply'); 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-light-name.svg" alt="" width="auto" style="min-height: 40px;">
          </a>
          <a class="navbar-burger" role="button" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders09" aria-controls="sideMenuHeaders09" 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 has-text-light" href="#">Product</a><a class="navbar-item has-text-light" href="#">Company</a><a class="navbar-item has-text-light" href="#">About Us</a><a class="navbar-item has-text-light" href="#">Features</a></div>
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons"><a class="button is-light is-outlined" href="#">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
            </div>
          </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 #10

Bulma

Metis

<section>
  <div class="is-background-cover is-background-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=450&amp;q=80&amp;blend=1e293b&amp;sat=30&amp;blend-mode=multiply'); 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-light-name.svg" alt="" width="auto" style="min-height: 40px;">
          </a>
          <a class="navbar-burger" role="button" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders10" aria-controls="sideMenuHeaders10" 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 has-text-light" href="#">Product</a><a class="navbar-item has-text-light" href="#">Company</a><a class="navbar-item has-text-light" href="#">About Us</a><a class="navbar-item has-text-light" href="#">Features</a></div>
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons"><a class="button is-light is-outlined" href="#">Log In</a><a class="button is-primary" href="#">Sign Up</a></div>
            </div>
          </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 #11

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-3-desktop">
        <span class="tag is-info is-rounded">Our Team</span>
        <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="column is-6-desktop is-offset-1">
        <div class="p-3 columns is-multiline is-mobile">
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Anne Bailey</h3>
            <p class="subtitle">CEO</p>
          </div>
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Julie Brown</h3>
            <p class="subtitle">Head of Development</p>
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #12

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="box">
      <div class="table-container">
        <table class="table is-fullwidth is-striped">
          <thead>
            <tr><th>Package</th><th>Feature 1</th><th>Feature 2</th><th>Feature 3</th><th>Feature 4</th><th>Feature 5</th></tr>
          </thead>
          <tbody>
            <tr>
              <td class="py-4">Example for Package 1</td>
              <td class="py-4">
                <svg class="image is-24x24 has-text-danger" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </td>
              <td class="py-4">
                <svg class="image is-24x24 has-text-danger" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </td>
              <td class="py-4">
                <svg class="image is-24x24 has-text-danger" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></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

Bulma Component #13

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered is-vcentered">
      <div class="mb-6 column is-12 is-4-desktop">
        <div>
          <h2 class="title is-spaced">Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.</h2>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.</p>
          <a class="button is-primary" href="#">Learn More</a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop is-offset-1-desktop">
        <ul>
          <li class="mb-6 is-flex">
            <div class="pr-5">
              <span class="is-flex is-align-items-center is-justify-content-center is-64x64 is-size-4 has-text-primary is-rounded has-background-link-light has-text-weight-bold">1</span>
            </div>
            <div class="mt-3">
              <h3 class="title is-size-5 is-spaced mb-3">Key Elements</h3>
              <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </li>
          <li class="mb-6 is-flex">
            <div class="pr-5">
              <span class="is-flex is-align-items-center is-justify-content-center is-64x64 is-size-4 has-text-primary is-rounded has-background-link-light has-text-weight-bold">2</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #14

Bulma

Metis

<section class="section">
  <div class="container">
    <h2 class="title">Our Blog</h2>
    <div class="columns is-multiline is-desktop">
      <div class="column is-4-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet.</a></h3>
        <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="column is-8-desktop mb-5">
        <a href="#">
          <img class="image is-fullwidth is-radius is-object-cover is-h-80" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div class="mt-4">
          <a href="#">CATEGORY</a>
          <span class="has-text-grey">24 Jan, 2020</span>
        </div>
        <h3 class="mt-4 mb-4 title is-size-4 is-spaced"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h3>

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

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

Bulma Component #16

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="is-max-w-md mx-auto mb-6 has-text-centered">
      <span class="tag is-info is-rounded">Lorem ipsum</span>
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="columns">
      <div class="column is-6">
        <div class="columns is-multiline is-mobile">
          <div class="column is-6 pt-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pt-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pb-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="column is-6 pb-0" style="height: 256px;">
            <img class="is-radius" style="object-fit: cover; height: 100%;" src="https://images.unsplash.com/photo-1602883440931-c268da6122b0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #17

Bulma

Metis

<section class="section is-background-contain is-background-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <img class="is-fullwidth is-max-w-sm mb-5" src="metis-assets/illustrations/hardworking-man.png" alt="">
      <form action="#">
        <div class="is-max-w-2xl mx-auto">
          <div class="field has-addons">
            <div class="control is-expanded">
              <input class="input" placeholder="Search, find any question you want to ask...">
            </div>
            <div class="control">
              <button class="button is-primary">
                <svg class="image is-16x16" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="columns is-multiline mb-6">
      <div class="column is-3-widescreen is-6-desktop is-12-touch">
        <div class="card card-content content has-background-white">

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

Bulma

Metis

<section class="is-relative is-flex is-flex-direction-row-reverse is-justify-content-center">
  <div class="is-hidden-touch is-flex is-align-items-center is-justify-content-center is-w-half-desktop has-background-primary">
    <div class="is-fullwidth is-max-w-lg">
      <img class="is-fullwidth" src="metis-assets/illustrations/walk-dog.png" alt="">
    </div>
  </div>
  <div class="section pt-5 pb-6 is-fullwidth is-w-half-desktop">
    <div>
      <div class="mb-6 is-flex is-justify-content-space-between">
        <a href="#">
          <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
        <a class="button is-primary is-outlined" href="#">Sign Up</a>
      </div>
      <div>
        <span class="subtitle is-spaced">Sign In</span>
        <h4 class="title is-size-3">Join our community</h4>
        <div class="mb-5">
          <div class="field">
            <div class="control has-icons-right">
              <input class="input" type="email" placeholder="name@email.com">
              <span class="icon is-small is-right">
                <svg class="image is-24x24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></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

Bulma Component #19

Bulma

Metis

<section class="section" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="is-max-w-md mx-auto mb-6 has-text-centered">
      <img src="metis-assets/icons/quote.svg" alt="">
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded is-object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div>
              <h3 class="title is-size-5">John Bailey</h3>
              <p class="subtitle has-text-info">CEO</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded is-object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Component #20

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-6 is-3-desktop">
        <div class="is-flex">
          <div class="mr-4 has-background-light p-5 is-radius">
            <svg class="image is-32x32 has-text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <div>
            <span class="is-size-4 has-text-weight-bold">250 324</span>
            <p class="subtitle">Followers</p>
          </div>
        </div>
      </div>
      <div class="column is-6 is-3-desktop">
        <div class="is-flex">
          <div class="mr-4 has-background-light p-5 is-radius">
            <svg class="image is-32x32 has-text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path>
            </svg>
          </div>
          <div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bulma Components by Shuffle

Browse 114 of ready-made components in Bulma and Metis library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop 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 Components – Metis Library

Framework

UI Library

Components

Bulma Component #1

Get the code for 13,400+ components

Bulma Component #2

Get the code for 13,400+ components

Bulma Component #3

Get the code for 13,400+ components

Bulma Component #4

Get the code for 13,400+ components

Bulma Component #5

Get the code for 13,400+ components

Bulma Component #6

Get the code for 13,400+ components

Bulma Component #7

Get the code for 13,400+ components

Bulma Component #8

Get the code for 13,400+ components

Bulma Component #9

Get the code for 13,400+ components

Bulma Component #10

Get the code for 13,400+ components

Bulma Component #11

Get the code for 13,400+ components

Bulma Component #12

Get the code for 13,400+ components

Bulma Component #13

Get the code for 13,400+ components

Bulma Component #14

Get the code for 13,400+ components

Bulma Component #15

Get the code for 13,400+ components

Bulma Component #16

Get the code for 13,400+ components

Bulma Component #17

Get the code for 13,400+ components

Bulma Component #18

Get the code for 13,400+ components

Bulma Component #19

Get the code for 13,400+ components

Bulma Component #20

Get the code for 13,400+ components

Bulma Components by Shuffle

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