Image Viewer

Displays images.

html

<figure class="iview">
  <div class="iview__frame" data-zoom="false">
    <svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="none" aria-hidden="true"><rect width="200" height="120" fill="#D9C8F0"/><circle cx="164" cy="26" r="14" fill="#E8A020"/><path d="M0 100l50-50 40 34 30-26 80 42Z" fill="#A8E6C1"/></svg>
  </div>
  <figcaption class="iview__bar" style="background:#241430;">
    <span class="iview__pos">Image 2 of 5</span>
    <span class="iview__alt">Team offsite photo</span>
  </figcaption>
</figure>
<style>
.iview { font: 12px/1.4 system-ui, sans-serif; color: #FAF7F2; width: 320px; margin: 0; border-radius: 10px; overflow: hidden; box-sizing: border-box; background: #24143008; }
.iview__frame { width: 100%; height: 160px; overflow: hidden; }
.iview__frame[data-zoom="true"] svg { transform: scale(1.4); }
.iview__frame svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
.iview__frame svg { transition: transform .15s; }
}
.iview__bar { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.iview__pos { font-weight: 700; }
.iview__alt { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

tailwind

<figure class="w-[320px] m-0 rounded-[10px] overflow-hidden box-border bg-[#24143008] font-sans text-xs text-[#FAF7F2] iview-tw">
  <div class="w-full h-40 overflow-hidden iview-tw-frame" data-zoom="false">
    <svg width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="none" aria-hidden="true"><rect width="200" height="120" fill="#D9C8F0"/><circle cx="164" cy="26" r="14" fill="#E8A020"/><path d="M0 100l50-50 40 34 30-26 80 42Z" fill="#A8E6C1"/></svg>
  </div>
  <figcaption class="flex justify-between gap-2.5 px-3 py-2" style="background:#241430">
    <span class="font-bold">Image 2 of 5</span>
    <span class="opacity-80 overflow-hidden text-ellipsis whitespace-nowrap">Team offsite photo</span>
  </figcaption>
</figure>
<style>
.iview-tw-frame svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
.iview-tw-frame svg { transition: transform .15s; }
}
.iview-tw-frame[data-zoom="true"] svg { transform: scale(1.4); }
</style>

react

export function ImageViewer({
  altText = "Team offsite photo",
  position = "2",
  zoomedIn = false,
  accent = "#241430",
}) {
  return (
    <figure style={{ font: "12px/1.4 system-ui, sans-serif", color: "#FAF7F2", width: 320, margin: 0, borderRadius: 10, overflow: "hidden", boxSizing: "border-box", background: "#24143008" }}>
      <div style={{ width: "100%", height: 160, overflow: "hidden" }}>
        <svg className="iv-svg" width="100%" height="100%" viewBox="0 0 200 120" preserveAspectRatio="none" aria-hidden="true" style={{ display: "block", transform: zoomedIn ? "scale(1.4)" : "none" }}>
          <rect width="200" height="120" fill="#D9C8F0" /><circle cx="164" cy="26" r="14" fill="#E8A020" /><path d="M0 100l50-50 40 34 30-26 80 42Z" fill="#A8E6C1" />
        </svg>
      </div>
      <figcaption style={{ display: "flex", justifyContent: "space-between", gap: 10, padding: "8px 12px", background: accent }}>
        <span style={{ fontWeight: 700 }}>Image {position} of 5</span>
        <span style={{ opacity: .8, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{altText}</span>
      </figcaption>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .iv-svg { transition: transform .15s; }
        }
      `}</style>
    </figure>
  );
}