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 |