Cluster Layout
The cluster layout is a default variant with the cluster class applied to its ::content:: slot.
It places the ::content:: in an MxN grid.
| 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 |
|
| columns | Number | Number of columns to create | 1 |
| rows | Number | Number of rows to create | automatically computed |
The elements inside of the content slot get placed in a CSS grid. Check out our slots guide for more information about the inner workings of this slot.
HINT
You can easily override the basic cluster styles by providing UnoCSS classes to thecontent-classargument.
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).
Default
|
|
---
layout: cluster
columns: 3
content-class: text-center
---
# Slide Title
::content::
This layout constructs an NxM grid.
The `columns` argument should be set in most cases.
The `rows` argument will be computed automatically.
paragraph 4
paragraph 5
--- |
Specific Rows
|
|
---
layout: cluster
columns: 3
rows: 3
content-class: text-center
---
# Slide Title
::content::
You can optionally specify the number of rows,
so that even empty rows get created.
paragraph 2
paragraph 3
paragraph 4
--- |
Column & Row Placement
|
|
---
layout: cluster
columns: 3
rows: 2
content-class: text-center p-14 gap-5
---
# Slide Title
::content::
<Block class="w-full h-full stack col-start-2">
You can place items in the grid
with `col-start-X` and `row-start-X`
</Block>
<Block class="w-full h-full stack row-span-2">
`row-span-X` and `col-span-X` can be used
to have elements that cover multiple rows or columns
</Block>
<Block class="w-full h-full stack col-span-2">
This block has `col-span-2`
and is placed in the last possible position
</Block>
--- |
