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-branch" aria-hidden="true"></i>
    </span>
    daniellowtw/infboard
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-branch" 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 Type Default value Computed value
Name Type Default value Computed value
$panel-item-border size 1px solid $border
$panel-heading-background-color color $background hsl(0, 0%, 96%)
$panel-heading-color color $text-strong hsl(0, 0%, 21%)
$panel-heading-line-height unitless 1.25
$panel-heading-padding size 0.5em 0.75em
$panel-heading-radius size $radius 4px
$panel-heading-size size 1.25em
$panel-heading-weight font-weight $weight-light 300
$panel-tab-border-bottom size 1px solid $border
$panel-tab-active-border-bottom-color color $link-active-border hsl(0, 0%, 29%)
$panel-tab-active-color color $link-active hsl(0, 0%, 21%)
$panel-list-item-color color $text hsl(0, 0%, 29%)
$panel-list-item-hover-color color $link hsl(217, 71%, 53%)
$panel-block-color color $text-strong hsl(0, 0%, 21%)
$panel-block-hover-background-color color $background hsl(0, 0%, 96%)
$panel-block-active-border-left-color color $link hsl(217, 71%, 53%)
$panel-block-active-color color $link-active hsl(0, 0%, 21%)
$panel-block-active-icon-color color $link hsl(217, 71%, 53%)
$panel-icon-color color $text-light hsl(0, 0%, 48%)

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!