vcl-panel

Container element to group and highlight content.

Usage no npm install needed!

<script type="module">
  import vclPanel from 'https://cdn.skypack.dev/vcl-panel';
</script>

README

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.