Row Layout

The row layout is a default variant with the row class applied to its ::content:: slot. Every direct child of the ::content:: slot is placed in its own row.

Compared to the stack layout, this layout uses a grid instead of flexbox. This means the size of the rows are equally distributed instead of being defined by the size of the children.

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 as (equal) rows 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 column 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: row --- # Slide Title ::content:: This layout places each child element in a separate row. <IconEavise height="100%" /> By default, all rows have the same width. ---

Row Span

row-span

---
layout: row
---

# Slide Title
::content::

This layout places each child element in a separate row.

<Block
  color="var(--kul-blue-400)"
  class="h-full w-full flex items-center justify-center row-span-2"
>

Adding the `row-span-X` class makes it so that element takes X rows.

</Block>

---