Stack Layout

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

Compared to the column and row layouts, this layout uses a flexbox instead of grid. This means the size of the rows/columns are defined by the size of the children instead of being equally distributed.

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 placed in the white area of the slide with a flexbox. Check out our slots guide for more information about the inner workings of this slot.

HINT
You can easily override the basic stack 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

Default

	--- layout: stack --- # Slide Title ::content:: Each element of the content slot gets stacked with a flexbox. 1. ABC 2. DEF By default the content is centered on the page. ---

Justify Start

stack-justify-start

---
layout: stack
content-class: justify-start gap-8
---

# Slide Title
::content::

Each element of the content slot gets stacked with a flexbox.

1. ABC
2. DEF

We put the content at the top
and added a gap between each element.

---

Justify Between

stack-justify-between

---
layout: stack
content-class: justify-between py-15
---

# Slide Title
::content::

Each element of the content slot gets stacked with a flexbox.

1. ABC
2. DEF

We added vertical padding
and spread out the elements in the remaining space.

---

Flexible Columns

stack-columns

---
layout: stack
content-class: flex-row px-15 gap-10
---

# Slide Title
::content::

Each element of the content slot gets stacked with a flexbox.

We changed the orientation,
added horizontal padding
and a gap between the elements.

---