--- title: Panel layout: documentation doc-tab: components doc-subtab: panel breadcrumb: - home - documentation - components - components-panel meta: colors: true sizes: false variables: true --- {% capture panel_example %} {% endcapture %} {% capture panel_colors_example %} {% for color in site.data.colors.justColors %}

{{ color | capitalize }}

All Public Private Sources Forks

bulma marksheet minireset.css jgthms.github.io
{% endfor %} {% endcapture %}

The panel is a container for several types:

The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside.

{% include elements/snippet.html content=panel_example more=true %} {% include elements/anchor.html name="Colors" %} {% include elements/new-tag.html version="0.8.0" %}

The panel component is available in all the different colors defined by the $colors Sass map. Simply append one of the color modifiers.

For example, to use your primary color, use "panel is-primary" as a class.

{% include elements/snippet.html content=panel_colors_example more=true %} {% include elements/variables.html type='component' %}