@vcl/panel v0.6.3
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.
There are two variants, a dialog variant optimized for modal dialogs and a card variant with a card like visual appearance.
Usage
The content of the body can be wrapped in a panel content (vclPanelContent
)
which adds padding.
A Panel with text and a table as content.
Dialog variant.
Card variant.
Classes
vclPanel
vclPanelHeader
vclPanelHeading
vclPanelTitle
vclPanelBody
vclPanelContent
vclPanelFooter
Modifiers
vclPanelCard
vclPanelDialog
Semantic coloring:
vclDanger
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.
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago