VCL panel

Container element to group and highlight content.

Features

A panel consisting a body, header and footer. All elements are optional. The panel body may for example hold textual content, tables, dividers etc.

A card variant is an alternative visual appearance.

Usage

The content of the body can be wrapped in a panel content (vclPanelContent) which adds padding.

basic example

A Panel with text and a table as content.

table example

Card variant.

card example

Classes

• vclPanel
• vclPanelHeader
• vclPanelHeading
• vclPanelTitle
• vclPanelBody
• vclPanelContent
• vclPanelFooter

Modifiers

• vclPanelCard

Variables

• --panel-bg-color
• --panel-hf-line-height
• --panel-border-color
• --panel-header-color
• --panel-header-bg-color
• --panel-footer-color
• --panel-footer-bg-color
• --panel-border-radius--card

Demo

example.html on GH-pages.