The 4 files this component needs and nothing else, each fenced with the path it belongs at, followed by what the library's own verification covered and what it did not. No instructions attached — for placing it yourself, or handing it to something that has its own.
Read it first
Install kit: "Photo feature trio"
Library page: https://astro.baysixmedia.com/components/photo-feature-trio/
Files: 4 required, 1 supporting
Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.
===== FILE (required): src/components/PhotoFeatureTrio.astro =====
---
/**
* PhotoFeatureTrio
*
* A pale band with an outlined eyebrow on the left and a big uppercase
* heading on the right, over three white cards. Each card has a two-line
* uppercase title, a round orange icon in its corner and a landscape photo
* filling the bottom.
*
* Heading words rise in one by one and the cards lift in, staggered, the first
* time they scroll into view.
*
* Heading syntax: wrap the orange words in asterisks.
*
* Reads the --tw-* tokens from any ancestor, with fallbacks.
*/
export type PhotoFeatureIcon = "box" | "shield" | "route" | "clock" | "truck" | "globe";
export interface PhotoFeature {
title: string;
icon?: PhotoFeatureIcon;
/** `src: ""` renders a labelled placeholder. */
image?: { src?: string; alt?: string };
/** Makes the whole card one link. */
href?: string;
}
export interface PhotoFeatureTrioProps {
eyebrow?: string;
heading?: string;
headingLevel?: "h2" | "h3";
features?: PhotoFeature[];
background?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends PhotoFeatureTrioProps {}
const {
eyebrow = "",
heading = "",
headingLevel = "h2",
features: featuresProp = [],
background = "#f0f8fa",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap",
class: className,
id,
} = Astro.props;
const words = heading
.split("*")
.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));
const Heading = headingLevel;
const Title = headingLevel === "h2" ? "h3" : "h4";
/* A card needs its title; one without is dropped. No cards, nothing renders. */
const features = featuresProp.filter((f) => f && f.title);
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const ICONS: Record<PhotoFeatureIcon, string> = {
box: "M12 3 20 7v10l-8 4-8-4V7Z M4 7l8 4 8-4 M12 11v10",
shield: "M12 3 19 6v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6Z M9 12l2 2 4-4",
route: "M6 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M18 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M6 16V9a3 3 0 0 1 3-3h3 M18 8v7a3 3 0 0 1-3 3h-3",
clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z M12 7v5l3 2",
truck: "M2 7h12v9H2Z M14 10h4l3 3v3h-7 M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
globe: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z M3 12h18 M12 3c3 3 3 15 0 18 M12 3c-3 3-3 15 0 18",
};
---
{features.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{features.length > 0 && (
<section class:list={["pft", className]} id={id} style={`--pft-band:${background}`} data-pft-root>
<div class="pft-inner">
{(eyebrow || words.length > 0) && (
<div class="pft-head">
{eyebrow && <p class="pft-eyebrow">{eyebrow}</p>}
{words.length > 0 && (
<Heading class="pft-heading" data-pft-reveal="words">
{
words.map((t, i) => (
<>
{i > 0 && " "}
<span class:list={["pft-w", { "pft-accent": t.accent }]} style={`--i:${i}`}>
{t.w}
</span>
</>
))
}
</Heading>
)}
</div>
)}
<ul class="pft-grid">
{
features.map((f, i) => {
const img = f.image ?? { src: "" };
return (
<li class:list={["pft-card", { "pft-card--link": f.href }]} data-pft-reveal="up" style={`--d:${i * 0.12}s`}>
<div class="pft-card-head">
<Title class="pft-title">
{f.href ? <a href={safeHref(f.href)}>{f.title}</a> : f.title}
</Title>
<span class="pft-ic" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d={ICONS[f.icon ?? "box"]} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</div>
<div class="pft-media">
{img.src ? (
<img src={img.src} alt={img.alt ?? ""} width="766" height="604" loading="lazy" decoding="async" />
) : (
<div class="pft-ph" role="img" aria-label={`Image placeholder: ${f.title}`}>
<span>Image · landscape · 766 × 604</span>
</div>
)}
</div>
</li>
);
})
}
</ul>
</div>
</section>
)}
<style>
.pft {
--pft-navy: var(--tw-navy, #0b4654);
--pft-accent: var(--tw-accent, #ff6d45);
--pft-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
--pft-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
--pft-card-font: var(--tw-card, Inter, ui-sans-serif, system-ui, sans-serif);
--pft-ease: cubic-bezier(0.44, 0, 0.56, 1);
background: var(--pft-band);
color: var(--pft-navy);
font-family: var(--pft-body);
}
.pft *,
.pft *::before,
.pft *::after {
box-sizing: border-box;
}
.pft-inner {
max-width: 1440px;
margin: 0 auto;
padding: 64px 16px;
}
.pft-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.pft-eyebrow {
flex: none;
margin: 0;
padding: 4px 14px;
border: 1px solid var(--pft-accent);
border-radius: 999px;
color: var(--pft-accent);
font: 500 15px/24px var(--pft-body);
letter-spacing: -0.3px;
text-transform: uppercase;
}
.pft-heading {
max-width: 620px;
margin: 0;
font: 700 28px/1.2 var(--pft-display);
letter-spacing: -0.56px;
text-transform: uppercase;
}
.pft-w {
display: inline-block;
}
.pft-accent {
color: var(--pft-accent);
}
.pft-grid {
display: grid;
gap: 20px;
margin: 40px 0 0;
padding: 0;
list-style: none;
}
.pft-card {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
padding: 20px;
border-radius: 10px;
background: #fff;
}
.pft-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.pft-title {
max-width: 260px;
margin: 0;
font: 700 22px/1.4 var(--pft-card-font);
letter-spacing: -0.88px;
text-transform: uppercase;
}
.pft-title a {
color: inherit;
text-decoration: none;
}
.pft-card--link .pft-title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
}
.pft-title a:focus-visible {
outline: none;
}
.pft-card--link:has(a:focus-visible) {
outline: 2px solid var(--pft-accent);
outline-offset: 3px;
}
.pft-ic {
display: grid;
flex: none;
place-items: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--pft-accent);
color: #fff;
}
.pft-ic svg {
width: 22px;
height: 22px;
}
.pft-media {
aspect-ratio: 383 / 302;
overflow: hidden;
border-radius: 10px;
}
.pft-media img,
.pft-ph {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pft-ph {
display: grid;
place-items: center;
background: repeating-linear-gradient(135deg, #e3eef1 0 12px, #edf5f7 12px 24px);
font: 500 13px/1.4 var(--pft-body);
}
[data-pft-reveal="up"] {
transition:
opacity 0.8s var(--pft-ease) var(--d, 0s),
transform 0.8s var(--pft-ease) var(--d, 0s);
}
.pft[data-pft-ready] [data-pft-reveal="up"]:not([data-in]) {
opacity: 0;
transform: translateY(80px);
}
.pft-w {
transition:
opacity 0.6s var(--pft-ease) calc(var(--i) * 0.06s),
transform 0.6s var(--pft-ease) calc(var(--i) * 0.06s);
}
.pft[data-pft-ready] [data-pft-reveal="words"]:not([data-in]) .pft-w {
opacity: 0;
transform: translateY(10px);
}
@media (min-width: 810px) {
.pft-inner {
padding: 90px 40px;
}
.pft-head {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.pft-eyebrow {
margin-top: 42px;
}
.pft-heading {
font-size: 38px;
letter-spacing: -0.76px;
width: 58%;
}
.pft-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.pft-inner {
padding: 100px 65px;
}
.pft-eyebrow {
margin: 48px 0 0 15px;
}
.pft-heading {
width: 600px;
margin-right: 0;
font-size: 50px;
line-height: 60px;
letter-spacing: -1px;
}
.pft-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 50px;
}
.pft-title {
font-size: 26px;
line-height: 36.4px;
letter-spacing: -1.04px;
}
}
@media (prefers-reduced-motion: reduce) {
[data-pft-reveal="up"],
.pft-w {
transition: none;
}
}
</style>
<script>
/* Appear-on-scroll; one observer per instance, torn down on astro:before-swap. */
function initPhotoFeatureTrio(root: HTMLElement) {
if (root.dataset.pftReady === "") return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
const controller = new AbortController();
root.dataset.pftReady = "";
const io = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
(entry.target as HTMLElement).dataset.in = "";
io.unobserve(entry.target);
}
},
{ threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
);
root.querySelectorAll<HTMLElement>("[data-pft-reveal]").forEach((t) => io.observe(t));
controller.signal.addEventListener("abort", () => io.disconnect());
document.addEventListener(
"astro:before-swap",
() => {
controller.abort();
delete root.dataset.pftReady;
},
{ once: true, signal: controller.signal },
);
}
const boot = () => document.querySelectorAll<HTMLElement>("[data-pft-root]").forEach(initPhotoFeatureTrio);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot, { once: true });
} else {
boot();
}
document.addEventListener("astro:page-load", boot);
</script>
===== END src/components/PhotoFeatureTrio.astro =====
===== FILE (supporting): src/components/PhotoFeatureTrio.md =====
# Photo feature trio
A pale band with an outlined eyebrow on the left and a big uppercase heading
on the right, over three white cards: a two-line uppercase title, a round
orange icon in the corner and a landscape photo filling the foot.
Catalog page: `/components/photo-feature-trio`
## Files required
- **`PhotoFeatureTrio.astro`** — the component, with one small appear script.
- **`public/photo-feature-trio/courier.webp`**, **`truck-dusk.webp`**,
**`container-ship.webp`** — the catalog demo's photos. The component has no
default photos; the demo passes these through `features`.
- `PhotoFeatureTrio.md` — this file.
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `""` | Hidden when empty. |
| `heading` | `string?` | `""` | Orange words in `*asterisks*`. Hidden when empty. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | Card titles are one level below. |
| `features` | `{ title, icon?, image?, href? }[]` | `[]` | `icon`: box, shield, route, clock, truck, globe. `href` makes the card one link. A card without a `title` is dropped. |
| `background` | `string?` | `#f0f8fa` | |
| `fontStylesheet`, `class`, `id` | | | |
Nothing is invented: with no `features` the component renders nothing at all
(not even the font link). Pass only as many cards as you have — one card
renders one card. A card with no `image.src` draws the neutral "Image"
placeholder.
## Behaviour (measured)
- Cards rise from 80px, fade in, staggered 120ms; heading words rise from 10px.
- The reference cards have no hover state; none is added.
## Images and credits
| File | Size | Credit |
| :--- | :--- | :--- |
| `courier.webp` | 766 × 604 | Unsplash 2jfpCDSo6x8, Unsplash License |
| `truck-dusk.webp` | 766 × 604 | Unsplash ucuOscdCaO4, Unsplash License |
| `container-ship.webp` | 766 × 604 | Unsplash WI_KrzzBRPg, Unsplash License |
===== END src/components/PhotoFeatureTrio.md =====
===== FILE (required): public/photo-feature-trio/courier.webp =====
[binary asset — download https://astro.baysixmedia.com/photo-feature-trio/courier.webp and save it to public/photo-feature-trio/courier.webp]
===== FILE (required): public/photo-feature-trio/truck-dusk.webp =====
[binary asset — download https://astro.baysixmedia.com/photo-feature-trio/truck-dusk.webp and save it to public/photo-feature-trio/truck-dusk.webp]
===== FILE (required): public/photo-feature-trio/container-ship.webp =====
[binary asset — download https://astro.baysixmedia.com/photo-feature-trio/container-ship.webp and save it to public/photo-feature-trio/container-ship.webp]
--- VERIFIED IN THE COMPONENT LIBRARY ---
Enrolled for verification but never run.
No verification run has been recorded.
No checks have passed yet.
No usable source fingerprint, so these results cannot be tied to the files below.
--- NOT PROVEN ---
- ClientRouter: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.
--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.
--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.