Panel

Panel wrappers for heading, tabs, items, and icon slots.

Bulma Pattern

This wrapper follows Bulma's Components markup. Compare class behavior with the official Bulma docs.

Supported tags

Example

<panel primary>
  <panel-heading>Repository</panel-heading>
  <panel-tabs>
    <a class="is-active">All</a>
    <a>Open</a>
    <a>Closed</a>
  </panel-tabs>
  <panel-block active>
    <panel-icon><i class="fas fa-book" aria-hidden="true"></i></panel-icon>
    ralma
  </panel-block>
  <panel-block href="/issues">
    <panel-icon><i class="fas fa-bug" aria-hidden="true"></i></panel-icon>
    Issues
  </panel-block>
</panel>

Usage Notes

Color variants map directly to Bulma panel modifiers.
`<panel-block>` supports active and safe href rendering.
`<panel-icon>` wraps icon slots with the expected class.

Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.