<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem>
      <div class="flex w-100 justify-between">
        <h5 class="mb-1 text-xl leading-normal">List group item heading</h5>
        <small>3 days ago</small>
      </div>

      <p class="mb-1 mt-1 text-base">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
      </p>

      <small>Donec id elit non mi porta.</small>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex w-100 justify-between">
        <h5 class="mb-1 text-xl leading-normal">List group item heading</h5>
        <small>3 days ago</small>
      </div>

      <p class="mb-1 mt-1 text-base">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
      </p>

      <small>Donec id elit non mi porta.</small>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex w-100 justify-between">
        <h5 class="mb-1 text-xl leading-normal">List group item heading</h5>
        <small>3 days ago</small>
      </div>

      <p class="mb-1 mt-1 text-base">
        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
      </p>

      <small>Donec id elit non mi porta.</small>
    </AisListGroupItem>
  </AisListGroup>
</template>

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

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