--- layout: documentation doc-tab: components doc-subtab: panel variables: - name: $panel-item-border value: 1px solid $border - name: $panel-heading-background-color value: $background - name: $panel-heading-color value: $text-strong - name: $panel-heading-line-height value: 1.25 - name: $panel-heading-padding value: 0.5em 0.75em - name: $panel-heading-radius value: $radius - name: $panel-heading-size value: 1.25em - name: $panel-heading-weight value: $weight-light - name: $panel-tab-border-bottom value: 1px solid $border - name: $panel-tab-active-border-bottom-color value: $link-active-border - name: $panel-tab-active-color value: $link-active - name: $panel-list-item-color value: $text - name: $panel-list-item-hover-color value: $link - name: $panel-block-color value: $text-strong - name: $panel-block-hover-background-color value: $background - name: $panel-block-active-border-left-color value: $link - name: $panel-block-active-color value: $link-active - name: $panel-block-active-icon-color value: $link - name: $panel-icon-color value: $text-light --- {% capture panel_example %} {% endcapture %} {% include subnav-components.html %}

Panel

A composable panel, for compact controls

{% include meta.html colors=false sizes=false variables=true %}

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.

{{panel_example}}
{% highlight html %}{{panel_example}}{% endhighlight %}
{% include variables.html %}