You are viewing the deprecated 0.5.2 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

Colors No
Sizes No
Variables Yes

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>

### Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$panel-item-border` | `1px solid $border`
`$panel-heading-background-color` | `$background`
`$panel-heading-color` | `$text-strong`
`$panel-heading-line-height` | `1.25`
`$panel-heading-padding` | `0.5em 0.75em`
`$panel-heading-radius` | `$radius`
`$panel-heading-size` | `1.25em`
`$panel-heading-weight` | `$weight-light`
`$panel-tab-border-bottom` | `1px solid $border`
`$panel-tab-active-border-bottom-color` | `$link-active-border`
`$panel-tab-active-color` | `$link-active`
`$panel-list-item-color` | `$text`
`$panel-list-item-hover-color` | `$link`
`$panel-block-color` | `$text-strong`
`$panel-block-hover-background-color` | `$background`
`$panel-block-active-border-left-color` | `$link`
`$panel-block-active-color` | `$link-active`
`$panel-block-active-icon-color` | `$link`
`$panel-icon-color` | `$text-light`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!