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: "Badge image CTA band"
Library page: https://astro.baysixmedia.com/components/badge-image-cta-band/
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/BadgeImageCtaBand.astro =====
---
/**
* BadgeImageCtaBand
*
* A full-width photo band with a round notch cut from its top edge, where a
* spinning orange badge (circular text around an icon) sits half above the
* photo. An orange card overlaps the photo's lower edge — on the right from
* 810px, full width below — with dark ink for contrast: a heading, a hairline,
* check-marked points and a navy pill.
*
* The badge turns slowly and forever (stopped under reduced motion); the card
* lifts in the first time it scrolls into view.
*
* Reads the --tw-* tokens from any ancestor, with fallbacks.
*/
export interface BadgeImageCtaBandProps {
/** Circular badge text. Empty (the default) drops the badge and the notch. */
badgeText?: string;
/** The card heading. Without one the component renders nothing. */
heading?: string;
headingLevel?: "h2" | "h3";
/** Check-marked points. Blank entries are dropped. */
points?: string[];
/** The pill. Needs both a label and an href, or it is left out. */
cta?: { label: string; href: string } | null;
/** No `src` renders a neutral labelled placeholder. */
image?: { src?: string; alt?: string };
background?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends BadgeImageCtaBandProps {}
const {
badgeText = "",
heading = "",
headingLevel = "h2",
points = [],
cta = null,
image: imageProp,
background = "#ffffff",
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;
/* No demo photo: only what the caller passes. A src without alt is decorative. */
const image = { src: imageProp?.src ?? "", alt: imageProp?.alt ?? "" };
const list = points.filter((p) => typeof p === "string" && p.trim() !== "");
const action = cta && cta.label && cta.href ? cta : null;
const Heading = headingLevel;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const pathId = `${id ?? "bicb"}-arc-${Math.random().toString(36).slice(2, 7)}`;
---
{heading && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{heading && (
<section class:list={["bicb", className, { "bicb--badge": badgeText }]} id={id} style={`--bicb-band:${background}`} data-bicb-root>
{
badgeText && (
<div class="bicb-badge" aria-hidden="true">
<svg class="bicb-ring" viewBox="0 0 136 136">
<defs>
<path id={pathId} d="M68 68m-50 0a50 50 0 1 1 100 0a50 50 0 1 1-100 0" />
</defs>
<text>
<textPath href={`#${pathId}`} textLength="312">
{badgeText.toUpperCase()}
</textPath>
</text>
</svg>
<span class="bicb-core">
<svg viewBox="0 0 24 24">
<path d="M12 3 21 12 12 21 3 12Z" fill="currentColor" />
<path d="M9.5 14.5 14.5 9.5M11 9.5h3.5V13" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</div>
)
}
<div class="bicb-media">
{
image.src ? (
<img src={image.src} alt={image.alt} width="1920" height="760" loading="lazy" decoding="async" />
) : (
<div class="bicb-ph" role="img" aria-label="Image placeholder">
<span>Image · 1920 × 760</span>
</div>
)
}
</div>
<div class="bicb-wrap">
<div class="bicb-card" data-bicb-reveal="up">
<Heading class="bicb-heading">{heading}</Heading>
{
list.length > 0 && (
<ul class="bicb-points">
{list.map((p) => (
<li>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="m5 12.5 4.5 4.5L19 6" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
{p}
</li>
))}
</ul>
)
}
{
action && (
<a class="bicb-btn" href={safeHref(action.href)}>
<span>{action.label}</span>
<span class="bicb-btn-ic" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7 3-7Z" fill="currentColor" /></svg>
</span>
</a>
)
}
</div>
</div>
</section>
)}
<style>
.bicb {
--bicb-navy: var(--tw-navy, #0b4654);
--bicb-accent: var(--tw-accent, #ff6d45);
--bicb-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
--bicb-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
--bicb-card-font: var(--tw-card, Inter, ui-sans-serif, system-ui, sans-serif);
--bicb-ease: cubic-bezier(0.44, 0, 0.56, 1);
--bicb-badge: 112px;
/* Dark ink on the orange card: white on #ff6d45 is 2.8:1 and fails. */
--bicb-ink: var(--tw-ink, #0a2227);
position: relative;
padding: 0 0 40px;
background: var(--bicb-band);
color: var(--bicb-ink);
font-family: var(--bicb-body);
}
.bicb *,
.bicb *::before,
.bicb *::after {
box-sizing: border-box;
}
.bicb--badge {
padding-top: calc(var(--bicb-badge) / 2 + 28px);
}
.bicb-badge {
position: absolute;
top: 16px;
left: 50%;
z-index: 2;
display: grid;
place-items: center;
width: var(--bicb-badge);
height: var(--bicb-badge);
border-radius: 50%;
background: var(--bicb-accent);
transform: translateX(-50%);
}
.bicb-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: #fff;
font: 500 14px/1 var(--bicb-card-font);
letter-spacing: 1px;
animation: bicb-spin 28s linear infinite;
}
@keyframes bicb-spin {
to {
transform: rotate(360deg);
}
}
.bicb-core {
display: grid;
place-items: center;
width: 44%;
height: 44%;
border-radius: 50%;
background: #fff;
color: var(--bicb-accent);
}
.bicb-core svg {
width: 58%;
height: 58%;
}
.bicb-media {
position: relative;
height: 420px;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
/* The round notch the badge sits in. */
.bicb--badge .bicb-media {
-webkit-mask-image: radial-gradient(circle calc(var(--bicb-badge) / 2 + 14px) at 50% -12px, transparent 98%, #000 100%);
mask-image: radial-gradient(circle calc(var(--bicb-badge) / 2 + 14px) at 50% -12px, transparent 98%, #000 100%);
}
.bicb-media img,
.bicb-ph {
width: 100%;
height: 100%;
object-fit: cover;
}
.bicb-ph {
display: grid;
place-items: center;
background: repeating-linear-gradient(135deg, #e3eef1 0 12px, #edf5f7 12px 24px);
color: var(--bicb-navy);
font: 500 13px/1.4 var(--bicb-body);
}
.bicb-wrap {
max-width: 1440px;
margin: -56px auto 0;
padding: 0 16px;
position: relative;
z-index: 1;
}
.bicb-card {
margin-left: auto;
padding: 28px 26px 30px;
border-radius: 20px;
background: var(--bicb-accent);
color: var(--bicb-ink);
}
.bicb-heading {
margin: 0;
padding-bottom: 24px;
border-bottom: 1px solid rgb(10 34 39 / 0.22);
font: 700 28px/1.12 var(--bicb-display);
letter-spacing: -0.02em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.bicb-points {
display: grid;
gap: 12px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.bicb-points li {
display: flex;
align-items: flex-start;
gap: 12px;
font: 600 17px/1.45 var(--bicb-card-font);
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.bicb-points svg {
flex: none;
width: 18px;
height: 18px;
margin-top: 3px;
}
.bicb-btn {
display: inline-flex;
align-items: center;
gap: 14px;
min-height: 56px;
margin-top: 30px;
padding: 8px 8px 8px 26px;
border-radius: 999px;
background: var(--bicb-navy);
color: #fff;
font: 600 17px/1.3 var(--bicb-body);
text-decoration: none;
transition:
background-color 0.3s var(--bicb-ease),
color 0.3s var(--bicb-ease);
}
.bicb-btn-ic {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
color: var(--bicb-accent);
transition:
background-color 0.3s var(--bicb-ease),
color 0.3s var(--bicb-ease);
}
.bicb-btn-ic svg {
width: 18px;
height: 18px;
}
/* The measured navy-button hover: it turns white with dark text and the
icon inverts to orange with a white arrow. */
.bicb-btn:hover {
background: #fff;
color: #000;
}
.bicb-btn:hover .bicb-btn-ic {
background: var(--bicb-accent);
color: #fff;
}
.bicb-btn:focus-visible {
outline: 3px solid var(--bicb-navy);
outline-offset: 3px;
}
[data-bicb-reveal="up"] {
transition:
opacity 0.8s var(--bicb-ease),
transform 0.8s var(--bicb-ease);
}
.bicb[data-bicb-ready] [data-bicb-reveal="up"]:not([data-in]) {
opacity: 0;
transform: translateY(80px);
}
@media (min-width: 810px) {
.bicb {
--bicb-badge: 136px;
}
.bicb-media {
height: 520px;
}
.bicb-wrap {
margin-top: -330px;
padding: 0 40px;
}
.bicb-card {
max-width: 480px;
padding: 32px;
}
}
@media (min-width: 1200px) {
.bicb-media {
height: 574px;
}
.bicb-wrap {
margin-top: -360px;
padding: 0 60px;
}
.bicb-card {
max-width: 500px;
padding: 38px 38px 40px;
}
.bicb-heading {
font-size: 36px;
}
.bicb-points li {
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.bicb-ring {
animation: none;
}
[data-bicb-reveal="up"],
.bicb-btn,
.bicb-btn-ic {
transition: none;
}
}
</style>
<script>
/* Appear-on-scroll for the card; torn down on astro:before-swap. The badge
spin is a CSS animation. */
function initBadgeImageCtaBand(root: HTMLElement) {
if (root.dataset.bicbReady === "") return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
const controller = new AbortController();
root.dataset.bicbReady = "";
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 },
);
root.querySelectorAll<HTMLElement>("[data-bicb-reveal]").forEach((t) => io.observe(t));
controller.signal.addEventListener("abort", () => io.disconnect());
document.addEventListener(
"astro:before-swap",
() => {
controller.abort();
delete root.dataset.bicbReady;
},
{ once: true, signal: controller.signal },
);
}
const boot = () => document.querySelectorAll<HTMLElement>("[data-bicb-root]").forEach(initBadgeImageCtaBand);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot, { once: true });
} else {
boot();
}
document.addEventListener("astro:page-load", boot);
</script>
===== END src/components/BadgeImageCtaBand.astro =====
===== FILE (supporting): src/components/BadgeImageCtaBand.md =====
# Badge image CTA band
A full-width photo band with a round notch cut from its top edge, where a
slowly spinning orange badge (circular text around an icon) sits half above
the photo. An orange card overlaps the photo's foot — on the right from
810px, full width below — set in dark ink (white on the orange failed
contrast): a heading, a hairline, check-marked points and a navy pill. The
card is as tall as its content.
Catalog page: `/components/badge-image-cta-band`
## Files required
- **`BadgeImageCtaBand.astro`** — the component, with one small appear script.
- `public/badge-image-cta-band/port-ship.webp` — the catalog demo's photo,
passed as a prop. Only needed if you keep the demo image.
- `BadgeImageCtaBand.md` — this file.
## Props
Every content prop is empty by default — the component carries no sample
business, claims or photo. **With no `heading` it renders nothing at all.**
The catalog demo passes its freight copy, points, pill and port photo as props.
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `badgeText` | `string?` | `""` | Ring text. Empty drops the badge and the notch. |
| `heading` | `string?` | `""` | Card heading. Required for anything to render. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | |
| `points` | `string[]` | `[]` | Check-marked points. Blank entries are dropped; none drops the list. |
| `cta` | `{ label, href } \| null` | `null` | Navy pill. Left out unless both `label` and `href` are set. |
| `image` | `{ src?, alt? }?` | none | No `src` draws a neutral "Image placeholder" box. A `src` without `alt` is decorative (`alt=""`). |
| `background` | `string?` | `#ffffff` | Band above and below the photo. |
| `fontStylesheet`, `class`, `id` | | | |
## Behaviour (measured)
- **Badge:** turns continuously (the reference rotates it; one turn every
14s here). Stopped under reduced motion.
- **Navy pill hover:** background `#0b4654` → `#fff`, text → black; the icon
disc turns orange with a white arrow.
- The card rises from 80px on first view.
## Images and credits
Demo only — the component itself references no image.
| File | Size | Credit |
| :--- | :--- | :--- |
| `port-ship.webp` | 1920 × 760 | Unsplash 2JNNpq4nGls, Unsplash License |
## Approximations
- The reference badge is a raster; the ring text here is SVG `textPath`, so
spacing differs slightly.
- The rotation speed was not measured precisely (sampled mid-turn only).
===== END src/components/BadgeImageCtaBand.md =====
===== FILE (required): public/badge-image-cta-band/port-ship.webp =====
[binary asset — download https://astro.baysixmedia.com/badge-image-cta-band/port-ship.webp and save it to public/badge-image-cta-band/port-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.