Documentation

Everything you need to create a website with Bulma

Panel

A composable panel, for compact controls


The panel is container for several types:

  • panel-heading as the first child
  • panel-tabs for navigation
  • panel-block which can contain other elements, like:
    • control
    • input
    • button
    • panel-icon

The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside.

<nav class="panel">
  <p class="panel-heading">
    Repositories
  </p>
  <div class="panel-block">
    <p class="control has-icon">
      <input class="input is-small" type="text" placeholder="Search">
      <span class="icon is-small">
        <i class="fa fa-search"></i>
      </span>
    </p>
  </div>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fa fa-book"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fa fa-book"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fa fa-book"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fa fa-book"></i>
    </span>
    jgthms.github.io
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fa fa-code-fork"></i>
    </span>
    daniellowtw/infBoard
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fa fa-code-fork"></i>
    </span>
    mojs
  </a>
  <label class="panel-block">
    <input type="checkbox">
    Remember me
  </label>
  <div class="panel-block">
    <button class="button is-primary is-outlined is-fullwidth">
      Reset all filters
    </button>
  </div>
</nav>

Bulma Newsletter

Get notified when v1 is ready!