Pile
The Pile layout stacks elements on top of each other in the same grid area, creating a layered depth effect. This component places all children in the same grid cell, making it perfect for overlays, layered content, background/foreground compositions, or creating visual depth in your designs.
Example
<div class="pile --center">
<img src="background.jpg" alt="Background image" />
<div class="overlay">Overlay content</div>
<h2>Foreground text</h2>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-items |
center |
Controls positioning of stacked items |
Class Utilities
| Class | Description |
|---|---|
.--start, .--end, .--center, .--stretch |
Controls the positioning of stacked items within the pile |