Bulma - panel
is a container for several types such as panel-heading
,panel-tabs
,panel-block
,control
,input
,button
& panel-icon
.
Panel component descriptions:
panel-heading
- It is a first child element of the panel.panel-tabs
- It is used to make panel navigation.panel-block
- It might contains other elements such as:
control
, input
, button
, panel-icon
Panel block might contain an anchor tag <a>
or label <label>
with a checkbox inside.
General Syntax
<nav class="panel">
<element class="panel-heading"></element>
<element class="block"></element>
<element class="panel-tabs"></element>
</nav>
Source Code
<nav class="panel">
<p class="panel-heading">Learn Web Development</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" placeholder="Search" />
<span class="icon 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>Web Design</a>
<a>Graphics Design</a>
<a>App Design</a>
<a>App Development</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
Web Design
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
Graphics Design
</a>
</nav>
Source Code : Output