Thumbnail

import { SfThumbnail } from '@storefront-ui/react';

export default function ThumbnailSizes() {
  return (
    <div className="flex items-center justify-around max-w-sm">
      <SfThumbnail size="sm" className="bg-primary-500 mr-2" />
      <SfThumbnail size="base" className="bg-primary-500 mr-2" />
      <SfThumbnail size="lg" className="bg-primary-500 mr-2" />
      <SfThumbnail size="xl" className="bg-primary-500" />
    </div>
  );
}

import { SfThumbnail } from '@storefront-ui/react';

export default function ThumbnailColor() {
  return <SfThumbnail className="bg-primary-500" />;
}

import { SfThumbnail } from '@storefront-ui/react';

export default function ThumbnailGradient() {
  return <SfThumbnail className="bg-gradient-to-tr from-[#4ADE80] to-[#A78BFA]" />;
}

import { SfThumbnail } from '@storefront-ui/react';

export default function ThumbnailImage() {
  return (
    <SfThumbnail size="xl">
      <img src="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/card.png" alt="Thumbnail avatar" />
    </SfThumbnail>
  );
}

import { SfThumbnail, SfIconFavorite } from '@storefront-ui/react';

export default function ThumbnailIcon() {
  return (
    <SfThumbnail size="xl" className="bg-gray-100 flex items-center justify-center">
      <SfIconFavorite />
    </SfThumbnail>
  );
}