The 1 file 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: "Call strip hero"
Library page: https://astro.baysixmedia.com/components/call-strip-hero/
Files: 1 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/CallStripHero.astro =====
---
/**
* CallStripHero
*
* A dark, text-forward hero for a service people ring: the service as a
* very large headline, one supporting sentence, and then a full-width strip
* ruled top and bottom in which the verified number is the biggest thing on
* the line — a real `tel:` link — with the main action and the areas served
* beside it. No photograph and no side panel: the number is the design.
*
* Everything but the heading is optional and renders only when supplied: no
* number, no strip entry for it; no areas, no areas line. No default
* number, place, availability or claim. With no heading, nothing renders.
*
* Reads --csh-* custom properties from any ancestor, with fallbacks.
*/
export interface CallStripHeroProps {
/** The page's headline: the service, and the place when it fits. */
heading?: string;
/** A short label above the headline. */
eyebrow?: string;
/** One supporting sentence. */
body?: string;
/** h1 when it carries the page title (the default). */
headingLevel?: "h1" | "h2";
/** The verified number. Omitted or null: no call link. */
phone?: { number: string; label?: string } | null;
/** The main non-phone action (estimate, booking). Omitted or null: none. */
primaryCta?: { label: string; href: string } | null;
/** A quieter second action. Omitted or null: none. */
secondaryCta?: { label: string; href: string } | null;
/** Towns served, as supplied. */
serviceAreas?: string[];
/** Label before the towns. */
serviceAreasLabel?: string;
/** Real availability as supplied ("Mon–Sat 7am–7pm"). */
availability?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends CallStripHeroProps {}
const {
heading = "",
eyebrow = "",
body = "",
headingLevel = "h1",
phone = null,
primaryCta = null,
secondaryCta = null,
serviceAreas = [],
serviceAreasLabel = "Serving",
availability = "",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap",
class: className,
id,
} = Astro.props;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const cta = (c: { label: string; href: string } | null) => (c && c.label?.trim() && c.href && SAFE.test(c.href.trim()) ? { label: c.label.trim(), href: c.href.trim() } : null);
const primary = cta(primaryCta);
const secondary = cta(secondaryCta);
const number = phone?.number?.trim() ?? "";
const tel = number ? `tel:${number.replace(/[^\d+]/g, "")}` : "";
const callLabel = phone?.label?.trim() || "Call";
const areas = serviceAreas.filter((a) => typeof a === "string" && a.trim());
const Heading = headingLevel;
const hasHeading = heading.trim() !== "";
const hasStrip = Boolean(tel || primary || secondary || areas.length || availability.trim());
---
{hasHeading && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{
hasHeading && (
<section class:list={["csh", className]} id={id}>
<div class="csh-inner">
{eyebrow.trim() && <p class="csh-eyebrow">{eyebrow}</p>}
<Heading class="csh-heading">{heading}</Heading>
{body.trim() && <p class="csh-body">{body}</p>}
{hasStrip && (
<div class="csh-strip">
{tel && (
<a class="csh-call" href={tel}>
<span class="csh-call-label">{callLabel}</span>
<span class="csh-call-number">{number}</span>
</a>
)}
{(primary || secondary) && (
<div class="csh-actions">
{primary && (
<a class="csh-primary" href={primary.href}>
{primary.label}
</a>
)}
{secondary && (
<a class="csh-secondary" href={secondary.href}>
{secondary.label}
<span aria-hidden="true"> →</span>
</a>
)}
</div>
)}
{(areas.length > 0 || availability.trim()) && (
<dl class="csh-facts">
{areas.length > 0 && (
<div>
<dt>{serviceAreasLabel}</dt>
<dd>{areas.join(" · ")}</dd>
</div>
)}
{availability.trim() && (
<div>
<dt class="csh-sr">Availability</dt>
<dd>{availability}</dd>
</div>
)}
</dl>
)}
</div>
)}
</div>
</section>
)
}
<style>
.csh {
--csh-bg: var(--csh-surface, #0f1c24);
--csh-ink-color: var(--csh-ink, #f3efe6);
--csh-muted-color: var(--csh-muted, rgb(243 239 230 / 0.7));
--csh-accent-color: var(--csh-accent, #f2b441);
--csh-accent-ink-color: var(--csh-accent-ink, #1a1406);
--csh-rule: rgb(243 239 230 / 0.2);
background: var(--csh-bg);
color: var(--csh-ink-color);
font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.csh-inner {
max-width: 1280px;
margin-inline: auto;
padding: clamp(48px, 8vw, 120px) clamp(20px, 5vw, 48px) clamp(40px, 6vw, 88px);
}
.csh-eyebrow {
margin: 0 0 18px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--csh-accent-color);
}
.csh-heading {
margin: 0;
max-width: 16ch;
font-weight: 900;
font-size: clamp(2.5rem, 1.5rem + 5vw, 5.75rem);
line-height: 0.98;
letter-spacing: -0.03em;
overflow-wrap: break-word;
}
.csh-body {
margin: clamp(18px, 2.5vw, 28px) 0 0;
max-width: 52ch;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
line-height: 1.55;
color: var(--csh-muted-color);
}
/* The strip: ruled top and bottom, the number leading it. */
.csh-strip {
display: grid;
gap: 24px;
margin-top: clamp(32px, 5vw, 56px);
padding-block: 24px;
border-block: 1px solid var(--csh-rule);
}
.csh-call {
display: inline-flex;
flex-direction: column;
align-self: start;
justify-self: start;
gap: 4px;
min-height: 44px;
color: inherit;
text-decoration: none;
}
.csh-call-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--csh-accent-color);
}
.csh-call-number {
font-weight: 800;
font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem);
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
text-decoration: underline;
text-decoration-color: var(--csh-accent-color);
text-decoration-thickness: 3px;
text-underline-offset: 8px;
overflow-wrap: anywhere;
}
.csh-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
}
.csh-primary {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
background: var(--csh-accent-color);
color: var(--csh-accent-ink-color);
font-weight: 800;
text-decoration: none;
}
.csh-secondary {
display: inline-flex;
align-items: center;
min-height: 44px;
color: inherit;
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--csh-rule);
}
.csh-facts {
display: grid;
gap: 8px;
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--csh-muted-color);
}
.csh-facts div {
display: flex;
flex-wrap: wrap;
gap: 0 8px;
}
.csh-facts dt {
font-weight: 700;
color: var(--csh-ink-color);
}
.csh-facts dd {
margin: 0;
}
.csh a:focus-visible {
outline: 3px solid var(--csh-accent-color);
outline-offset: 4px;
}
.csh-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (min-width: 900px) {
/* One line across: number, actions, then the facts pushed to the far edge. */
.csh-strip {
grid-template-columns: auto auto minmax(0, 1fr);
align-items: center;
column-gap: clamp(32px, 4vw, 64px);
}
.csh-facts {
justify-self: end;
text-align: right;
}
.csh-facts div {
justify-content: flex-end;
}
}
@media (prefers-reduced-motion: no-preference) {
.csh-primary,
.csh-secondary {
transition:
background-color 160ms ease,
border-color 160ms ease;
}
}
.csh-secondary:hover {
border-bottom-color: var(--csh-accent-color);
}
</style>
===== END src/components/CallStripHero.astro =====
===== FILE (supporting): src/components/CallStripHero.md =====
# Call strip hero
A dark, text-forward hero for a service people ring: the service as a very
large headline, one supporting sentence, then a full-width strip ruled top and
bottom in which the verified number is the largest thing on the line (a real
`tel:` link), with the main action and the areas served beside it. No
photograph and no side panel.
Catalog page: `/components/call-strip-hero`
## Files required
- **`CallStripHero.astro`** — the whole component. No script, no images.
- `CallStripHero.md` — this file.
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `heading` | `string?` | `""` | The page headline. With no heading nothing renders. |
| `eyebrow`, `body` | `string?` | `""` | Optional label and one sentence. |
| `headingLevel` | `"h1" \| "h2"` | `"h1"` | |
| `phone` | `{ number, label? } \| null` | `null` | The verified number; `tel:` is derived from it. |
| `primaryCta`, `secondaryCta` | `{ label, href } \| null` | `null` | Unsafe hrefs are dropped. |
| `serviceAreas` | `string[]` | `[]` | Towns served, as supplied, joined with `·`. |
| `serviceAreasLabel` | `string?` | `"Serving"` | |
| `availability` | `string?` | `""` | Real hours/availability, as supplied. |
| `fontStylesheet`, `class`, `id` | | | Loads Archivo by default. |
No default number, place, availability or claim. The strip renders only when
something in it is supplied.
===== END src/components/CallStripHero.md =====
--- VERIFIED IN THE COMPONENT LIBRARY ---
Production-ready in the library.
Verified 2026-09-25 at 1440, 1280, 1024, 768, 640, 390, 360, 320px.
Passed: full-page context, keyboard, no javascript, reduced motion, two instances, no overflow, declarations corroborated, lifecycle.
Library source fingerprint: sha256:253940dc1f7b692430d845b5ce1f7adf1b23d699d98832cc2441abb67c5c3990 — MATCHES 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.