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="fas fa-search" aria-hidden="true"></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="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-fork" aria-hidden="true"></i>
    </span>
    daniellowtw/infboard
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-fork" aria-hidden="true"></i>
    </span>
    mojs
  </a>
  <label class="panel-block">
    <input type="checkbox">
    remember me
  </label>
  <div class="panel-block">
    <button class="button is-link 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