ListItem

import { component$ } from '@builder.io/qwik';
import { SfListItem } from 'qwik-storefront-ui';

export default component$(() => {
  return (
    <div class="flex flex-col max-w-sm gap-4">
      <SfListItem size="sm">
        <span class="break-words">Label</span>
      </SfListItem>
      <SfListItem>
        <span class="break-words">Label</span>
      </SfListItem>
      <SfListItem size="lg">
        <span class="break-words">Label</span>
      </SfListItem>
    </div>
  );
});

import { component$ } from '@builder.io/qwik';
import {
  SfCounter,
  SfIconChevronRight,
  SfIconTune,
  SfListItem,
} from 'qwik-storefront-ui';

export default component$(() => {
  return (
    <SfListItem class="max-w-sm" slotPrefix={true} slotSuffix={true}>
      <div q:slot="prefix">
        <SfIconTune />
      </div>
      <div class="break-words">
        Label
        <SfCounter class="ml-2">123</SfCounter>
      </div>
      <span class="text-xs break-words text-neutral-500">Secondary text</span>
      <div q:slot="suffix">
        <SfIconChevronRight />
      </div>
    </SfListItem>
  );
});

import { component$ } from '@builder.io/qwik';
import { SfListItem } from 'qwik-storefront-ui';

export default component$(() => {
  return (
    <SfListItem class="max-w-sm">
      <div class="break-words">Label</div>
      <span class="text-xs text-neutral-500 break-words truncate">
        This text is definitely too long to be displayed in one line in this
        component
      </span>
    </SfListItem>
  );
});