Panel | Buval

Panel

A composable panel, for compact controls

The panel is a 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" 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>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>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-code-branch" aria-hidden="true"></i>
        </span>
        minireset.css
    </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>

Colors

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.

Primary

All Public Private Sources Forks

Buval alvis minireset.css

Link

All Public Private Sources Forks

Buval alvis minireset.css

Info

All Public Private Sources Forks

Buval alvis minireset.css

Success

All Public Private Sources Forks

Buval alvis minireset.css

Warning

All Public Private Sources Forks

Buval alvis minireset.css

Danger

All Public Private Sources Forks

Buval alvis minireset.css

<article class="panel is-primary">
    <p class="panel-heading">
        Primary
    </p>
    <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
        <a>Sources</a>
        <a>Forks</a>
    </p>
    <div class="panel-block">
        <p class="control has-icons-left">
            <input class="input is-primary" type="text" placeholder="Search">
            <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
            </span>
        </p>
    </div>
    <a class="panel-block is-active">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        minireset.css
    </a>
</article>

<article class="panel is-mix">
    <p class="panel-heading">
        Link
    </p>
    <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
        <a>Sources</a>
        <a>Forks</a>
    </p>
    <div class="panel-block">
        <p class="control has-icons-left">
            <input class="input is-mix" type="text" placeholder="Search">
            <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
            </span>
        </p>
    </div>
    <a class="panel-block is-active">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        minireset.css
    </a>
</article>

<article class="panel is-info">
    <p class="panel-heading">
        Info
    </p>
    <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
        <a>Sources</a>
        <a>Forks</a>
    </p>
    <div class="panel-block">
        <p class="control has-icons-left">
            <input class="input is-info" type="text" placeholder="Search">
            <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
            </span>
        </p>
    </div>
    <a class="panel-block is-active">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        minireset.css
    </a>
</article>

<article class="panel is-success">
    <p class="panel-heading">
        Success
    </p>
    <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
        <a>Sources</a>
        <a>Forks</a>
    </p>
    <div class="panel-block">
        <p class="control has-icons-left">
            <input class="input is-success" type="text" placeholder="Search">
            <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
            </span>
        </p>
    </div>
    <a class="panel-block is-active">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        minireset.css
    </a>
</article>

<article class="panel is-warning">
    <p class="panel-heading">
        Warning
    </p>
    <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
        <a>Sources</a>
        <a>Forks</a>
    </p>
    <div class="panel-block">
        <p class="control has-icons-left">
            <input class="input is-warning" type="text" placeholder="Search">
            <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
            </span>
        </p>
    </div>
    <a class="panel-block is-active">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        minireset.css
    </a>
</article>

<article class="panel is-danger">
    <p class="panel-heading">
        Danger
    </p>
    <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
        <a>Sources</a>
        <a>Forks</a>
    </p>
    <div class="panel-block">
        <p class="control has-icons-left">
            <input class="input is-danger" type="text" placeholder="Search">
            <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
            </span>
        </p>
    </div>
    <a class="panel-block is-active">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        Buval
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        alvis
    </a>
    <a class="panel-block">
        <span class="panel-icon">
            <i class="fas fa-book" aria-hidden="true"></i>
        </span>
        minireset.css
    </a>
</article>

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$panel-margin`	size	`$block-spacing`
`$panel-item-border`	size	`1px solid $border-light`
`$panel-radius`	size	`$radius-large`
`$panel-shadow`	size	`0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
`$panel-heading-background-color`	color	`$border-light`
`$panel-heading-color`	color	`$text-strong`
`$panel-heading-line-height`	unitless	`1.25`
`$panel-heading-padding`	size	`0.75em 1em`
`$panel-heading-radius`	size	`$radius`
`$panel-heading-size`	size	`1.25em`
`$panel-heading-weight`	font-weight	`$weight-bold`
`$panel-tabs-font-size`	size	`0.875em`
`$panel-tab-border-bottom`	size	`1px solid $border`
`$panel-tab-active-border-bottom-color`	color	`$link-active-border`
`$panel-tab-active-color`	color	`$link-active`
`$panel-list-item-color`	color	`$text`
`$panel-list-item-hover-color`	color	`$link`
`$panel-block-color`	color	`$text-strong`
`$panel-block-hover-background-color`	color	`$background`
`$panel-block-active-border-left-color`	color	`$link`
`$panel-block-active-color`	color	`$link-active`
`$panel-block-active-icon-color`	color	`$link`
`$panel-icon-color`	color	`$text-light`
`$panel-colors`	function	`$colors`