You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version

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-icons-left">
          <input class="input is-small" type="text" placeholder="Search">
          <span class="icon is-small is-left">
            <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 Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!