Block Component
The block component allows you to place a colored block with text in it. Optionally, you can give it a background image as well.
| Name | Type | Description | Default |
|---|---|---|---|
| color | String | Background color | $slidev-theme-primary |
| color-opacity | Number | Opacity of the background color | 0.75 if image else 1 |
| image | String | Background image (can be local file or URL) | |
| image-opacity | Number | Opacity of the background image | 1 |
| image-filter | String | CSS filter for the image | |
| image-transform | String | CSS transform for the image |
Default
|
|
---
layout: stack
content-class: gap-8
---
# Block
::content::
<Block>
This is a block.
Don't forget to have an empty line
between _html-like content_ and **markdown**!
</Block>
<Block
color="var(--kul-orange-400)"
class="rounded-4 p-5 text-left"
>
This is another block.
It has another color and some UnoCSS styling.
</Block>
--- |
Image
|
|
---
layout: stack
content-class: gap-8
---
# Block
::content::
<Block
image="https://images.unsplash.com/..."
image-filter="blur(1px)"
color="var(--kul-orange-400)"
color-opacity="0.2"
class="rounded-3 px-10 py-35"
>
## This Block has an image
</Block>
--- |
