Panel

wu-panel is a flat bordered region for grouped settings or data. The card is the raised surface; the panel has no shadow and a tinted header.

Class or variable	Effect
`wu-panel`	Root. Border, medium radius, surface background
`wu-panel-header`	Part. Alternate background, title and actions in a row
`wu-panel-title`	Part. Panel heading
`wu-panel-body`	Part. Main content
`wu-panel-footer`	Part. Actions at the end, with a line above
`--wu-panel--Padding`	Inline padding of header and footer, padding of the body

Header, body and footer

Notifications

Email for mentions and weekly summaries.

<section class="wu-panel" aria-labelledby="panel-title">
  <header class="wu-panel-header">
    <h3 class="wu-panel-title" id="panel-title">Notifications</h3>
    <button class="wu-btn sm" type="button">Edit</button>
  </header>
  <div class="wu-panel-body">Email for mentions and weekly summaries.</div>
  <footer class="wu-panel-footer">
    <button class="wu-btn sm" type="button">Reset</button>
    <button class="wu-btn brand sm" type="button">Save</button>
  </footer>
</section>

Body only

A panel with only a body.

<div class="wu-panel">
  <div class="wu-panel-body">A panel with only a body.</div>
</div>

Padding

Roomy

More space inside.

<div class="wu-panel" style="--wu-panel--Padding: var(--wu-space-6)">
  <div class="wu-panel-header"><h3 class="wu-panel-title">Roomy</h3></div>
  <div class="wu-panel-body">More space inside.</div>
</div>

Right to left

The title sits at the right, and the footer buttons line up at the left.

الإشعارات

بريد إلكتروني عند الإشارة إليك.

<section class="wu-panel" aria-label="الإشعارات">
  <header class="wu-panel-header">
    <h3 class="wu-panel-title">الإشعارات</h3>
    <button class="wu-btn sm" type="button">تعديل</button>
  </header>
  <div class="wu-panel-body">بريد إلكتروني عند الإشارة إليك.</div>
  <footer class="wu-panel-footer">
    <button class="wu-btn brand sm" type="button">حفظ</button>
  </footer>
</section>

Load only the panel

@use "@wovenui/components/panel";

The panel needs no other component.