Item

import { Button } from "~/components/ui/base/button";
import { Item } from "~/components/ui/base/item";

<Item.Root variant="outline">
  <Item.Content>
    <Item.Title>Basic item</Item.Title>
    <Item.Description>A short description under the title.</Item.Description>
  </Item.Content>
  <Item.Actions>
    <Button variant="secondary" size="sm">Action</Button>
  </Item.Actions>
</Item.Root>

import { Item } from "~/components/ui/base/item";

<div class="flex max-w-md flex-col gap-4">
  <Item.Root>
    <Item.Content>
      <Item.Title>Default</Item.Title>
      <Item.Description>No border, transparent background.</Item.Description>
    </Item.Content>
  </Item.Root>
  <Item.Root variant="outline">
    <Item.Content>
      <Item.Title>Outline</Item.Title>
      <Item.Description>Border and a raised surface.</Item.Description>
    </Item.Content>
  </Item.Root>
  <Item.Root variant="muted">
    <Item.Content>
      <Item.Title>Muted</Item.Title>
      <Item.Description>Secondary background from tokens.</Item.Description>
    </Item.Content>
  </Item.Root>
</div>

import { LuBadgeCheck } from "@qwikest/icons/lucide";
import { Item } from "~/components/ui/base/item";

<Item.Root variant="outline" size="sm" as="a" href="#" class="no-underline text-inherit">
  <Item.Media variant="icon">
    <LuBadgeCheck aria-hidden="true" />
  </Item.Media>
  <Item.Content>
    <Item.Title>Profile verified</Item.Title>
  </Item.Content>
  <Item.Actions>
    <span class="text-tertiary-label" aria-hidden="true">›</span>
  </Item.Actions>
</Item.Root>

import { Item } from "~/components/ui/base/item";

<Item.Group class="max-w-md">
  <Item.Root variant="outline">
    <Item.Content><Item.Title>First</Item.Title></Item.Content>
  </Item.Root>
  <Item.Separator />
  <Item.Root variant="outline">
    <Item.Content><Item.Title>Second</Item.Title></Item.Content>
  </Item.Root>
</Item.Group>