The kit provides customisable widgets to enhance your content. Just include the widget in your markdown and give it some options.
use
Wrap any markdown content around 2 p html tags. The opening tag defines the widget, as a data-attribute, and the closing tag use the data-end attribute.
<pdata-card></p># Some title
And some **bold** text inside a `card` widget !
<pdata-end></p>
Some title
And some bold text inside a card widget !
configure
You can configure widgets via html data-attributes and first level attributes like class & style. For exemple, the card widget let you quick set a background color via the data-bg attribute:
<pdata-carddata-bg="var(--contrast)"class="text-white py-5"></p>
padded *white* text in a `contrast` background card
<pdata-end></p>
padded white text in a contrast background card
dataset
Some widgets takes a predefined dataset as an argument, that you can pass via:
You can debounce by passing a a delay in the data-debounce="700" attribute.
switch
`color` = <span>~color</span><pdata-switchdata-bind="~color"></p>- red
- blue
<pdata-end></p>
color = ~color
red
blue
select
`color` = <span>~color</span><pdata-selectdata-bind="~color"></p>- red
- blue
- purple
<pdata-end></p>
color = ~color
red
blue
purple
Multi select by adding multiple prop to the widget:
`colors` = <span>~colors</span><pdata-selectdata-bind="~colors"multipleplaceholder="Pick color"></p>- red
- blue
- purple
<pdata-end></p>
colors = ~colors
red
blue
purple
section
Sections are meant to be used with layout.fluid, and takes 100% of the width wiewport. You can wrap any markdown into a section:
<pdata-sectionclass="gradient-bg text-white"></p># Basic section
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<pdata-end></p>
Basic section
Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
background
You can use the following classes:
primary-bg
secondary-bg
gradient-bg
You can also specify the background color in the data-bg prop:
<pdata-sectiondata-bg="red"class="text-white"></p>
red section
<pdata-end></p>
red section
diagonal
class="diagonal v1 primary-bg text-white"
class="diagonal v2 primary-bg text-white"
angle
class="angle v1 primary-bg text-white"
class="angle v2 primary-bg text-white"
class="angle v3 primary-bg text-white"
class="angle v4 primary-bg text-white"
waves
class="waves primary-bg text-white"
spikes
class="spikes primary-bg text-white"
card
basic
<pdata-card></p># my title
I'm **bold text** inside a `card` widget.
<pdata-end></p>
my title
I'm bold text inside a card widget.
style
You can style a card by using the class & style attribute.
