Live Storybook

Horiz

Two cols Open in playground
Item 1
Item 2 
<.horiz>
  <:item class="bg-bd-green-200">Item 1</:item>
  <:item class="bg-bd-blue-200">Item 2</:item>
</.horiz>
Three cols Open in playground
Item 1
Item 2
Item 3 
<.horiz>
  <:item class="bg-bd-green-200">Item 1</:item>
  <:item class="bg-bd-blue-200">Item 2</:item>
  <:item class="bg-bd-yellow-200">Item 3</:item>
</.horiz>
Span two Open in playground
Item 1
Item 2 
<.horiz>
  <:item span="2" class="bg-bd-green-200">Item 1</:item>
  <:item class="bg-bd-yellow-200">Item 2</:item>
</.horiz>
Items and spans Open in playground
1
2
3
4
1 
<.horiz>
  <:item class="bg-bd-green-200">1</:item>
  <:item span="2" class="bg-bd-yellow-200">2</:item>
  <:item span="3" class="bg-bd-green-200">3</:item>
  <:item span="4" class="bg-bd-yellow-200">4</:item>
  <:item class="bg-bd-green-200">1</:item>
</.horiz>
Flex Open in playground
item 1
and another item 
<.horiz class="bg-bd-gray-200" flex>
  <:item class="bg-bd-green-200">item 1</:item>
  <:item class="bg-bd-yellow-200">and another item</:item>
</.horiz>
Flex with paddings Open in playground
item 1
and another item 
<.horiz class="bg-bd-gray-400 gap-2 p-2" flex>
  <:item class="bg-bd-green-200 p-2">item 1</:item>
  <:item class="bg-bd-yellow-200 p-2">and another item</:item>
</.horiz>
Flex with grow Open in playground
item 1
and another item 
<.horiz class="bg-bd-gray-400 gap-2 p-2 w-full" flex>
  <:item class="bg-bd-green-200 p-2 grow">item 1</:item>
  <:item class="bg-bd-yellow-200 p-2">and another item</:item>
</.horiz>