Cover

Usage

Cover is a flex column with a minimum block size (often full viewport height). Use up to three block-level regions:

1. slot="top" — top band (optional)
2. Default slot — main; grows to fill space between top and bottom and centers its content vertically
3. slot="bottom" — bottom band (optional)

Omit top or bottom siblings when you do not need them; the main region still expands correctly. Omit the default slot entirely when you only need top and bottom bands—the main wrapper still grows to push the bottom band to the lower edge.

<duo-cover gap="m" min-height="100vh">
  <nav slot="top">…</nav>
  <main>
    <h1>Title</h1>
    <p>Subtitle</p>
  </main>
  <div slot="bottom">…</div>
</duo-cover>

Top and bottom only (no centered main content):

<duo-cover gap="m" min-height="100vh">
  <header slot="top">…</header>
  <footer slot="bottom">…</footer>
</duo-cover>

Do

• Put primary content in the default slot (main, section, div, etc.).
• Mark optional edge bands with slot="top" and slot="bottom" so two-child layouts stay unambiguous.
• Use gap for space between regions; use spacing for outer padding (like duo-box; defaults to gap when omitted).
• Use min-height (default 100vh) on sparse full-viewport layouts.

Don’t

• Don’t use Cover for ordinary vertical lists—use duo-stack.
• Don’t rely on child order alone without slots—always mark slot="top" and slot="bottom" on edge bands.
• Don’t add a fourth vertical band—use duo-stack inside a region instead.

Props

Slots