布局

Band 章节壳

薄章节壳 pvs-band：垂直 padding + 背景语义色；厚成品块归 PivUI。

默认章节壳

章节标题

pvs-band 提供统一章节上下留白。

<section class="pvs-band pvs-band--muted">
  <div class="pvs-container">
    <h2 class="pvs-h3 pvs-m-0">章节标题</h2>
    <p class="pvs-text-muted pvs-m-0 pvs-mt-2">pvs-band 提供统一章节上下留白。</p>
  </div>
</section>

背景变体

--surface

--primary 反白字

--tight 更窄 padding

<div class="pvs-stack pvs-gap-2">
  <section class="pvs-band pvs-band--surface pvs-border">
    <div class="pvs-container pvs-py-2">
      <code>--surface</code>
    </div>
  </section>
  <section class="pvs-band pvs-band--primary">
    <div class="pvs-container pvs-py-2">--primary 反白字</div>
  </section>
  <section class="pvs-band pvs-band--tight pvs-band--muted">
    <div class="pvs-container pvs-py-2">
      <code>--tight</code> 更窄 padding</div>
      </section>
    </div>

内层壳 pvs-inner

全宽浅底内容区（文档阅读区、表单页底）。

pvs-inner

<div class="pvs-inner pvs-p-6 pvs-text-center pvs-text-muted" style="min-height:6rem">
  <code>pvs-inner</code>
</div>

多章节叠放

主色 Hero 区

浅灰正文区

默认白底区

<div class="pvs-stack pvs-gap-0">
  <section class="pvs-band pvs-band--primary">
    <div class="pvs-container pvs-py-4">
      <p class="pvs-m-0">主色 Hero 区</p>
    </div>
  </section>
  <section class="pvs-band pvs-band--muted">
    <div class="pvs-container pvs-py-4">
      <p class="pvs-m-0 pvs-text-muted">浅灰正文区</p>
    </div>
  </section>
  <section class="pvs-band">
    <div class="pvs-container pvs-py-4">
      <p class="pvs-m-0">默认白底区</p>
    </div>
  </section>
</div>

紧凑章节

pvs-band--tight 减小 --pvs-band-py

<section class="pvs-band pvs-band--tight pvs-band--surface pvs-border">
  <div class="pvs-container">
    <code>pvs-band--tight</code> 减小 --pvs-band-py</div>
    </section>

类名速查

类	样式
`pvs-band`	章节壳 · padding-block: --pvs-band-py
`pvs-band--surface`	卡片底
`pvs-band--muted`	浅灰底
`pvs-band--primary`	主色底 + 白字
`pvs-band--tight`	更窄垂直留白
`pvs-inner`	浅底内容区 min-height