Pile Layout

The pile layout is a default variant with the pile class applied to its ::content:: slot.

This layout centers all of the elements (inside ::content::) in the middle of the slide, on top of each other. When designing this layout, we had two different use cases in mind:

Create multiple versions of an image or diagram, where you show a different part in each version. You can then use this layout and add all of the images inside of a v-clicks in the ::content:: slot. This will allow you to explain a diagram step by step, by uncovering a new part on each click.
Add a paragraph or other piece of content, together with one or more small image decorations. All your items will be centered on the page, which allows you to more easily position the decorations using CSS translations.

Of course, half the fun is to come up with your own ways of using this layout!

Arguments

Name	Type	Description	Default
color	String	Which color to setup as `slidev-theme-primary` for that slide	kul-blue-600
content-class	String	CSS classes to add to the `::content::` slot wrapper div

Slots

`::content::`

The elements inside of the content slot get centered in the white area of the slide with a grid. Check out our slots guide for more information about the inner workings of this slot.

HINT
You can easily override the basic pile styles by providing UnoCSS classes to the content-class argument.

`::footer::`

This slot allows you to add some text in the footer (next to the eavise icon). By default the text is slightly smaller and colored similarly to the rest of the footer, though it is easily overridable by providing your own styles for :deep(.slot-footer).

Examples

Quote Decoration

pile-quote

---
layout: pile
---

# Slide Title
::content::

If you can't explain it simply, you don't understand it well enough.  
_Albert Einstein_

<img
  alt="quotes"
  src="https://cdn.iconscout.com/icon/free/png-256/free-quote-17-444934.png"
/>

<style>
  :deep(.slot-content) { @apply text-center; }

  img {
    translate: -400px -40px;
    z-index: -1;
    filter: brightness(3.2);
  }
</style>
---

SVG Uncover

This example contains clicks and is probably better viewed in the demo presentation.

pile-svg

---
layout: pile
---

# Pile
::content::

<v-clicks>

<svg width="320" height="100">
  <rect
    x="0" y="0" width="100" height="100"
    style="fill: var(--kul-blue-500)"
  />
</svg>

<svg width="320" height="100">
  <rect
    x="110" y="0" width="100" height="100"
    style="fill: var(--kul-blue-600)"
  />
</svg>

<svg width="320" height="100">
  <rect
    x="220" y="0" width="100" height="100"
    style="fill: var(--kul-blue-700)"
  />
</svg>

</v-clicks>

---