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: "Rule title banner"
Library page: https://astro.baysixmedia.com/components/rule-title-banner/
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/RuleTitleBanner.astro =====
---
/**
* RuleTitleBanner
*
* An inner-page title band that needs no photograph: a small eyebrow set
* against a hairline, a large serif page title, and — when there is one — a
* short introduction beside it on wide screens, all resting on a heavy rule
* in the accent colour. It names the page; it does not pitch.
*
* The title is the page's heading (h1 by default). With no title the
* banner renders nothing. Eyebrow and introduction render only when given.
*
* Reads --rtb-* custom properties from any ancestor, with fallbacks.
* Step 39: the faces come through --rtb-display (title; Fraunces by default) and --rtb-family (eyebrow and
* introduction; Archivo), and the column through --rtb-grid-max / --rtb-grid-gutter (desktop), so a site
* can put the title on its page grid and set its own type — with no input the banner is exactly as it was.
*/
export interface RuleTitleBannerProps {
/** A short label above the title. */
eyebrow?: string;
/** The page title. */
title?: string;
/** One or two sentences introducing the page. */
intro?: string;
/** h1 when it carries the page title (the default). */
headingLevel?: "h1" | "h2";
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends RuleTitleBannerProps {}
const {
eyebrow = "",
title = "",
intro = "",
headingLevel = "h1",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Archivo:wght@500;600&display=swap",
class: className,
id,
} = Astro.props;
const Heading = headingLevel;
const hasTitle = title.trim() !== "";
---
{hasTitle && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{
hasTitle && (
<section class:list={["rtb", className]} id={id} data-has-intro={intro.trim() ? "" : undefined}>
<div class="rtb-inner">
{eyebrow.trim() && (
<p class="rtb-eyebrow">
<span>{eyebrow}</span>
</p>
)}
<div class="rtb-body">
<Heading class="rtb-title">{title}</Heading>
{intro.trim() && <p class="rtb-intro">{intro}</p>}
</div>
</div>
</section>
)
}
<style>
.rtb {
--rtb-bg: var(--rtb-surface, #f5f1ea);
--rtb-ink-color: var(--rtb-ink, #1b2420);
--rtb-muted-color: var(--rtb-muted, #55605a);
--rtb-accent-color: var(--rtb-accent, #2f5d4a);
--rtb-hair: rgb(27 36 32 / 0.18);
background: var(--rtb-bg);
color: var(--rtb-ink-color);
border-bottom: 6px solid var(--rtb-accent-color);
}
.rtb-inner {
max-width: var(--rtb-grid-max, 1200px);
margin-inline: auto;
padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 48px) clamp(36px, 5vw, 64px);
}
.rtb-eyebrow {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 clamp(20px, 3vw, 32px);
font: 600 0.8125rem/1.3 var(--rtb-family, "Archivo", ui-sans-serif, system-ui, sans-serif);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--rtb-accent-color);
}
/* The hairline runs from the label to the edge of the column. */
.rtb-eyebrow::after {
content: "";
flex: 1;
height: 1px;
background: var(--rtb-hair);
}
.rtb-body {
display: grid;
gap: clamp(16px, 3vw, 28px);
}
.rtb-title {
margin: 0;
max-width: 18ch;
font-family: var(--rtb-display, "Fraunces", ui-serif, Georgia, "Times New Roman", serif);
font-weight: 500;
font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.75rem);
line-height: 1.02;
letter-spacing: -0.02em;
overflow-wrap: break-word;
hyphens: auto;
}
.rtb-intro {
margin: 0;
max-width: 46ch;
font: 500 clamp(1rem, 0.95rem + 0.3vw, 1.1875rem) / 1.55 var(--rtb-family, "Archivo", ui-sans-serif, system-ui, sans-serif);
color: var(--rtb-muted-color);
}
/* The site gutter applies on desktop only; at 960px and up the default clamp is already its 48px maximum. */
@media (min-width: 960px) {
.rtb-inner {
padding-inline: var(--rtb-grid-gutter, clamp(20px, 5vw, 48px));
}
}
@media (min-width: 900px) {
/* With an introduction the title and the intro share the row, the intro settling on the baseline. */
.rtb[data-has-intro] .rtb-body {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
align-items: end;
column-gap: clamp(32px, 5vw, 72px);
}
}
</style>
===== END src/components/RuleTitleBanner.astro =====
===== FILE (supporting): src/components/RuleTitleBanner.md =====
# Rule title banner
An inner-page title band that needs no photograph: an eyebrow against a
hairline, a large serif page title, an optional short introduction beside it
on wide screens, all resting on a heavy accent rule. It names the page; it
does not pitch.
Catalog page: `/components/rule-title-banner`
## Files required
- **`RuleTitleBanner.astro`** — the whole component. No script, no images.
- `RuleTitleBanner.md` — this file.
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `title` | `string?` | `""` | The page heading. With no title the banner renders nothing. |
| `eyebrow` | `string?` | `""` | Label above the title. Empty drops it and its hairline. |
| `intro` | `string?` | `""` | One or two sentences; beside the title from 900px. |
| `headingLevel` | `"h1" \| "h2"` | `"h1"` | |
| `fontStylesheet`, `class`, `id` | | | Loads Fraunces and Archivo by default. |
Theme with `--rtb-surface`, `--rtb-ink`, `--rtb-muted`, `--rtb-accent`.
===== END src/components/RuleTitleBanner.md =====
--- VERIFIED IN THE COMPONENT LIBRARY ---
Production-ready in the library.
Verified 2026-09-27 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:331de22333f67416e9dbee694cc4064f331d2e4b70306630059e279743fa20ec — 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.