Panel

<section class="panel">
  <div class="panel-head">
    <div>
      <h2 class="panel-title">Applications</h2>
      <p class="panel-sub">Track status and next actions.</p>
    </div>
  </div>
  <div class="glass-focus-surface nested-surface" tabindex="0" role="group" aria-label="Card">
    <p class="msg">Content</p>
  </div>
</section>

import { Panel, PanelHead, PanelTitle, PanelSub, GlassFocusSurface, NestedSurface } from 'caustica-design/core'
import 'caustica-design/css'

<Panel>
  <PanelHead>
    <div>
      <PanelTitle>Applications</PanelTitle>
      <PanelSub>Track status and next actions.</PanelSub>
    </div>
  </PanelHead>
  <GlassFocusSurface className="nested-surface" tabIndex={0} role="group" aria-label="Card">
    <p className="msg">Content</p>
  </GlassFocusSurface>
</Panel>