Modal

<div>
<div>
  <button class="gi-btn gi-btn-primary gi-btn-regular">Open Modal</button>
</div>
<div class="gi-modal gi-modal-close">
  <div class="gi-modal-container">
    <span
      role="presentation"
      class="material-symbols-outlined gi-block gi-text-[32px] gi-modal-icon"
    >
      close
    </span>
    <div>
      <h2 class="gi-heading-lg">Title</h2>
      <p class="gi-paragraph-md">
        Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlours married own feeling. Marry fruit do spite jokes a times. Whether at it unknown warrant herself winding if.
      </p>
      <div class="gi-flex gi-gap-3 gi-justify-between">
        <button class="gi-btn gi-btn-primary gi-btn-regular">
          Primary Action
        </button>
        <button class="gi-btn gi-btn-secondary gi-btn-regular">
          Cancel Action
        </button>
      </div>
    </div>
  </div>
</div>
</div>

{{ govieModal({
  "html": "<div><h2>Title of the Modal</h2><p>Content of the modal</p></div>",
  "triggerButton": "<button>Open Modal</button>"
}) }}

import { Modal } from '@govie-ds/react';

<Modal triggerButton={<Button>Open Modal</Button>}>
  <Heading>Title</Heading>
  <Paragraph>
    {" "}
    Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlours married own feeling. Marry fruit do spite jokes a times. Whether at it unknown warrant herself winding if.
  </Paragraph>
  <div className="gi-flex gi-gap-3 gi-justify-between">
    <Button>Primary action</Button>
    <Button variant="secondary">Cancel action</Button>
  </div>
</Modal>;