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: "Hairline statement hero"
Library page: https://astro.baysixmedia.com/components/hairline-statement-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/HairlineStatementHero.astro =====
---
/**
* HairlineStatementHero
*
* A quiet, typographic hero for a firm that sells judgement: a large
* statement headline on a warm neutral ground, a short paragraph, a
* restrained pair of actions — an outlined button and a text link — and a
* hairline-ruled row of plain facts the firm states about itself (practice
* areas, offices, a registration line). No photo is needed; pass one and it
* sits in a narrow frame beside the statement.
*
* The ask is deliberately understated: the button is outlined, not filled,
* and nothing moves. The statement carries the page.
*
* Nothing here is a claim unless it is passed: the facts row, the credential
* line and the photo each render only from real data, and leave no rule,
* label or gap when they are absent.
*
* No script. Reads --hsh-* tokens from any ancestor, with fallbacks.
*/
export interface HairlineStatementHeroAction {
label: string;
href: string;
}
export interface HairlineStatementHeroFact {
/** Short label, e.g. "Practice areas". */
label: string;
/** What the firm states, e.g. "Estate planning · Probate · Trusts". */
value: string;
}
export interface HairlineStatementHeroProps {
heading: string;
headingLevel?: "h1" | "h2";
/** A short line above the headline — the firm or the discipline. */
eyebrow?: string;
body?: string;
/** The outlined button — "Book a consultation". */
primaryCta?: HairlineStatementHeroAction | null;
/** The text link beside it — "How we work". */
secondaryCta?: HairlineStatementHeroAction | null;
/** Facts in the ruled row. Up to four read well; more wrap. */
facts?: readonly HairlineStatementHeroFact[];
/** A registration or membership line as issued, e.g. "Member, State Bar of California". */
credential?: string;
/** A photo in a narrow frame beside the statement. Omit it for type alone. */
image?: { src: string; alt?: string } | null;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends HairlineStatementHeroProps {}
const {
heading,
headingLevel = "h1",
eyebrow = "",
body = "",
primaryCta = null,
secondaryCta = null,
facts = [],
credential = "",
image = null,
fontStylesheet = "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&display=swap",
class: className,
id,
} = Astro.props;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const rows = (facts ?? [])
.map((f) => ({ label: f.label?.trim() ?? "", value: f.value?.trim() ?? "" }))
.filter((f) => f.label && f.value);
const photo = image?.src ? { src: image.src, alt: image.alt ?? "" } : null;
const Heading = headingLevel;
---
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["hsh", { "hsh--photo": photo }, className]} id={id}>
<div class="hsh-inner">
<div class="hsh-main">
{eyebrow && <p class="hsh-eyebrow">{eyebrow}</p>}
<Heading class="hsh-title">{heading}</Heading>
{body && <p class="hsh-body">{body}</p>}
{
(primaryCta || secondaryCta) && (
<div class="hsh-actions">
{primaryCta && (
<a class="hsh-btn" href={safeHref(primaryCta.href)}>
{primaryCta.label}
</a>
)}
{secondaryCta && (
<a class="hsh-link" href={safeHref(secondaryCta.href)}>
{secondaryCta.label}
<span aria-hidden="true">→</span>
</a>
)}
</div>
)
}
</div>
{
photo && (
<figure class="hsh-figure">
<img src={photo.src} alt={photo.alt} width="480" height="600" loading="eager" decoding="async" />
</figure>
)
}
{
(rows.length > 0 || credential.trim()) && (
<div class="hsh-foot">
{rows.length > 0 && (
<dl class="hsh-facts">
{rows.map((row) => (
<div class="hsh-fact">
<dt>{row.label}</dt>
<dd>{row.value}</dd>
</div>
))}
</dl>
)}
{credential.trim() && <p class="hsh-credential">{credential}</p>}
</div>
)
}
</div>
</section>
<style>
.hsh {
--hsh-surface: var(--hsh-bg, #f6f4ef);
--hsh-ink: var(--hsh-text, #16181d);
--hsh-muted: var(--hsh-text-muted, #545863);
--hsh-rule: var(--hsh-border, #d6d1c6);
--hsh-accent: var(--hsh-brand, #1f3a34);
--hsh-font: var(--hsh-family, "Inter Tight", ui-sans-serif, system-ui, sans-serif);
background: var(--hsh-surface);
color: var(--hsh-ink);
font-family: var(--hsh-font);
}
.hsh *,
.hsh *::before,
.hsh *::after {
box-sizing: border-box;
}
.hsh-inner {
display: grid;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 56px 16px 48px;
}
.hsh-main {
min-width: 0;
}
.hsh-eyebrow {
margin: 0 0 20px;
color: var(--hsh-muted);
font: 500 14px/1.4 var(--hsh-font);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hsh-title {
max-width: 20ch;
margin: 0;
font: 500 clamp(36px, 7vw, 68px) / 1.04 var(--hsh-font);
letter-spacing: -0.03em;
overflow-wrap: anywhere;
}
.hsh-body {
max-width: 54ch;
margin: 24px 0 0;
color: var(--hsh-muted);
font: 400 18px/1.6 var(--hsh-font);
overflow-wrap: anywhere;
}
.hsh-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: 32px;
}
.hsh-btn {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 12px 22px;
border: 1px solid var(--hsh-ink);
border-radius: 2px;
color: var(--hsh-ink);
font: 500 16px/1.2 var(--hsh-font);
text-decoration: none;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.hsh-btn:hover {
background: var(--hsh-ink);
color: var(--hsh-surface);
}
.hsh-link {
display: inline-flex;
gap: 8px;
padding: 6px 0;
color: var(--hsh-accent);
font: 500 16px/1.4 var(--hsh-font);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
}
.hsh-btn:focus-visible,
.hsh-link:focus-visible {
outline: 2px solid var(--hsh-accent);
outline-offset: 4px;
}
.hsh-figure {
margin: 0;
min-width: 0;
}
.hsh-figure img {
display: block;
width: 100%;
max-width: 420px;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border: 1px solid var(--hsh-rule);
padding: 8px;
background: var(--hsh-surface);
}
.hsh-foot {
display: grid;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--hsh-rule);
}
.hsh-facts {
display: grid;
gap: 20px;
margin: 0;
}
.hsh-fact {
min-width: 0;
}
.hsh-fact dt {
margin: 0 0 6px;
color: var(--hsh-muted);
font: 500 12px/1.4 var(--hsh-font);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hsh-fact dd {
margin: 0;
font: 500 16px/1.5 var(--hsh-font);
overflow-wrap: anywhere;
}
.hsh-credential {
margin: 0;
color: var(--hsh-muted);
font: 400 14px/1.5 var(--hsh-font);
overflow-wrap: anywhere;
}
@media (min-width: 720px) {
.hsh-facts {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* Every fact carries its own rule, so a wrapped row starts ruled too. */
.hsh-fact {
padding-left: 20px;
border-left: 1px solid var(--hsh-rule);
}
}
@media (min-width: 960px) {
.hsh-inner {
padding: 104px 32px 64px;
gap: 56px;
}
.hsh--photo .hsh-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
align-items: end;
}
.hsh--photo .hsh-foot {
grid-column: 1 / -1;
}
}
@media (prefers-reduced-motion: reduce) {
.hsh-btn {
transition: none;
}
}
</style>
===== END src/components/HairlineStatementHero.astro =====
===== FILE (supporting): src/components/HairlineStatementHero.md =====
# Hairline statement hero
A quiet, typographic hero for a firm that sells judgement — a law practice,
an accountancy, an advisory or consulting firm, a specialist agency. A large
statement headline on a warm neutral ground, a short paragraph, an outlined
button beside a text link, and a hairline-ruled row of plain facts the firm
states about itself. No photo is needed; pass one and it sits in a narrow
frame beside the statement.
Catalog page: `/components/hairline-statement-hero`
## Files required
- **`HairlineStatementHero.astro`** — the whole component. No script, no images.
- `HairlineStatementHero.md` — this file.
## Basic usage
```astro
<HairlineStatementHero
eyebrow="Marlow Advisory"
heading="Independent advice for owners planning an exit."
body="We work with founders two to five years before a sale."
primaryCta={{ label: "Book a consultation", href: "/consultation" }}
secondaryCta={{ label: "How we work", href: "/approach" }}
facts={[
{ label: "Focus", value: "Founder-owned firms, $5–50M" },
{ label: "Offices", value: "San Francisco" },
]}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `heading` | `string` | **required** | The statement. |
| `headingLevel` | `"h1" \| "h2"` | `"h1"` | `h2` for a second use on one page. |
| `eyebrow` | `string?` | `""` | The firm or discipline. |
| `body` | `string?` | `""` | A short paragraph. |
| `primaryCta` | `{ label, href } \| null` | `null` | Outlined button. |
| `secondaryCta` | `{ label, href } \| null` | `null` | Text link with an arrow. |
| `facts` | `{ label, value }[]?` | `[]` | The ruled row. Entries missing either half are dropped. |
| `credential` | `string?` | `""` | A registration or membership line as issued. |
| `image` | `{ src, alt? } \| null` | `null` | Photo in a narrow frame. |
| `fontStylesheet` | `string?` | Inter Tight | `""` skips it. |
| `class`, `id` | | | Root attributes. |
## Actions
The ask is deliberately understated: the primary action is an outlined
button, not a filled one, and the secondary is a text link. Use a more
conversion-led hero where the call to action should dominate. Neither action
is required; with neither, the hero is a statement.
## Trust data
The facts row and the credential line render only when passed and leave no
rule or gap when absent. Nothing — practice areas, offices, memberships — has
a default.
## Media
No photo is needed and none is shipped. With `image`, from 960px the photo
sits in a 360px column beside the statement, in a hairline frame; below that
it follows the copy.
## Responsive behaviour
- The headline scales from 36px to 68px.
- Facts stack below 720px and sit in ruled columns above it; every fact has
its own left rule, so a wrapped row stays ruled.
## Motion
None beyond 0.15s colour transitions on the button, removed under
`prefers-reduced-motion: reduce`.
## Accessibility
- One `<h1>` by default.
- The facts row is a `<dl>`: each label is a `<dt>`, each value a `<dd>`.
- Visible 2px focus outline on both actions.
## Tokens
`--hsh-bg`, `--hsh-text`, `--hsh-text-muted`, `--hsh-border`, `--hsh-brand`,
`--hsh-family`.
## Selection
Professional, minimal and premium in tone; no motion; `supporting` pressure,
because the design is built around the statement rather than the ask. No
market is recorded — it suits any firm that leads with expertise. It needs no
client material; a photo is an alternate presentation.
===== END src/components/HairlineStatementHero.md =====
--- 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.