Stack

  {{ govieStack({
    "direction": "column",
    "itemsAlignment": "start",
    "itemsDistribution": "start",
    "gap": 2,
    "hasDivider": false,
    "wrap": false,
    "fixedHeight": "300px",
    "children": [
      "<div class="gi-bg-gray-300 gi-p-2 gi-h-[50px] gi-w-[100px] gi-flex gi-items-center gi-justify-center">Item 1</div>",
      "<div class="gi-bg-gray-300 gi-p-2 gi-h-[50px] gi-w-[100px] gi-flex gi-items-center gi-justify-center">Item 2</div>",
      "<div class="gi-bg-gray-300 gi-p-2 gi-h-[50px] gi-w-[100px] gi-flex gi-items-center gi-justify-center">Item 3</div>"
    ]
  }) }}

  import { Stack } from "@govie-ds/stack";

  <Stack
      direction={{ base: 'column', md: 'row' }}
      itemsAlignment="center"
      itemsDistribution="center"
      gap={{ base: 5, md: 3 }}
      fixedHeight="200px"
      >
      <div className="gi-bg-gray-300 gi-p-2">Item 1</div>
      <div className="gi-bg-gray-300 gi-p-2">Item 2</div>
      <div className="gi-bg-gray-300 gi-p-2">Item 3</div>
  </Stack>;