<template>
  <div class="grid grid-cols-2 gap-4">
    <div>
      <AisCard no-body header="Card with flush list group">
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>

        <AisCardBody>
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim
          exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit
          ipsum anim Lorem.
        </AisCardBody>

      </AisCard>
    </div>

    <div>
      <AisCard header="Card with list group">
        <AisListGroup>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>

        <div class="mt-4">
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim
          exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit
          ipsum anim Lorem.
        </div>

      </AisCard>
    </div>
  </div>
</template>

<script setup>
  import AisListGroup from "@/components/list-group/AisListGroup.vue";
  import AisListGroupItem from "@/components/list-group/AisListGroupItem.vue";
  import AisCard from "@/components/card/AisCard.vue";
  import AisCardBody from "@/components/card/AisCardBody.vue";
</script>

<script>
export default {
  name: "AisListGroupCard"
}
</script>