variants.md

Variants props

For examples, consider the use props on the evokit-box block.

Single value

// input:
<Box box-padding='xl' />

// output:
<div class='ek-box ek-box_padding_xl' />

Multi values

// input:
<Box box-padding='s m l xl' />

// output:
<div class='ek-box ek-box_padding-top_s ek-box_padding-right_m ek-box_padding-bottom_l ek-box_padding-left_xl' />

Array of values

// input:
<Box box-padding={['s', 'xl']} />

// output:
<div class='ek-box ek-box_padding_s ek-box_padding_xl' />

Object of values

// input:
<Box box-padding={{ s: true, xl: false }} />

// output:
<div class='ek-box ek-box_padding_s' />

Live demo