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%)`

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

Panel

Variables #

Support Bulma

The official Bulma book! 😲