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: "Service card grid"
Library page: https://astro.baysixmedia.com/components/service-card-grid/
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/ServiceCardGrid.astro =====
---
/**
* ServiceCardGrid
*
* A light, scannable services section: a short header, then a grid of plain
* cards — an icon tile, the service name, a line of description, an optional
* small label and an optional link — with an optional call to action under
* the grid. Built for three to eight services a visitor should take in at a
* glance, not browse through: no tabs, no carousel, nothing hidden.
*
* Icons are the caller's. A card takes SVG path data for a 24×24 viewBox;
* without it the tile shows the card's number instead, so the grid still
* reads as designed. No icon set ships with the component, so nothing in it
* belongs to one trade.
*
* Nothing renders that was not passed: no services, labels or links have
* defaults. Given no services it renders its header alone.
*
* No script. Reads --scg-* tokens from any ancestor, with fallbacks.
*/
export interface ServiceCardGridItem {
/** The service name. */
title: string;
/** One or two sentences. */
description?: string;
/** SVG path data for a 24×24 viewBox, drawn as a stroke. Omit for the card's number. */
icon?: string | readonly string[];
/** A small label above the title, e.g. "Same day". Only a fact the business states. */
label?: string;
/** Makes the whole card a link. */
href?: string;
}
export interface ServiceCardGridProps {
heading: string;
headingLevel?: "h2" | "h3";
eyebrow?: string;
intro?: string;
services?: readonly ServiceCardGridItem[];
/** Most columns at the widest width. */
columns?: 2 | 3 | 4;
/** Text on each linked card's arrow line. */
linkLabel?: string;
/** An optional action under the grid. */
cta?: { label: string; href: string } | null;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends ServiceCardGridProps {}
const {
heading,
headingLevel = "h2",
eyebrow = "",
intro = "",
services = [],
columns = 3,
linkLabel = "Learn more",
cta = null,
fontStylesheet = "https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap",
class: className,
id,
} = Astro.props;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const cards = (services ?? [])
.filter((s) => s && typeof s.title === "string" && s.title.trim())
.map((s, i) => ({
title: s.title.trim(),
description: s.description?.trim() ?? "",
label: s.label?.trim() ?? "",
href: s.href ? safeHref(s.href) : "",
paths: (Array.isArray(s.icon) ? s.icon : s.icon ? [s.icon] : []).filter((d) => typeof d === "string" && d.trim()),
number: String(i + 1).padStart(2, "0"),
}));
const cols = [2, 3, 4].includes(columns) ? columns : 3;
const Heading = headingLevel;
const CardTitle = headingLevel === "h2" ? "h3" : "h4";
---
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["scg", className]} id={id} style={`--scg-cols: ${cols};`}>
<div class="scg-inner">
<header class="scg-head">
{eyebrow && <p class="scg-eyebrow">{eyebrow}</p>}
<Heading class="scg-title">{heading}</Heading>
{intro && <p class="scg-intro">{intro}</p>}
</header>
{
cards.length > 0 && (
<ul class="scg-grid" role="list">
{cards.map((card) => {
const Tag = card.href ? "a" : "div";
return (
<li class="scg-item">
<Tag class:list={["scg-card", { "scg-card--link": card.href }]} href={card.href || undefined}>
<span class="scg-tile" aria-hidden="true">
{card.paths.length > 0 ? (
<svg viewBox="0 0 24 24" focusable="false">
{card.paths.map((d) => (
<path d={d} />
))}
</svg>
) : (
<span class="scg-num">{card.number}</span>
)}
</span>
{card.label && <span class="scg-label">{card.label}</span>}
<CardTitle class="scg-card-title">{card.title}</CardTitle>
{card.description && <p class="scg-desc">{card.description}</p>}
{card.href && (
<span class="scg-more">
{linkLabel}
<span aria-hidden="true">→</span>
</span>
)}
</Tag>
</li>
);
})}
</ul>
)
}
{
cta && (
<p class="scg-cta-row">
<a class="scg-cta" href={safeHref(cta.href)}>
{cta.label}
</a>
</p>
)
}
</div>
</section>
<style>
.scg {
--scg-surface: var(--scg-bg, #f5f7fa);
--scg-card-bg: var(--scg-card, #ffffff);
--scg-ink: var(--scg-text, #0f1b2d);
--scg-muted: var(--scg-text-muted, #475569);
--scg-accent: var(--scg-brand, #1d4ed8);
--scg-tile-bg: var(--scg-tile, #e8eefc);
--scg-rule: var(--scg-border, #d9dee7);
--scg-font: var(--scg-family, Manrope, ui-sans-serif, system-ui, sans-serif);
background: var(--scg-surface);
color: var(--scg-ink);
font-family: var(--scg-font);
}
.scg *,
.scg *::before,
.scg *::after {
box-sizing: border-box;
}
.scg-inner {
max-width: 1200px;
margin: 0 auto;
padding: 56px 16px;
}
.scg-head {
max-width: 680px;
}
.scg-eyebrow {
margin: 0 0 12px;
color: var(--scg-accent);
font: 700 13px/1.4 var(--scg-font);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.scg-title {
margin: 0;
font: 800 clamp(28px, 5vw, 42px) / 1.12 var(--scg-font);
letter-spacing: -0.015em;
overflow-wrap: anywhere;
}
.scg-intro {
margin: 16px 0 0;
color: var(--scg-muted);
font: 500 17px/1.6 var(--scg-font);
overflow-wrap: anywhere;
}
.scg-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 36px 0 0;
padding: 0;
list-style: none;
}
.scg-item {
display: flex;
min-width: 0;
}
.scg-card {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 0;
padding: 24px;
border: 1px solid var(--scg-rule);
border-radius: 12px;
background: var(--scg-card-bg);
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease;
}
.scg-card--link:hover {
border-color: var(--scg-accent);
}
.scg-card--link:focus-visible,
.scg-cta:focus-visible {
outline: 3px solid var(--scg-accent);
outline-offset: 3px;
}
.scg-tile {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 6px;
border-radius: 10px;
background: var(--scg-tile-bg);
color: var(--scg-accent);
}
.scg-tile svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.scg-num {
font: 800 16px/1 var(--scg-font);
letter-spacing: 0.02em;
}
.scg-label {
max-width: 100%;
padding: 3px 10px;
overflow-wrap: anywhere;
border-radius: 999px;
background: var(--scg-surface);
color: var(--scg-muted);
font: 700 12px/1.4 var(--scg-font);
letter-spacing: 0.02em;
}
.scg-card-title {
margin: 0;
font: 800 19px/1.3 var(--scg-font);
overflow-wrap: anywhere;
}
.scg-desc {
margin: 0;
color: var(--scg-muted);
font: 500 15px/1.6 var(--scg-font);
overflow-wrap: anywhere;
}
.scg-more {
display: inline-flex;
gap: 6px;
margin-top: auto;
padding-top: 6px;
color: var(--scg-accent);
font: 700 15px/1.4 var(--scg-font);
}
.scg-cta-row {
margin: 32px 0 0;
}
.scg-cta {
display: inline-flex;
align-items: center;
min-height: 50px;
padding: 12px 24px;
border-radius: 10px;
background: var(--scg-ink);
color: var(--scg-surface);
font: 700 16px/1.2 var(--scg-font);
text-decoration: none;
}
.scg-cta:hover {
background: var(--scg-accent);
}
@media (min-width: 640px) {
.scg-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.scg-inner {
padding: 88px 32px;
}
.scg-grid {
grid-template-columns: repeat(var(--scg-cols), minmax(0, 1fr));
gap: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.scg-card {
transition: none;
}
}
</style>
===== END src/components/ServiceCardGrid.astro =====
===== FILE (supporting): src/components/ServiceCardGrid.md =====
# Service card grid
A light, scannable services section for a local business: a short header,
then a grid of plain cards — an icon tile, the service name, a line of
description, an optional small label and an optional link — with an optional
action under the grid. Built for three to eight services taken in at a
glance: no tabs, no carousel, nothing hidden. Pairs with the service area
hero and the area contact section (same palette and type) but depends on
neither.
Catalog page: `/components/service-card-grid`
## Files required
- **`ServiceCardGrid.astro`** — the whole component. No script, no images, no icon set.
- `ServiceCardGrid.md` — this file.
## Basic usage
```astro
<ServiceCardGrid
eyebrow="What we do"
heading="Plumbing services across the Peninsula"
services={[
{ title: "Drain cleaning", description: "Blocked sinks and main lines cleared.", href: "/services/drains",
icon: ["M4 8h10a3 3 0 0 1 3 3v9", "M4 5v6", "M14 20h6"] },
{ title: "Water heaters", description: "Tank and tankless, repaired or replaced.", href: "/services/water-heaters" },
]}
cta={{ label: "See all services", href: "/services" }}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `heading` | `string` | **required** | The section heading. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | Card titles are one level below. |
| `eyebrow` | `string?` | `""` | Short line above the heading. |
| `intro` | `string?` | `""` | One or two sentences under the heading. |
| `services` | `ServiceCardGridItem[]?` | `[]` | See below. None — only the header renders. |
| `columns` | `2 \| 3 \| 4` | `3` | Most columns, from 1024px. |
| `linkLabel` | `string?` | `"Learn more"` | Text on each linked card's arrow line. |
| `cta` | `{ label, href } \| null` | `null` | A button under the grid. |
| `fontStylesheet` | `string?` | Manrope | `""` skips it. |
| `class`, `id` | | | Root attributes. |
Each service: `title` (required), `description?`, `icon?`, `label?`, `href?`.
## Icons
`icon` is SVG path data — one string or an array — for a 24×24 viewBox, drawn
as a 1.8px round stroke in the brand colour. No icon set ships with the
component, so it belongs to no trade. A card without an icon shows its number
(`01`, `02` …) in the same tile, so a mixed or icon-free grid still looks
designed.
## Links and the call to action
A card with `href` is one link — the whole card — with an arrow line reading
`linkLabel`. Without `href` it is a plain card and not focusable. `cta` is a
dark button under the grid; there is no default action and no phone button:
this is a supporting section, and the page's call-to-action lives in the hero
and the contact section.
## Trust data
Nothing renders that was not passed. There are no default services, labels,
prices, guarantees or links. `label` is for a fact the business states
("24/7", "Same day") — don't invent one to fill the slot.
## Responsive behaviour
- One column below 640px, two from 640px, `columns` from 1024px.
- Cards in a row share a height; the arrow line sits at the bottom.
- Long titles and descriptions wrap anywhere rather than overflow.
## Motion
A 0.15s border-colour change on hovering a linked card, removed under
`prefers-reduced-motion: reduce`.
## Accessibility
- The grid is a list; each card's title is a real heading one level below the section's.
- Icon tiles are `aria-hidden`.
- Linked cards and the button show a 3px focus outline in the brand colour.
## Tokens
`--scg-bg`, `--scg-card`, `--scg-text`, `--scg-text-muted`, `--scg-brand`,
`--scg-tile`, `--scg-border`, `--scg-family` — set on any ancestor to recolour it.
## Selection
Role `services`; homepage, service, location and landing pages. No market:
plain cards with caller-supplied icons suit any trade, so it isn't tagged
home-services just to win local briefs. Professional and minimal; grid, no
media, full-bleed, light; balanced; no motion; supporting pressure. It needs
no client material.
===== END src/components/ServiceCardGrid.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.