<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="sans">
        <AisBadge font="sans" size="lg">Sans</AisBadge>
      </Example>
      <Example label="serif">
        <AisBadge font="serif" size="lg">Serif</AisBadge>
      </Example>
      <Example label="caps">
        <AisBadge font="caps" size="lg">Caps</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import Example from "@/components/docs/ComponentExample.vue";
import AisBadge from "@/components/badge/AisBadge.vue";


</script>