Source

Pancake

The Pancake layout creates a three-layer layout pattern where the middle layer fills available space, commonly used for header/content/footer structures. This component uses CSS Grid to create a full-height layout with auto-sized header and footer sections while the content area expands to fill the remaining vertical space.

Example

<div class="pancake --gap-2" style="min-height: 100vh;">
  <header>Header content</header>
  <main>Main content that fills available space</main>
  <footer>Footer content</footer>
</div>

Custom Properties

Property	Default	Description
`--layout-gap`	`0`	Gap between the three layers

Class Utilities

Class	Description
`.--gap-*`	Controls spacing between layers using Feo.css design tokens for size

← layout: Grid layout: Pile →