4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T18c7,/** * CardList — a grid of linked cards: blog posts, changelog entries, case studies. * * The generic "list of things with an image, a title and a date" section that * every marketing site needs and that does not warrant its own component per * content type. * * a11y: same stretched-link pattern as `FeatureGrid` — the anchor sits on the * title and its hit area covers the card, so the accessible name is the title * rather than the title plus the excerpt plus the date. Dates are `` with * a machine-readable `dateTime`, and the human label is whatever you pass, so a * relative label like "3 days ago" stays unambiguous. * * Cover images are `alt=""` by default: on a card whose title is right there, * the image is decoration. Pass `imageAlt` when it genuinely carries meaning. * * Dependencies: react, @/lib/types, @/lib/utils, * @/components/ui/badge, @/components/ui/container, @/components/ui/heading, * @/components/ui/section, @/components/ui/section-header. */ import type { ElementType } from "react" import type { HeadingLevel, ImageComponent, LinkComponent, ListSlotProps, SectionBaseProps, } from "@/lib/types" import { cn, slugId } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Container } from "@/components/ui/container" import { Heading } from "@/components/ui/heading" import { Section } from "@/components/ui/section" import { SectionHeader } from "@/components/ui/section-header" export interface CardItem { title: string href: string description?: string imageSrc?: string /** Only set this when the image carries meaning the title does not. */ imageAlt?: string /** ISO 8601, for the `datetime` attribute. */ dateTime?: string /** Human label for the date, e.g. "12 March 2026" or "3 days ago". */ dateLabel?: string tag?: string external?: boolean id?: string } export interface CardListProps extends SectionBaseProps, ListSlotProps { items: CardItem[] title?: string eyebrow?: string description?: string image?: ImageComponent link?: LinkComponent columns?: 2 | 3 /** `card` adds a border and background to each entry. `plain` is a simple list. */ variant?: "card" | "plain" itemHeadingLevel?: HeadingLevel align?: "start" | "center" } export function CardList({ items, title, eyebrow, description, image, link, columns = 3, variant = "card", itemHeadingLevel, align = "start", listAs, itemAs, headingLevel = 2, as, spacing = "md", className, id, }: CardListProps) { const List = (listAs ?? "ul") as ElementType const Item = (itemAs ?? "li") as ElementType const Image = (image ?? "img") as ElementType const Link = (link ?? "a") as ElementType const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined const itemLevel = itemHeadingLevel ?? (Math.min(headingLevel + 1, 6) as HeadingLevel) return (

{title ? ( ) : null} {items.map((item) => ( {item.imageSrc ? ( {item.imageAlt

) : null}

{item.tag || item.dateLabel ? (

{item.tag ? ( {item.tag} ) : null} {item.dateLabel ? ( {item.dateLabel} ) : null}

) : null} {item.title} {item.external ? ( (opens in a new tab) ) : null} {item.description ? (

{item.description}

) : null}

))}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@facade","registryDependencies":["https://facadeui.dev/r/badge.json","https://facadeui.dev/r/container.json","https://facadeui.dev/r/heading.json","https://facadeui.dev/r/section.json","https://facadeui.dev/r/section-header.json","https://facadeui.dev/r/types.json","https://facadeui.dev/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/sections/card-list.tsx","content":"$50","type":"registry:component","target":"components/sections/card-list.tsx"}],"className":"h-[70svh] min-h-80"}]]}]