TrustItem

apps/www/src/components/TrustItem.astro · 18 lines · group Logos & partners

Used by

Live sites: codeexpert.se.

Samples 1

codeexpert.se/shown inside <TrustSection>

TRUSTED BY

GodaGrannen
Emotian
Elfster
Wally
Pinpointer
Dvigex
MDX of this sample
<TrustSection title="TRUSTED BY">
  <TrustItem imageName="godagrannen.png" description="GodaGrannen" />
  <TrustItem imageName="emotian.png" description="Emotian" />
  <TrustItem imageName="elfster.png" description="Elfster" />
  <TrustItem imageName="wally.png" description="Wally" />
  <TrustItem imageName="pinpointer.png" description="Pinpointer" />
  <TrustItem imageName="dvigex.png" description="Dvigex" />
</TrustSection>

Props

NameTypeRequiredDefaultDescription
imageNamestringyes
descriptionstringyes

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

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

interface Props {
  imageName: string;
  description: string;
}
const { imageName, description } = Astro.props;
const image = await resolveImage(imageName);
---

<!-- reserve the row height so lazy logos cannot shift the layout -->
<div class="relative col-span-1 flex h-12 items-center justify-center">
  <!-- logos render at max 48px tall; ship 1x/2x of that, not the source size -->
  <Image src={image} alt={description} height={48} densities={[1, 2]} class="max-h-12 w-auto" />
</div>

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.