Gitt One Pages
Open menu

ImageCardItem

apps/www/src/components/ImageCardItem.astro · 32 lines · group Misc

Used by

No site uses it, neither now nor in the content repos’ history.

Samples 1

synthetic sample — no site uses this componentshown inside <ImageCardSection>

Gallery

Photos with a caption and an optional link

Terminals

Terminals

Payment terminals in the field

Cash register

Cash register

Connected to a control unit

Model A

Model A

Product shot, not cropped

MDX of this sample
<ImageCardSection title="Gallery" description="Photos with a caption and an optional link">
  <ImageCardItem title="Terminals" imageName="terminals.jpg" description="Payment terminals in the field" cover />
  <ImageCardItem title="Cash register" imageName="cash_reg.jpg" description="Connected to a control unit" linkPath="/models/" cover />
  <ImageCardItem title="Model A" imageName="red.jpg" description="Product shot, not cropped" />
</ImageCardSection>

Props

NameTypeRequiredDefaultDescription
titlestringyes
imageNamestringyes
descriptionstring
linkPathstring
coverbooleanfalsephotos look better cropped to the card; product shots do not

Source apps/www/src/components/ImageCardItem.astro @ gitt.one

---
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';

interface Props {
  title: string;
  imageName: string;
  description?: string;
  linkPath?: string;
  /** photos look better cropped to the card; product shots do not */
  cover?: boolean;
}

const { title, imageName, description, linkPath, cover = false } = Astro.props;
const image = await resolveImage(imageName);
const Tag = linkPath ? 'a' : 'div';
---

<Tag href={linkPath} class="group block text-center">
  <Image
    src={image}
    alt={title}
    widths={[400, 800]}
    class:list={["mx-auto h-48 w-full rounded-lg", cover ? "object-cover" : "object-contain"]}
  />
  {/* a caption, not a heading: cards sit inside a section that owns the heading */}
  <p class="mt-4 text-lg font-medium text-gray-900 group-hover:text-primary-700">
    {title}
  </p>
  {description && <p class="mt-2 text-base text-gray-500">{description}</p>}
</Tag>

Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.