Panel

npm install @vrembem/panel

@use "@vrembem/panel";

Options

Panel uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-panel-background

var(--vb-background)

--vb-panel-foreground

var(--vb-foreground)

--vb-panel-border

none

--vb-panel-sep-border

var(--vb-border)

--vb-panel-border-radius

var(--vb-border-radius)

--vb-panel-box-shadow

var(--vb-box-shadow-border)

--vb-panel-padding

1em

--vb-panel-gap

0.5em

--vb-panel-transition-timing-function

var(--vb-transition-timing-function)

--vb-panel-transition-duration

var(--vb-transition-duration)

--vb-panel-transition-property

outline, box-shadow, border-color

--vb-panel-title-color

var(--vb-foreground-strong)

--vb-panel-title-font-size

var(--vb-font-size-lg)

--vb-panel-title-font-weight

var(--vb-font-weight-semi-bold)

--vb-panel-title-line-height

inherit

--vb-panel-caret-color

currentcolor

Basic usage

Panel is a highly composable container component that comes with a variety of elements. The most basic implementation being panel and a panel__body element:

<div class="panel">
  <div class="panel__body">
    ...
  </div>
</div>

Elements

The panel component comes with a variety of elements to help fit a wide range of use cases and applications. You can mix and match these elements within the panel component as needed.

<div class="panel box-shadow-xl">
  <div class="panel__header">
    <h2 class="panel__title">...</h2>
    <button class="button">...</button>
  </div>
  <div class="panel__body">
    ...
  </div>
  <div class="panel__footer">
    ...
  </div>
</div>

Use box-shadow-[key] utilities to increase the elevation of a panel. This can be useful for modal dialogs or popovers.

Available Elements

• panel__container
  • panel__header
    • panel__title
  • panel__body
  • panel__footer

The panel__container element is an optional scrollable container that separates content scrolling from the panel's background and border styles, preventing overscroll visual issues.

Collapsable

It's also possible to create collapsable panels by using the <details> for the root .panel and <summary> for the panel__header element.

<details class="panel">
  <summary class="panel__header">
    <h2 class="panel__title">...</h2>
  </summary>
  <div class="panel__body">
    ...
  </div>
</details>

Focusable

There are cases where a panel needs to be focusable. For these instances, apply tabindex="0" to the panel element itself. Focus ring styles are applied to panels for the :focus-visible state.

<div class="panel" tabindex="0">
  ...
</div>