Column Layout
The column layout is a default variant with the column class applied to its ::content:: slot.
Every direct child of the ::content:: slot is placed in its own column.
| 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 |
The elements inside of the content slot get placed as (equal) columns 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 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: column
---
# Slide Title
::content::
<div class="bg-$kul-blue-200 text-white w-full text-center">
Every child is a separate column.
</div>
<LogoEavise />
--- |
Column Span
|
|
---
layout: column
content-class: text-center px-5
---
# Slide Title
::content::
This layout places each child element in a separate column.
By default, all columns have the same width.
You can make an element wider by applying the `col-span-x` class.
<style>
p:last-child { @apply col-span-2; }
</style>
--- |
