Card Grid os-009

Also known as: Hover reveal cards, Index cards, Spotlight grid

Present a set of items as a grid of cards where the hovered or focused card lifts while the rest soften.

Example

text (default for the catalogue)

Header os-001 Fixed site navigation with brand, links, CTA, and mobile drawer. Tabs os-002 Switch between related content sections. Footer os-003 Site footer with copyright and optional multi-column links.

Variants

media (faithful to the 21st.dev source)

Grand Canyon Echoes Sahara Deep Desert Landscape Breath-taking

How it works

Pure CSS, no JS. Hovering anywhere over the grid softens every card (scale 0.97, 60% opacity, 2px blur); the card under the pointer overrides back to full presence and lifts to scale 1.03 — a spotlight without any scripting. Keyboard focus gets the same lift via :focus-visible plus a green focus outline. Cards are real <a> elements (the 21st.dev source used tabindex divs; upgraded during assimilation, no visual change). The text variant adds ODS card chrome — white card, subtle border, accent-green border on hover (replacing the catalogue's old off-system blue). The media variant keeps the source look: image background with a black gradient overlay for text contrast. All motion is disabled under prefers-reduced-motion.

Relationships

Powers this catalogue's own index grid. Compare os-006 Persona Card for a richer single-card specimen, and os-004 Carousel when items should scroll rather than grid.

Parameters

Name	Type	Default	Description
`items`	array	—	Card items: `{title, eyebrow, description, href}` (+ `image` for media)
`variant`	string	`text`	`text` \| `media`
`--pending`	modifier	—	`og-card-grid__card--pending`: half-opacity, non-interactive placeholder

Tokens

--color-bg-card --color-text --color-text-secondary --color-text-muted --color-text-inverse --color-accent --color-border --color-border-focus --text-xs --text-sm --text-lg --weight-light --weight-regular --weight-semibold --weight-bold --leading-normal --tracking-caps --radius-lg --shadow-sm --shadow-md --shadow-lg --spacing-1 --spacing-2 --spacing-4 --spacing-6 --font-mono --transition-base

Provenance

Variant	Proven in	Live at	Date
`media`	21st.dev — @lavikatiyar "Cards" (Hover Reveal Cards, external assimilation)	21st.dev	2026-08-10
`text`	OGANIKO Design System catalogue (this site) — adaptation of the same interaction	catalogue index	2026-08-10

Assimilated on Phil's request to replace the catalogue's off-system index cards with a 21st.dev-sourced component. Translated from React/Tailwind to tokenized vanilla CSS; no license declared on the source listing — re-check before redistributable use.

Code

os-009 · Source: packages/og-card-grid.css ▾

<link rel="stylesheet" href="og-card-grid.css">

<div class="og-card-grid og-card-grid--text" role="list">
  <a class="og-card-grid__card" role="listitem" href="…">
    <span class="og-card-grid__title">Header
      <span class="og-card-grid__eyebrow">os-001</span></span>
    <span class="og-card-grid__desc">One-line description.</span>
  </a>
</div>

<!-- media variant: bg image on the card, content wrapped in
     <span class="og-card-grid__content"> -->