You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version
Documentation
Everything you need to create a website with Bulma
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:
controlinputbuttonpanel-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>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!