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: "Contact info cards"
Library page: https://astro.baysixmedia.com/components/contact-info-cards/
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/ContactInfoCards.astro =====
---
/**
* ContactInfoCards
*
* Three white, hairline-bordered rounded cards in a row: a pale orange icon
* tile (address pin, phone book, clock), an Outfit title and one or two
* lines under it. Lines with an `href` are links (a map, `tel:`, `mailto:`)
* that turn orange on hover.
*
* Appear on scroll: the cards rise 40px and fade in, staggered 0.1s. Without
* JS or under reduced motion they are at rest.
*
* Reads --tg-* design tokens from any ancestor, with fallbacks.
*/
export type ContactInfoIcon = "pin" | "book" | "clock" | "phone" | "mail";
export interface ContactInfoLine {
text: string;
/** Makes the line a link: a map URL, `tel:` or `mailto:`. */
href?: string;
}
export interface ContactInfoItem {
icon?: ContactInfoIcon;
title: string;
lines: ContactInfoLine[];
}
export interface ContactInfoCardsProps {
items?: ContactInfoItem[];
/** Title element for each card. */
titleLevel?: "h2" | "h3" | "p";
/** The band behind the cards. */
background?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends ContactInfoCardsProps {}
const {
/*
* No default. An address, a phone number and opening hours are facts about
* a real business: omitted, nothing is shown — the catalog demo passes its
* record explicitly through the registry.
*/
items = [],
titleLevel = "h3",
background = "#ffffff",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans: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 external = (href: string) => /^https?:/i.test(href.trim());
const Title = titleLevel;
const list = (items ?? []).filter((i) => i && i.title);
const ICONS: Record<ContactInfoIcon, string> = {
pin: "M15 2.5A10.5 10.5 0 0 0 4.5 13c0 7.6 8.8 16.4 9.8 17.4a1 1 0 0 0 1.4 0c1-1 9.8-9.8 9.8-17.4A10.5 10.5 0 0 0 15 2.5Zm0 14.5a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z",
book: "M8 2.5h15a3 3 0 0 1 3 3v21a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-21a3 3 0 0 1 3-3Zm7.5 7.5a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm0 8.2c-3 0-5.5 1.5-5.5 3.3V23h11v-1.5c0-1.8-2.5-3.3-5.5-3.3ZM27.5 7H29a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1.5Zm0 6H29a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1.5Zm0 6H29a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1.5Z",
clock: "M16 2.5a13.5 13.5 0 1 0 0 27 13.5 13.5 0 0 0 0-27Zm1.4 13.2 5 5a1.4 1.4 0 0 1-2 2l-5.4-5.4a1.4 1.4 0 0 1-.4-1V8.5a1.4 1.4 0 0 1 2.8 0Z",
phone: "M9 14.3a21 21 0 0 0 8.7 8.7l2.9-2.9a1.3 1.3 0 0 1 1.3-.3 15 15 0 0 0 4.7.75 1.3 1.3 0 0 1 1.3 1.3v4.6a1.3 1.3 0 0 1-1.3 1.3A22.3 22.3 0 0 1 4.3 5.4 1.3 1.3 0 0 1 5.6 4.1h4.6a1.3 1.3 0 0 1 1.3 1.3c0 1.6.26 3.2.75 4.7a1.3 1.3 0 0 1-.33 1.3Z",
mail: "M4 6.5h24a1.5 1.5 0 0 1 1.5 1.5v.7L16 16.6 2.5 8.7V8A1.5 1.5 0 0 1 4 6.5Zm-1.5 5.5L16 19.8 29.5 12v12a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 24Z",
};
---
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{list.length > 0 && (
<section class:list={["cic", className]} id={id} data-cic-root style={`--cic-band: ${background};`}>
<ul class="cic-grid">
{
list.map((item, i) => (
<li class="cic-card" data-cic-appear style={`--cic-i: ${i}`}>
<span class="cic-tile" aria-hidden="true">
<svg viewBox="0 0 32 32" width="40" height="40">
<path fill="currentColor" d={ICONS[item.icon ?? "pin"] ?? ICONS.pin} />
</svg>
</span>
<div class="cic-body">
<Title class="cic-title">{item.title}</Title>
{(item.lines ?? []).map((line) => (
<p class="cic-line">
{line.href ? (
<a
class="cic-link"
href={safeHref(line.href)}
target={external(line.href) ? "_blank" : undefined}
rel={external(line.href) ? "noopener noreferrer" : undefined}
>
{line.text}
{external(line.href) && <span class="cic-sr"> (opens in a new tab)</span>}
</a>
) : (
line.text
)}
</p>
))}
</div>
</li>
))
}
</ul>
</section>
)}
<style>
.cic {
--cic-navy: var(--tg-navy, #020e28);
--cic-orange: var(--tg-orange, #fd5523);
--cic-muted: var(--tg-muted, #61697d);
--cic-display: var(--tg-font-display, Outfit, "Outfit Placeholder", ui-sans-serif, system-ui, sans-serif);
--cic-body: var(--tg-font-body, "DM Sans", "DM Sans Placeholder", ui-sans-serif, system-ui, sans-serif);
--cic-ease: cubic-bezier(0.22, 1, 0.36, 1);
box-sizing: border-box;
padding: 60px 20px;
background: var(--cic-band);
font-family: var(--cic-body);
}
.cic *,
.cic *::before,
.cic *::after {
box-sizing: border-box;
}
.cic .cic-grid {
display: grid;
gap: 20px;
max-width: 1224px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.cic-card {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
padding: 16px;
border: 1px solid #e3e6ea;
border-radius: 20px;
background: #fff;
}
.cic-tile {
flex: none;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 12px;
background: #ffe0e0;
color: var(--cic-orange);
}
.cic-tile svg {
width: 28px;
height: 28px;
}
.cic-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.cic .cic-title {
margin: 0 0 2px;
font: 600 20px/1.4 var(--cic-display);
color: var(--cic-navy);
}
.cic .cic-line {
margin: 0;
font: 400 16px/21px var(--cic-body);
color: var(--cic-muted);
overflow-wrap: anywhere;
}
.cic-link {
color: inherit;
text-decoration: none;
transition: color 0.4s cubic-bezier(0.44, 0, 0.56, 1);
}
.cic-link:hover {
color: var(--cic-orange);
}
.cic-link:focus-visible {
outline: 2px solid var(--cic-orange);
outline-offset: 2px;
border-radius: 2px;
}
.cic-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---- appear ---- */
.cic-card {
transition:
opacity 0.8s var(--cic-ease),
transform 0.8s var(--cic-ease);
transition-delay: calc(var(--cic-i, 0) * 0.1s);
}
.cic[data-cic-anim] .cic-card:not([data-in]) {
opacity: 0;
transform: translateY(40px);
}
/* ---- tablet: as many 300px+ cards as fit ---- */
@media (min-width: 810px) {
.cic {
padding: 90px 20px;
}
.cic .cic-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.cic-card {
gap: 20px;
padding: 22px;
border-radius: 30px;
}
.cic-tile {
width: 70px;
height: 70px;
border-radius: 16px;
}
.cic-tile svg {
width: 40px;
height: 40px;
}
.cic .cic-title {
font-size: 24px;
line-height: 34px;
}
}
/* ---- desktop: three 388px cards ---- */
@media (min-width: 1200px) {
.cic {
padding: 120px 20px;
}
.cic .cic-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cic-card {
min-height: 130px;
}
}
@media (prefers-reduced-motion: reduce) {
.cic-card {
transition: none;
}
}
@media (forced-colors: active) {
.cic-card {
border-color: CanvasText;
}
.cic-tile {
border: 1px solid CanvasText;
}
}
</style>
<script>
/*
* Appear on scroll. One IntersectionObserver per instance; each card gets
* `data-in` once. Released on astro:before-swap.
*/
function initContactInfoCards(root: HTMLElement) {
if (root.dataset.cicReady !== undefined) return;
root.dataset.cicReady = "";
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
if (!("IntersectionObserver" in window)) return;
const controller = new AbortController();
const { signal } = controller;
root.dataset.cicAnim = "";
const observer = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
(entry.target as HTMLElement).dataset.in = "";
observer.unobserve(entry.target);
}
},
{ threshold: 0.15 },
);
root.querySelectorAll<HTMLElement>("[data-cic-appear]").forEach((el) => observer.observe(el));
signal.addEventListener("abort", () => observer.disconnect());
document.addEventListener(
"astro:before-swap",
() => {
controller.abort();
delete root.dataset.cicReady;
delete root.dataset.cicAnim;
},
{ once: true, signal },
);
}
const boot = () =>
document.querySelectorAll<HTMLElement>("[data-cic-root]").forEach(initContactInfoCards);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot, { once: true });
} else {
boot();
}
document.addEventListener("astro:page-load", boot);
</script>
===== END src/components/ContactInfoCards.astro =====
===== FILE (supporting): src/components/ContactInfoCards.md =====
# Contact info cards
Three white, hairline-bordered rounded cards in a row — address, phone and
email, opening hours — each with a pale orange icon tile, an Outfit title and
one or two lines. Address, phone and email are links that turn orange on hover.
Catalog page: `/components/contact-info-cards`
## Purpose
The top of a contact page: the three things people look for, before the form.
Part of the Northpass (Transigo-style) family; reads the `--tg-*` tokens.
## Files required
**`ContactInfoCards.astro`** — the whole component. No imports, no icon
library, no images.
`ContactInfoCards.md` — this file.
## Basic usage
```astro
<ContactInfoCards
items={[
{ icon: "pin", title: "Our Address", lines: [{ text: "2250 Harbor Way, Oakland, CA 94607", href: "https://maps.google.com/?q=..." }] },
{ icon: "book", title: "Contact Number", lines: [
{ text: "Phone: +1 (510) 555-0148", href: "tel:+15105550148" },
{ text: "Email: ops@northpass.example", href: "mailto:ops@northpass.example" },
] },
{ icon: "clock", title: "Opening Hours", lines: [{ text: "Monday – Saturday: 7:00 – 19:00" }, { text: "Sunday: Closed" }] },
]}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `items` | `ContactInfoItem[]?` | none — nothing renders | `{ icon?, title, lines: { text, href? }[] }`. |
| `titleLevel` | `"h2" \| "h3" \| "p"?` | `"h3"` | Element for each card title. |
| `background` | `string?` | `#ffffff` | The band. |
| `fontStylesheet` | `string?` | Outfit + DM Sans | `""` skips the link. |
| `class`, `id` | `string?` | — | |
Icons: `"pin" | "book" | "clock" | "phone" | "mail"` (original inline SVGs).
## Behaviour
| Element | Effect | Measured |
| :--- | :--- | :--- |
| Line links hover | `#61697d` → `#fd5523` | `color 0.4s cubic-bezier(0.44, 0, 0.56, 1)`, from the dump |
| Cards appear | fade up from `translateY(40px)`, staggered 0.1s | as measured |
One IntersectionObserver per instance; hidden poses only while the root has
`data-cic-anim`; released on `astro:before-swap`.
## Accessibility
- A `<ul>` of cards; titles are real headings by default.
- `http(s)` links open in a new tab with a visually hidden "(opens in a new
tab)"; `tel:`/`mailto:` open in place. Hrefs pass a scheme allow-list.
- Orange focus outline on each link. Icons are `aria-hidden`.
- The links are inline text, so they fall under the WCAG 2.5.8 inline
exception rather than a 44px target.
## Reduced motion / without JavaScript
Cards at rest; colour transitions remain.
## Responsive
| Width | Layout |
| :--- | :--- |
| ≥ 1200 | three 388px cards, 30px gaps, padding 22, radius 30, 70px tile, title 24/34; section padding 120 |
| 810–1199 | as many ≥300px cards per row as fit |
| < 810 | one column, 20px gaps, padding 16, radius 20, 52px tile, title 20px; section padding 60 |
## Images and credits
None. All icons are original inline SVG.
## Approximations
- **Card border** (`#e3e6ea`) is read from the screenshot; the dump reports
none.
- **Icons** are redrawn originals in the same roles (pin, address book,
clock), not the reference's files.
- Phone and tablet sizes are read from the 390 capture / inferred.
===== END src/components/ContactInfoCards.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: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.
--- 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.