Skip to content

Cover

Full-viewport hero layout (min-height: 100dvh, centered content).

Class reference

Class	Purpose	Example
`af-cover`	Full-viewport hero	`<section class="af-cover">`

Example

<section class="af-cover af-bg-primary">
  <div class="af-stack af-gap-lg af-center">
    <h1 class="af-text-fluid-h1 af-text-on-primary">Hero</h1>
    <p class="af-text-on-primary-muted">Centered full-viewport layout</p>
  </div>
</section>

For dashboard chrome (nav + main), use App shell instead of Cover.