The 2 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: "Dark image CTA card"
Library page: https://astro.baysixmedia.com/components/dark-image-cta-card/
Files: 2 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/DarkImageCtaCard.astro =====
---
/**
* DarkImageCtaCard
*
* A rounded ink card centred in a white band: a lime uppercase eyebrow, a big
* white heading, a paragraph and two pill links on the left; a photograph
* edge to edge on the right, clipped by the card's radius. The photo slides
* in from 18px to the right and fades up the first time the card enters the
* viewport.
*
* Side by side from 810px. On a phone the reference drops the photo and keeps
* the ink card; `phoneImage` can put it back above or below the copy.
*
* Reads --nv-* design tokens from any ancestor, with fallbacks.
*/
export interface DarkImageCtaLink {
label: string;
href: string;
}
export interface DarkImageCtaCardProps {
eyebrow?: string;
heading?: string;
headingLevel?: "h2" | "h3";
text?: string;
/** The lime pill. `null` drops it. */
primaryCta?: DarkImageCtaLink | null;
/** The outline pill. `null` drops it. */
secondaryCta?: DarkImageCtaLink | null;
/** The photo. `src: ""` renders the labelled placeholder instead. */
image?: { src?: string; alt?: string };
/** Below 810px: `"hidden"` (as measured), or stack it `"top"` / `"bottom"`. */
phoneImage?: "hidden" | "top" | "bottom";
/** The band around the card. */
background?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends DarkImageCtaCardProps {}
const {
eyebrow = "",
heading = "",
headingLevel = "h2",
text = "",
primaryCta: primaryProp = null,
secondaryCta: secondaryProp = null,
image: imageProp,
phoneImage = "hidden",
background = "#ffffff",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap",
class: className,
id,
} = Astro.props;
/* No default photo: with no `src` the labelled placeholder shows. A photo
given no alt is decorative. */
const image = { src: imageProp?.src ?? "", alt: imageProp?.alt ?? "" };
/* A pill needs a label and a link; the card needs a heading to render at all. */
const primaryCta = primaryProp?.label && primaryProp.href ? primaryProp : null;
const secondaryCta = secondaryProp?.label && secondaryProp.href ? secondaryProp : null;
const Heading = headingLevel;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
/* Measured slot: 627 × 300 at desktop (~2.1:1); the file is 1300 × 620. */
const IMAGE_SPEC = "~2.1:1 · 1300 × 620 px";
---
{heading && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{heading && (
<section
class:list={["dicc", className]}
id={id}
style={`--dicc-band: ${background};`}
data-dicc-root
data-phone-image={phoneImage}
>
<div class="dicc-card">
<div class="dicc-copy">
{eyebrow && <p class="dicc-eyebrow">{eyebrow}</p>}
<Heading class="dicc-heading">{heading}</Heading>
{text && <p class="dicc-text">{text}</p>}
{
(primaryCta || secondaryCta) && (
<div class="dicc-actions">
{primaryCta && (
<a class="dicc-btn dicc-btn--primary" href={safeHref(primaryCta.href)}>
{primaryCta.label}
<span class="dicc-arrow" aria-hidden="true">↗</span>
</a>
)}
{secondaryCta && (
<a class="dicc-btn dicc-btn--outline" href={safeHref(secondaryCta.href)}>
{secondaryCta.label}
<span class="dicc-arrow" aria-hidden="true">↗</span>
</a>
)}
</div>
)
}
</div>
<div class="dicc-media" data-dicc-media>
{
image.src ? (
<img src={image.src} alt={image.alt} width="1300" height="620" loading="lazy" decoding="async" />
) : (
<div class="dicc-ph" role="img" aria-label="Image placeholder: wide landscape photo">
<div class="dicc-ph-text" aria-hidden="true">
<span class="dicc-ph-label">Image</span>
<span class="dicc-ph-hint">Wide landscape photo</span>
<span class="dicc-ph-spec">{IMAGE_SPEC}</span>
</div>
</div>
)
}
</div>
</div>
</section>
)}
<style>
.dicc {
--dicc-ink: #07130e;
--dicc-lime: var(--nv-lime, #c8ff38);
--dicc-font: var(--nv-font-ui, Inter, ui-sans-serif, system-ui, sans-serif);
--dicc-ease: cubic-bezier(0.22, 1, 0.36, 1);
box-sizing: border-box;
padding: 0 16px 24px;
background: var(--dicc-band);
font-family: var(--dicc-font);
}
.dicc *,
.dicc *::before,
.dicc *::after {
box-sizing: border-box;
}
.dicc-card {
display: flex;
flex-direction: column;
max-width: 1120px;
margin: 0 auto;
border-radius: 24px;
background: var(--dicc-ink);
overflow: clip;
}
.dicc-copy {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 14px;
padding: 34px 22px;
min-width: 0;
}
.dicc-eyebrow {
margin: 0;
font: 800 11px/13.2px var(--dicc-font);
letter-spacing: 1px;
text-transform: uppercase;
color: var(--dicc-lime);
}
.dicc-heading {
margin: 0;
max-width: 420px;
font: 800 42px/1 var(--dicc-font);
letter-spacing: normal;
color: #fff;
}
.dicc-text {
margin: 0;
max-width: 360px;
font: 400 15px/1.45 var(--dicc-font);
color: rgb(255 255 255 / 0.75);
}
.dicc-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.dicc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
font: 800 13px/15.6px var(--dicc-font);
text-decoration: none;
white-space: nowrap;
transition:
transform 0.3s var(--dicc-ease),
background-color 0.3s var(--dicc-ease);
}
.dicc-btn--primary {
background: var(--dicc-lime);
color: var(--dicc-ink);
}
.dicc-btn--outline {
background: transparent;
color: #fff;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
}
.dicc-btn--primary:hover {
transform: scale(1.04) translateY(-2px);
}
.dicc-btn--outline:hover {
background: rgb(255 255 255 / 0.1);
transform: scale(1.1) translateY(-2px);
}
.dicc-btn:focus-visible {
outline: 2px solid var(--dicc-lime);
outline-offset: 3px;
}
.dicc-arrow {
font-size: 12px;
}
.dicc-media {
position: relative;
display: none;
min-width: 0;
aspect-ratio: 16 / 9;
}
.dicc[data-phone-image="top"] .dicc-media,
.dicc[data-phone-image="bottom"] .dicc-media {
display: block;
}
.dicc[data-phone-image="top"] .dicc-media {
order: -1;
}
.dicc-media img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Appear: the hidden start pose exists only once the script has marked
the root ready, so no-JS and reduced motion show the photo at rest. */
.dicc-media {
transition:
opacity 0.7s var(--dicc-ease),
transform 0.7s var(--dicc-ease);
}
.dicc[data-dicc-ready]:not([data-in]) .dicc-media {
opacity: 0;
transform: translateX(18px);
}
/* Placeholder for `src: ""`: fills the same box as the photo. */
.dicc-ph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 16px;
text-align: center;
background: repeating-linear-gradient(135deg, #1a2621 0 12px, #1f2c27 12px 24px);
color: rgb(247 250 247 / 0.7);
}
.dicc-ph-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.dicc-ph-label {
font: 600 12px/1 var(--dicc-font);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dicc-ph-hint {
max-width: 28ch;
font: 500 14px/1.4 var(--dicc-font);
}
.dicc-ph-spec {
font: 400 12px/1.2 var(--dicc-font);
}
/* ---- tablet and up: side by side ---- */
@media (min-width: 810px) {
.dicc {
padding: 0 30px 30px;
}
.dicc-card {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
min-height: 300px;
}
.dicc-copy {
padding: 42px 32px 42px 40px;
}
.dicc-heading {
font-size: 36px;
}
.dicc-actions {
gap: 12px;
}
.dicc-btn {
padding: 0 20px;
}
.dicc .dicc-media,
.dicc[data-phone-image] .dicc-media {
display: block;
order: 0;
aspect-ratio: auto;
}
}
/* ---- desktop: the measured 515 / 605 split of a 1120 card ---- */
@media (min-width: 1200px) {
.dicc-card {
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
}
.dicc-copy {
padding: 42px 0 42px 44px;
}
.dicc-heading {
font-size: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
.dicc-btn--primary:hover,
.dicc-btn--outline:hover {
transform: none;
}
.dicc-media {
transition: none;
}
.dicc[data-dicc-ready]:not([data-in]) .dicc-media {
opacity: 1;
transform: none;
}
}
@media (forced-colors: active) {
.dicc-card {
border: 1px solid CanvasText;
}
.dicc-btn {
border: 1px solid ButtonText;
}
}
</style>
<script>
/*
* Appear-on-scroll for the photo. One IntersectionObserver per instance,
* scoped to its root, torn down on astro:before-swap. It sets `data-in`
* once and stops watching. Under reduced motion it marks the root in
* straight away, so nothing ever starts hidden.
*/
function initDarkImageCtaCard(root: HTMLElement) {
if (root.dataset.diccReady === "") return;
const media = root.querySelector<HTMLElement>("[data-dicc-media]");
if (!media) return;
const controller = new AbortController();
const { signal } = controller;
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduced || !("IntersectionObserver" in window)) {
root.dataset.in = "";
return;
}
root.dataset.diccReady = "";
const observer = new IntersectionObserver(
(entries) => {
if (entries.some((entry) => entry.isIntersecting)) {
root.dataset.in = "";
observer.disconnect();
}
},
{ threshold: 0.2 },
);
observer.observe(root);
signal.addEventListener("abort", () => observer.disconnect());
document.addEventListener(
"astro:before-swap",
() => {
controller.abort();
delete root.dataset.diccReady;
},
{ once: true, signal },
);
}
const boot = () =>
document.querySelectorAll<HTMLElement>("[data-dicc-root]").forEach(initDarkImageCtaCard);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot, { once: true });
} else {
boot();
}
document.addEventListener("astro:page-load", boot);
</script>
===== END src/components/DarkImageCtaCard.astro =====
===== FILE (supporting): src/components/DarkImageCtaCard.md =====
# Dark image CTA card
A 1120 × 300 rounded ink card centred in a white band. Left: a lime uppercase
eyebrow, a big white heading, a paragraph and two pill links (lime, and an
outline). Right: a photo edge to edge inside the card's radius, which slides
in from the right the first time the card scrolls into view.
Catalog page: `/components/dark-image-cta-card`
## Files required
- **`DarkImageCtaCard.astro`** — the whole component. No imports, no packages.
One small inline script (the appear-on-scroll observer).
- **`public/dark-image-cta-card/winter-highway.webp`** — the catalog demo's
photo, passed as a registry demo prop. The component has no default photo;
pass your own `image`.
- `DarkImageCtaCard.md` — this file, not needed to run.
## Basic usage
```astro
---
import DarkImageCtaCard from "../components/DarkImageCtaCard.astro";
---
<DarkImageCtaCard
heading="Let's get your freight moving."
primaryCta={{ label: "Request a Quote", href: "/quote" }}
secondaryCta={{ label: "Talk to an Expert", href: "/contact" }}
image={{ src: "/img/our-truck.webp", alt: "Our truck on the coast road" }}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `""` | Lime uppercase line. `""` drops it. |
| `heading` | `string?` | `""` | The heading, capped at 420px. No heading → the component renders nothing, whatever else is passed. |
| `headingLevel` | `"h2" \| "h3"?` | `"h2"` | Fits your page outline. |
| `text` | `string?` | `""` | Paragraph, capped at 360px. `""` drops it. |
| `primaryCta` | `{ label, href } \| null` | `null` | Lime pill. Needs both `label` and `href`; otherwise it is dropped. |
| `secondaryCta` | `{ label, href } \| null` | `null` | Outline pill. Needs both `label` and `href`; otherwise it is dropped. |
| `image` | `{ src?, alt? }?` | none | No `src` renders a labelled placeholder ("Image · Wide landscape photo" plus the size). A `src` with no `alt` is treated as decorative. |
| `phoneImage` | `"hidden" \| "top" \| "bottom"` | `"hidden"` | Below 810px: drop the photo (as measured) or stack it at 16:9. |
| `background` | `string?` | `#ffffff` | The band around the card. |
| `fontStylesheet` | `string?` | Manrope + Inter on Google Fonts | `""` skips it. |
| `class` | `string?` | — | Extra class on the root. |
| `id` | `string?` | — | Root id. |
Hrefs are filtered: only http(s), mailto, tel and relative/hash URLs pass;
anything else renders as `#`. Theming reads `--nv-lime` and `--nv-font-ui`
from any ancestor, with fallbacks.
## Behaviour
- **Hover, "Request a Quote":** `scale(1.04) translateY(-2px)`.
- **Hover, "Talk to an Expert":** background `transparent → rgb(255 255 255 / .1)`,
`scale(1.1) translateY(-2px)`.
- Both transition transform and background over 0.3s `cubic-bezier(.22,1,.36,1)`.
- **Appear:** the photo starts at `opacity: 0; translateX(18px)` and animates to
rest over 0.7s once the card is 20% in view, then the observer disconnects.
The start pose only applies after the script marks the root
`data-dicc-ready`, so with no JS the photo is always visible. The card clips
its overflow, so the slide never causes horizontal scroll.
- **Reduced motion:** no appear (the root is marked in immediately), no hover
transforms; the background change stays.
- **Lifecycle:** init on load and on `astro:page-load`, idempotent via
`data-dicc-ready`, observer disconnected through an `AbortController`
aborted on `astro:before-swap`. Never scrolls or moves focus.
## Layout
- ≥ 1200px: card max 1120px, min 300px tall; copy column 46% (the measured
515px) with `42px 0 42px 44px` padding; photo fills the rest edge to edge.
- 810–1199px: same split at `1.15fr / 1fr`, heading 36px (interpolated, no
capture).
- < 810px: one column, `34px 22px` padding, photo hidden by default.
## Accessibility
- Both buttons are links with visible text; the `↗` is `aria-hidden`.
- Lime `:focus-visible` ring with 3px offset.
- Buttons are 44px tall.
- The demo photo has descriptive alt text; the placeholder is `role="img"`
with a label.
## Images and credits
| File | Slot | Size | Credit |
| :--- | :--- | :--- | :--- |
| `public/dark-image-cta-card/winter-highway.webp` | CTA photo (right half) | 1300 × 620 | Photo: Unsplash tv53M6u2bAQ, Unsplash License |
An aerial winter shot of a truck on a snow-lined highway at sunset. No
company name is legible at this size, but it is still a stock photo: swap it
for the client's own fleet shot on a live site. The demo's eyebrow, heading,
paragraph and both pills are registry demo props too, not component defaults.
## Approximations
- **Button height 44px** instead of the measured 42px (lime) / 40px (outline),
to meet the 44px touch-target rule. Horizontal padding is 20px as measured
from 810px up, 14px on a phone so both pills fit side by side at 390px.
- **Outline border** `inset 0 0 0 1px rgb(255 255 255 / .3)` is read off the
screenshot; the dump records no border.
- **Photo column** is 54% of the card (605px at 1120). The reference image box
is 627px and overflows the card by 23px, clipped — the visible crop is
within a few pixels.
- **Appear timing** (0.7s, ease-out, 20% threshold) is not measured; only the
start pose (`translateX(18px)`, opacity 0) was.
- **Card colour** is the measured `#07130e`, not the `--nv-ink` token
(`#08110f`), so it does not read `--nv-ink`.
- **Phone:** the reference shows no image at all below 810px, so the default
hides it. Phone gutters 16px and card padding 34px 22px (reference card
padding 34px 26px; its phone capture is offset and clipped).
- **Tablet (810–1199)** was not captured; the split and 36px heading are
interpolated.
- **Font:** the whole card uses Inter (`--nv-font-ui`), as the dump shows,
not Manrope.
===== END src/components/DarkImageCtaCard.md =====
===== FILE (required): public/dark-image-cta-card/winter-highway.webp =====
[binary asset — download https://astro.baysixmedia.com/dark-image-cta-card/winter-highway.webp and save it to public/dark-image-cta-card/winter-highway.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.