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: "Breadcrumb page banner"
Library page: https://astro.baysixmedia.com/components/breadcrumb-page-banner/
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/BreadcrumbPageBanner.astro =====
---
/**
* BreadcrumbPageBanner
*
* A 550px full-bleed page banner for inner pages: a photo under a navy
* wash, a big white page title and a breadcrumb trail ("Home » About Us")
* with orange separators. The top of the banner is left clear for an
* overlay header (ContactBarOverlayHeader is 164px tall at desktop), so the
* title sits in the lower half.
*
* Static: no script. Reads --tg-* design tokens from any ancestor.
*/
export interface BreadcrumbPageBannerCrumb {
label: string;
/** Omit on the last crumb, which is the current page. */
href?: string;
}
export interface BreadcrumbPageBannerProps {
title?: string;
/** The trail. The last crumb is the current page and gets aria-current. Defaults to Home » title. */
crumbs?: BreadcrumbPageBannerCrumb[];
/** `src: ""` renders a labelled placeholder instead of the photo. */
image?: { src?: string; alt?: string };
headingLevel?: "h1" | "h2";
breadcrumbLabel?: string;
fontStylesheet?: string;
id?: string;
}
interface Props extends BreadcrumbPageBannerProps {}
/* No photo by default: without one the design's labelled placeholder shows. */
const DEFAULT_IMAGE = {
src: "",
alt: "",
};
const {
title = "",
crumbs,
image = {},
headingLevel = "h1",
breadcrumbLabel = "Breadcrumb",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap",
id,
} = Astro.props;
const given = (crumbs ?? []).filter((c) => c?.label);
const trail: BreadcrumbPageBannerCrumb[] =
given.length > 0 ? given : [{ label: "Home", href: "/" }, { label: title }];
const photo = { ...DEFAULT_IMAGE, ...image };
const Heading = headingLevel;
---
{title && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class="bpb" id={id} data-bpb-root>
<div class="bpb-bg" aria-hidden={photo.src && photo.alt ? undefined : "true"}>
{
photo.src ? (
<img
class="bpb-img"
src={photo.src}
alt={photo.alt ?? ""}
width="2000"
height="770"
loading="eager"
fetchpriority="high"
decoding="async"
/>
) : (
<div class="bpb-ph">
<span class="bpb-ph-label">Image</span>
<span class="bpb-ph-hint">Wide banner photo</span>
<span class="bpb-ph-spec">2000 × 770 · 26:10</span>
</div>
)
}
<div class="bpb-wash"></div>
</div>
<div class="bpb-inner">
<Heading class="bpb-title">{title}</Heading>
<nav class="bpb-crumbs" aria-label={breadcrumbLabel}>
<ol role="list">
{
trail.map((crumb, i) => {
const last = i === trail.length - 1;
return (
<li>
{i > 0 && (
<svg class="bpb-sep" viewBox="0 0 18 14" aria-hidden="true" focusable="false">
<path d="M2 1.5 7.5 7 2 12.5M9.5 1.5 15 7l-5.5 5.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)}
{last ? (
<span class="bpb-current" aria-current="page">{crumb.label}</span>
) : crumb.href ? (
<a class="bpb-link" href={crumb.href}>{crumb.label}</a>
) : (
<span class="bpb-plain">{crumb.label}</span>
)}
</li>
);
})
}
</ol>
</nav>
</div>
</section>
</>
)}
<style>
.bpb {
--bpb-navy: var(--tg-navy, #020e28);
--bpb-orange: var(--tg-orange, #fd5523);
--bpb-display: var(--tg-font-display, Outfit, ui-sans-serif, system-ui, sans-serif);
--bpb-body: var(--tg-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
position: relative;
isolation: isolate;
box-sizing: border-box;
display: flex;
align-items: flex-end;
width: 100%;
min-height: 255px;
padding: 124px 20px 56px;
overflow: hidden;
background: var(--bpb-navy);
color: #fff;
font-family: var(--bpb-body);
}
.bpb *,
.bpb *::before,
.bpb *::after {
box-sizing: border-box;
}
.bpb-bg {
position: absolute;
inset: 0;
z-index: -1;
}
.bpb-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% 50%;
}
/* The measured stack is a navy layer plus a 60% navy layer over the
photo. The photo still reads through in the capture, so the solid layer
is treated as a blend; this gradient reproduces the result — deeper on
the title side, lighter over the ship. */
.bpb-wash {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgb(2 14 40 / 0.72) 0%, rgb(2 14 40 / 0.5) 55%, rgb(2 14 40 / 0.38) 100%),
linear-gradient(180deg, rgb(2 14 40 / 0.25) 0%, rgb(2 14 40 / 0) 40%, rgb(2 14 40 / 0.2) 100%);
mix-blend-mode: normal;
}
.bpb-wash::before {
content: "";
position: absolute;
inset: 0;
background: rgb(8 36 110 / 0.35);
mix-blend-mode: multiply;
}
.bpb-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 100%;
padding: 16px;
text-align: center;
background: repeating-linear-gradient(135deg, #1a2742 0 12px, #213050 12px 24px);
color: rgb(255 255 255 / 0.62);
}
.bpb-ph-label {
font: 500 12px/1 var(--bpb-body);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bpb-ph-hint {
max-width: 28ch;
font: 500 14px/1.4 var(--bpb-body);
}
.bpb-ph-spec {
font: 400 12px/1.2 var(--bpb-body);
}
.bpb-inner {
width: 100%;
max-width: 1224px;
margin: 0 auto;
}
.bpb-title {
margin: 0;
color: #fff;
font: 700 40px/1.3 var(--bpb-display);
letter-spacing: normal;
overflow-wrap: anywhere;
}
.bpb-crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.bpb-crumbs li {
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 8px;
font: 500 16px/28px var(--bpb-display);
}
.bpb-sep {
width: 18px;
height: 14px;
flex: none;
color: var(--bpb-orange);
}
.bpb-link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: -8px 0;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: color 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}
.bpb-link:hover {
color: var(--bpb-orange);
}
.bpb-link:focus-visible {
outline: 2px solid var(--bpb-orange);
outline-offset: 3px;
}
.bpb-current,
.bpb-plain {
color: #fff;
}
/* ---- tablet ---- */
@media (min-width: 810px) {
.bpb {
min-height: 440px;
padding: 240px 30px 100px;
}
.bpb-title {
font-size: 52px;
line-height: 1.4;
}
.bpb-crumbs li {
font-size: 18px;
}
}
/* ---- desktop: 550px, content from 300px ---- */
@media (min-width: 1200px) {
.bpb {
min-height: 550px;
padding: 300px 20px 138px;
}
/* Step 39.4: --tg-grid-max / --tg-grid-gutter put the title and crumbs on a site grid at desktop; the fallbacks give the original 1224px row. */
.bpb-inner {
--bpb-grid-max: var(--tg-grid-max, 1264px);
--bpb-grid-gutter: var(--tg-grid-gutter, 20px);
max-width: calc(var(--bpb-grid-max) - 2 * var(--bpb-grid-gutter));
}
.bpb-title {
font-size: 60px;
line-height: 84px;
}
}
@media (prefers-reduced-motion: reduce) {
.bpb-link {
transition: none;
}
}
</style>
===== END src/components/BreadcrumbPageBanner.astro =====
===== FILE (supporting): src/components/BreadcrumbPageBanner.md =====
# Breadcrumb page banner
A full-bleed page banner for inner pages: a container-ship photo under a
navy wash, a big white page title low on the left, and a breadcrumb
("Home » About Us") with orange separators. The top is left clear for an
overlay header.
Catalog page: `/components/breadcrumb-page-banner`
## Files required
**`BreadcrumbPageBanner.astro`** — the whole component, no script, no
imports. `BreadcrumbPageBanner.md` — this file, optional.
`public/breadcrumb-page-banner/ship-at-sea.webp` — optional demo photo,
passed as `image` by the catalog demo.
## Basic usage
```astro
---
import ContactBarOverlayHeader from "../components/ContactBarOverlayHeader.astro";
import BreadcrumbPageBanner from "../components/BreadcrumbPageBanner.astro";
---
<div style="position: relative">
<ContactBarOverlayHeader currentPath="/request-quote" />
<BreadcrumbPageBanner title="Request A Quote" />
</div>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `title` | `string?` | `""` | The page title. With no title the banner renders nothing. |
| `crumbs` | `{ label, href? }[]?` | Home » title | The trail. The last crumb is the current page: plain text with `aria-current="page"`. Crumbs without `label` are dropped. |
| `image` | `{ src?, alt? }?` | none | No `src` renders a neutral labelled placeholder ("Image · Wide banner photo"). The catalog demo passes `ship-at-sea.webp`. |
| `headingLevel` | `"h1" \| "h2"` | `"h1"` | |
| `breadcrumbLabel` | `string?` | `"Breadcrumb"` | The `<nav>`'s accessible name. |
| `fontStylesheet` | `string?` | Outfit + DM Sans | `""` skips it. |
| `id` | `string?` | — | Root id. |
## Behaviour
- **Size.** 550px at desktop with the title 300px down and 138px below it
(measured); 440px from 240px at 810–1199px; at least 255px from 124px on a
phone (measured height). The top clears ContactBarOverlayHeader (164px /
100px).
- **Type.** Title Outfit 700 60/84 (52px tablet, 40px phone); crumbs Outfit
500 18/28 (16px phone), white, with an 18×14 orange » between them.
- **Hover.** The Home link turns `#fd5523` over 0.4s
`cubic-bezier(.44,0,.56,1)`, as measured. No other motion; nothing
animates on load or scroll (none was measured).
## Accessibility
- `<nav aria-label="Breadcrumb">` around an `<ol>`; the current page has
`aria-current="page"` and is not a link. The separators are `aria-hidden`.
- The photo is decorative by default (`alt=""`, container `aria-hidden`);
pass `alt` if it carries meaning.
- Home link has a 44px target and a visible focus ring.
## Images and credits
| File | Slot | Size | Credit |
| :--- | :--- | :--- | :--- |
| `public/breadcrumb-page-banner/ship-at-sea.webp` | Banner background | 2000 × 770 | Photo: Unsplash 0A7YwYhZhWw, Unsplash License |
An aerial shot of a loaded container ship at sea. Swap in the client's own
photo on a live site.
## Approximations
- **The overlay.** The dump shows a solid navy layer plus a 60% navy layer,
but the photo reads clearly through them in the capture, so the solid layer
must be blended in a way the dump did not record. The wash here is a navy
gradient (72% on the title side to 38% on the right) with a multiplied blue
tint, matched by eye to the screenshot.
- **Tablet sizes** were not captured; 440px and 52px are interpolated.
===== END src/components/BreadcrumbPageBanner.md =====
===== FILE (required): public/breadcrumb-page-banner/ship-at-sea.webp =====
[binary asset — download https://astro.baysixmedia.com/breadcrumb-page-banner/ship-at-sea.webp and save it to public/breadcrumb-page-banner/ship-at-sea.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: not applicable — this component ships no script.
--- 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.