The 3 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: "Tag headline hero"
Library page: https://astro.baysixmedia.com/components/tag-headline-hero/
Files: 3 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/TagHeadlineHero.astro =====
---
/**
* TagHeadlineHero
*
* A 900px full-bleed photo hero washed navy from the left: a translucent
* eyebrow chip, a huge two-line uppercase headline with an orange tag box
* between its words, and a bottom row pairing a framed photo thumbnail with a
* sentence and an orange pill. Leaves room at the top for a fixed pill header.
*
* The headline rises in on load and the eyebrow and bottom row follow; both
* are CSS animations that end at rest, so nothing is hidden without JS.
*
* Reads the --tw-* tokens from any ancestor, with fallbacks.
*/
export interface TagHeadlineHeroProps {
eyebrow?: string;
/** First headline line. */
lineOne?: string;
/** The orange tag box after the first line. `""` drops it. */
tag?: string;
/** Second headline line. */
lineTwo?: string;
text?: string;
cta?: { label: string; href: string } | null;
/** A call link beside the pill, outlined so the pill stays primary. The component builds the tel: link. Omitted or `null`: none. */
phone?: { number: string; label?: string } | null;
/** A quiet text link under the actions (e.g. to the services below). Omitted or `null`: none. */
link?: { label: string; href: string } | null;
/** Background photo. Omitted, or `src: ""`, renders a labelled placeholder. */
background?: { src?: string; alt?: string };
/** Framed thumbnail beside the sentence. Omitted or `null`: none. `src: ""` renders a placeholder. */
thumbnail?: { src?: string; alt?: string } | null;
/** Run the load-in animation. */
animate?: boolean;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends TagHeadlineHeroProps {}
const {
/* No copy, photos or link of its own: the catalog demo passes them through
the registry's props, so a copied hero never ships an invented business. */
eyebrow = "",
lineOne = "",
tag = "",
lineTwo = "",
text = "",
cta = null,
phone = null,
link = null,
background: bgProp,
thumbnail: thumbProp,
animate = true,
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;
/* Only the photos passed; a photo with no alt is decorative. No thumbnail unless one is given. */
const background = { src: bgProp?.src ?? "", alt: bgProp?.alt ?? "" };
const thumbnail = thumbProp ? { src: thumbProp.src ?? "", alt: thumbProp.alt ?? "" } : null;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
/* A link needs both halves: a label with no destination, or the reverse, is not drawn. */
const ctaLink = cta && cta.label && cta.href ? cta : null;
const dial = phone?.number ? phone.number.replace(/[^\d+]/g, "") : "";
const secondaryLink = dial.length >= 7 ? { label: phone!.label ? `${phone!.label} ${phone!.number}` : phone!.number, href: `tel:${dial}` } : null;
/* A photo alone is not a hero: with no copy or link, render nothing. */
const hasTitle = !!lineOne || !!tag || !!lineTwo;
const textLink = link && link.label && link.href ? link : null;
const hasCopy = !!text || !!ctaLink || !!secondaryLink || !!textLink;
const hasContent = !!eyebrow || hasTitle || hasCopy;
---
{hasContent && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{hasContent && (
<section class:list={["thh", className]} id={id} data-animate={animate ? "" : undefined}>
<div class="thh-bg">
{
background.src ? (
<img src={background.src} alt={background.alt} width="1920" height="950" fetchpriority="high" decoding="async" />
) : (
<div class="thh-ph" role="img" aria-label="Image placeholder: wide landscape photo">
<span>Image · wide landscape photo · 1920 × 950 px</span>
</div>
)
}
</div>
<div class="thh-wash" aria-hidden="true"></div>
<div class="thh-inner">
{
eyebrow && (
<p class="thh-eyebrow thh-late">
<span class="thh-eyebrow-ic" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7 3-7Z" fill="currentColor" /></svg>
</span>
{eyebrow}
</p>
)
}
{hasTitle && (
<h1 class="thh-title">
{(lineOne || tag) && (
<span class="thh-line">
{lineOne && <span class="thh-word">{lineOne}</span>}
{tag && <span class="thh-tag">{tag}</span>}
</span>
)}
{lineTwo && (
<span class="thh-line">
<span class="thh-word">{lineTwo}</span>
</span>
)}
</h1>
)}
{(thumbnail || hasCopy) && (
<div class="thh-foot thh-late">
{
thumbnail && (
<div class="thh-thumb">
{thumbnail.src ? (
<img src={thumbnail.src} alt={thumbnail.alt} width="428" height="300" loading="lazy" decoding="async" />
) : (
<div class="thh-ph thh-ph--thumb" role="img" aria-label="Image placeholder: landscape photo">
<span>Image · 428 × 300</span>
</div>
)}
</div>
)
}
{hasCopy && (
<div class="thh-copy">
{text && <p class="thh-text">{text}</p>}
{
secondaryLink ? (
<div class="thh-actions">
{ctaLink && (
<a class="thh-btn" href={safeHref(ctaLink.href)}>
<span>{ctaLink.label}</span>
<span class="thh-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>
)}
<a class="thh-btn thh-btn--quiet" href={safeHref(secondaryLink.href)}>
<span>{secondaryLink.label}</span>
</a>
</div>
) : (
ctaLink && (
<a class="thh-btn" href={safeHref(ctaLink.href)}>
<span>{ctaLink.label}</span>
<span class="thh-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>
)
)
}
{textLink && (
<a class="thh-link" href={safeHref(textLink.href)}>{textLink.label}<span aria-hidden="true"> →</span></a>
)}
</div>
)}
</div>
)}
</div>
</section>
)}
<style>
.thh {
--thh-navy: var(--tw-navy, #0b4654);
--thh-deep: var(--tw-navy-deep, #052931);
--thh-accent: var(--tw-accent, #ff6d45);
--thh-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
--thh-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
--thh-ease: cubic-bezier(0.44, 0, 0.56, 1);
position: relative;
isolation: isolate;
display: flex;
min-height: 844px;
overflow: clip;
background: var(--thh-navy);
color: #fff;
font-family: var(--thh-body);
}
.thh *,
.thh *::before,
.thh *::after {
box-sizing: border-box;
}
.thh-bg,
.thh-wash {
position: absolute;
inset: 0;
z-index: -1;
}
.thh-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% center;
}
/* Phone: the photo sits behind a stronger, even wash so white type reads. */
.thh-wash {
background: linear-gradient(180deg in srgb, rgb(from var(--thh-navy) r g b / 0.55) 0%, rgb(from var(--thh-navy) r g b / 0.8) 60%, var(--thh-navy) 100%);
}
.thh-inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 22px;
width: 100%;
max-width: var(--tw-grid-max, 1440px);
margin: 0 auto;
padding: 130px 16px 64px;
}
.thh-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin: 0;
padding: 5px 12px 5px 5px;
border-radius: 999px;
background: rgb(140 140 140 / 0.2);
font: 600 14px/22.4px var(--thh-body);
letter-spacing: -0.28px;
text-transform: uppercase;
}
.thh-eyebrow-ic {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--thh-accent);
}
.thh-eyebrow-ic svg {
width: 12px;
height: 12px;
}
.thh-title {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
font: 600 40px/1.1 var(--thh-display);
letter-spacing: -0.8px;
text-transform: uppercase;
}
.thh-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
}
.thh-tag {
display: inline-block;
padding: 4px 16px;
border-radius: 12px;
background: var(--thh-accent);
font: 700 28px/1.3 var(--thh-display);
letter-spacing: -0.56px;
}
.thh-foot {
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 18px;
}
.thh-thumb {
width: min(230px, 100%);
padding: 8px;
border-radius: 10px;
background: rgb(140 140 140 / 0.2);
}
.thh-thumb img,
.thh-ph--thumb {
display: block;
width: 100%;
height: auto;
aspect-ratio: 214 / 150;
border-radius: 10px;
object-fit: cover;
}
.thh-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.thh-text {
max-width: 416px;
margin: 0;
font: 400 16px/25.6px var(--thh-body);
letter-spacing: -0.32px;
}
.thh-btn {
display: inline-flex;
align-items: center;
gap: 12px;
height: 50px;
padding: 0 8px 0 25px;
border-radius: 999px;
background: var(--thh-accent);
color: #fff;
font: 400 16px/25.6px var(--thh-body);
letter-spacing: -0.32px;
text-decoration: none;
transition: background-color 0.3s var(--thh-ease);
}
.thh-btn:hover {
background: var(--thh-deep);
}
.thh-btn-ic {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
color: var(--thh-accent);
transition: transform 0.3s var(--thh-ease);
}
.thh-btn-ic svg {
width: 18px;
height: 18px;
}
.thh-btn:hover .thh-btn-ic {
transform: rotate(-45deg);
}
.thh-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.thh-link {
color: #fff;
font: 500 15px/1.4 var(--thh-body);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgb(255 255 255 / 0.5);
}
.thh-link:hover {
text-decoration-color: #fff;
}
.thh-link:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.thh-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
/* A second action: outlined, no icon, so the pill stays the primary step. */
.thh-btn--quiet {
padding: 0 25px;
border: 1px solid rgb(255 255 255 / 0.55);
background: transparent;
}
.thh-btn--quiet:hover {
border-color: #fff;
background: rgb(255 255 255 / 0.12);
}
.thh-ph {
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: 16px;
background: repeating-linear-gradient(135deg, #154f5c 0 12px, #1a5866 12px 24px);
color: rgb(255 255 255 / 0.75);
font: 500 13px/1.4 var(--thh-body);
text-align: center;
}
/* ---- load-in: CSS animations that end at rest ---- */
@keyframes thh-rise {
from {
opacity: 0;
transform: translateY(var(--thh-from, 20px));
}
}
.thh[data-animate] .thh-title {
animation: thh-rise 0.8s var(--thh-ease) both;
}
.thh[data-animate] .thh-late {
--thh-from: 40px;
animation: thh-rise 1s var(--thh-ease) 0.5s both;
}
@media (min-width: 810px) {
.thh {
min-height: 900px;
}
.thh-wash {
background: linear-gradient(90deg in srgb, var(--thh-navy) 0%, var(--thh-navy) 30%, rgb(from var(--thh-navy) r g b / 0.7) 48%, rgb(from var(--thh-navy) r g b / 0) 72%);
}
.thh-inner {
padding: 170px 40px 80px;
}
.thh-title {
font-size: 72px;
letter-spacing: -1.44px;
}
.thh-tag {
font-size: 40px;
}
.thh-foot {
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
}
@media (min-width: 1200px) {
.thh-inner {
padding: 200px 0 110px;
padding-inline: var(--tw-grid-gutter, 65px);
gap: 0;
}
.thh-eyebrow {
margin-bottom: 10px;
}
.thh-title {
gap: 10px;
font-size: 100px;
line-height: 110px;
letter-spacing: -2px;
}
.thh-line {
gap: 24px;
}
.thh-tag {
padding: 8px 18px;
border-radius: 15px;
font-size: 50px;
line-height: 60px;
letter-spacing: -1px;
}
.thh-foot {
margin-top: 110px;
}
.thh-copy {
padding-top: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.thh[data-animate] .thh-title,
.thh[data-animate] .thh-late {
animation: none;
}
.thh-btn,
.thh-btn-ic {
transition: none;
}
.thh-btn:hover .thh-btn-ic {
transform: none;
}
}
</style>
===== END src/components/TagHeadlineHero.astro =====
===== FILE (supporting): src/components/TagHeadlineHero.md =====
# Tag headline hero
A 900px full-bleed photo hero washed navy from the left: a translucent
eyebrow chip, a huge two-line uppercase headline with an orange tag box
between its words, and a bottom row pairing a framed thumbnail with a
sentence and an orange pill. Leaves room for a fixed pill header.
Catalog page: `/components/tag-headline-hero`
## Files required
- **`TagHeadlineHero.astro`** — the whole component. No script.
- **`public/tag-headline-hero/hero-truck.webp`**, **`card-truck.webp`** — the
catalog demo's photos. The component has no default photo: copy them and
pass them, or pass your own.
- `TagHeadlineHero.md` — this file.
**The component ships no copy of its own.** Eyebrow, headline, sentence, link
and photos all default to empty, so a copied hero never carries the catalog's
fictional freight company. The catalog demo passes them through the registry's
`props`. Each block is drawn only when its data is present; with no eyebrow,
headline, sentence or link the hero renders nothing.
## Basic usage
```astro
<TagHeadlineHero
lineOne="Regional"
tag="Freight"
lineTwo="Partners"
text="Same-week LTL and full truckload across the West Coast."
cta={{ label: "Get a Quote", href: "/quote" }}
background={{ src: "/img/our-fleet.webp" }}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `""` | Chip text. `""` drops it. |
| `lineOne` / `lineTwo` | `string?` | `""` / `""` | Headline lines. `""` drops a line; with no line and no tag there is no heading. |
| `tag` | `string?` | `""` | Orange box after line one. `""` drops it. |
| `text` | `string?` | `""` | Sentence in the bottom row. `""` drops it. |
| `cta` | `{ label, href } \| null` | `null` | Orange pill. `null` drops it. |
| `background` | `{ src?, alt? }?` | none | Omitted, or `src: ""` → generic labelled placeholder. |
| `thumbnail` | `{ src?, alt? } \| null` | none | Omitted or `null` drops the frame; `src: ""` → placeholder. A `src` without `alt` is decorative. |
| `animate` | `boolean?` | `true` | Load-in animation. |
| `fontStylesheet` | `string?` | Google Fonts | `""` skips it. |
| `class`, `id` | | | Root attributes. |
## Behaviour
- **Load-in (measured):** headline from `translateY(20px)`, opacity 0, over
~0.8s; eyebrow and bottom row from 40px, starting ~0.5s later. CSS
animations; off under reduced motion.
- **Pill hover:** `#ff6d45` → `#052931`, arrow disc rotates −45°.
## Images and credits
| File | Slot | Size | Credit |
| :--- | :--- | :--- | :--- |
| `hero-truck.webp` | background | 1920 × 950 | Unsplash RxVtDbR00cg, Unsplash License |
| `card-truck.webp` | thumbnail | 428 × 300 | Unsplash WSknglfFYH0, Unsplash License |
## Approximations
- The navy wash gradient stops (30% / 48% / 72%) are read off the screenshot;
the reference's gradient string was truncated in the capture.
- Tablet headline size (72px) is interpolated.
===== END src/components/TagHeadlineHero.md =====
===== FILE (required): public/tag-headline-hero/hero-truck.webp =====
[binary asset — download https://astro.baysixmedia.com/tag-headline-hero/hero-truck.webp and save it to public/tag-headline-hero/hero-truck.webp]
===== FILE (required): public/tag-headline-hero/card-truck.webp =====
[binary asset — download https://astro.baysixmedia.com/tag-headline-hero/card-truck.webp and save it to public/tag-headline-hero/card-truck.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.