Service Grid

Example

Illustrative OGANIKO copy and local destinations. Resize the window: two cards fill the row, then stack when space is limited.

Open the standalone example. It uses generated tokens and the actual primitive and pattern CSS, with no JavaScript or React.

Purpose and fit

Help readers choose a service, case study or story. Use a short, curated list of destinations with descriptions. Do not use for a product wall, gallery, pricing comparison, selection workflow or searchable results. Grid arranges children; this pattern coordinates introduction, list, card content and named navigation.

Anatomy, variants and states

Labelled Section → Container and Stack → heading, optional introduction, Grid list → flat Card → optional image, heading, description, Link. One flat appearance; no size variants. Images are optional content. Links retain normal, visited, hover and focus-visible states. An empty list omits the section.

Content guidance

Supply a section title and unique item IDs, titles, descriptions, destinations and descriptive action labels. Write “Explore digital craft” rather than repeated “Learn more”. Choose real website copy and routes. Meaningful images need useful alt text; decorative images use empty alt. Provide intrinsic width and height. Missing media leaves no placeholder. Long content wraps without truncation.

Responsive behaviour

Container sets the readable page width; Grid fits columns to its available space. One or two cards fill the row without reserving an empty third column. Narrow parents stack cards even on wide screens. Images keep their intrinsic proportions; no fixed height hides content.

Accessibility and motion

The section has a heading label, cards form a native list, and only the named links receive focus. Tab and Shift+Tab move between destinations; Enter follows a link. Choose the section heading level to fit the page; card headings follow one level below. No custom accessibility behaviour, Base UI or Motion is needed.

No entrance, lift, blur or sibling animation. The existing Link primitive provides CSS colour feedback using duration-fast and ease-standard. Reduced motion makes that feedback immediate; all content and navigation remain available.

Token and component dependencies

Load tokens/oganiko.css, styles/primitives.css, then components/service-grid/service-grid.css. Section, Container, Stack, Grid, Heading, Text, Card and Link own their visual decisions. The pattern adds only list/row coordination using spacing-0; there are no new foundation values or motion recipes.

Key inherited inputs: container-max, container-padding, grid-item-min, spacing-4/6/12, color-bg-card, color-border, radius-lg, font-primary, color-text, color-text-secondary, focus-width and color-focus-ring.

Implementation and review

Native HTML is the reference; the optional ServiceGrid React binding accepts title, intro, items and headingLevel (2–5). It reuses Card exports. The repository remains copy-and-adapt; no published component package is implied.

Storybook → Patterns / ServiceGrid covers default, long content, optional media, a single item, an empty set and native HTML. Review narrow, theme and Full/Reduced motion controls. Automated Chromium checks cover keyboard, focus, navigation, overflow, contrast and operation without JavaScript. Manual screen-reader review and the real reference-page acceptance remain pending.

Canonical contract: components/service-grid/SPEC.md. Import and migration guide: docs/website-patterns.md. Build the standalone preview with npm run build; do not edit its generated HTML.

Migration

The legacy og-card-grid files remain available. This is an additive replacement for the service-choice use case, not a class alias. Migrate a consumer's markup deliberately to Grid, Card and visible Link actions; remove the old stylesheet only when that consumer no longer uses it. The FAQ and specialised lightbox are not promoted here.