InfoCards

Overview

InfoCards is a CORE-OWNED section component in src/core/components/sections/InfoCards.astro. It renders a grid of cards from a structured data array, with each card delegated to SectionCard. Cards support badges, media, and action links.

InfoCards and FeatureGrid share the same architecture. The only difference is that FeatureGrid items support an icon field while InfoCards items do not. Use InfoCards for standard content cards; use FeatureGrid when cards benefit from a visual icon prefix.

Props

Prop	Type	Default	Description
`columns`	`2` \| `3`	`3`	Number of grid columns (responsive auto-fit)
`cardOrientation`	`"vertical"` \| `"horizontal"`	`"vertical"`	Card layout direction (passed to SectionCard)
`fullCardClick`	`boolean`	`true`	Enable full-card click area for single-link cards
`cardBackground`	`SectionBackground`	—	Default card surface variant (overridable per item)
`items`	`InfoCardItem[]`	required	Array of card data objects (see Items below)
`class`	`string`	—	Additional CSS classes

All other HTML attributes (id, aria-*, data-*, etc.) are forwarded to the root <div> via attribute passthrough.

Items

Each item in the items array has this shape:

Field	Type	Description
`title`	`string`	Card heading text
`body`	`string`	Card body text
`badge`	`string`	Small label below the heading
`media`	`SectionMedia`	Image with `src` and `alt`
`links`	`SectionCardLink[]`	Action links with `href`, `label`, and optional `external`
`fullCardClick`	`boolean`	Per-item override of the section-level `fullCardClick`
`cardBackground`	`SectionBackground`	Per-item override of the section-level `cardBackground`

Behavior

Column layout

The grid uses CSS auto-fit with minimum column widths:

2 columns: minmax(min(100%, 24rem), 1fr) — cards fill two columns on wide viewports, collapse to one on narrow
3 columns: minmax(min(100%, 20rem), 1fr) — same pattern with a smaller minimum

Card delegation

Each item is rendered as a SectionCard. All card behavior (full-card click, orientation, background variants, title link) is inherited from SectionCard. See the SectionCard reference for details.

Heading composition

InfoCards does not render its own heading. Callers compose headings as siblings before the component, inside the same LayoutSection:

Visible heading: Place a <Heading> before <InfoCards> inside the same LayoutSection
Screen-reader-only naming: Use the LayoutSection label prop to set aria-label on the wrapping <section>

CSS API

BEM root class: info-cards

Class	Element
`.info-cards`	Component root (`<div>`)
`.info-cards__grid`	Grid container (`<ul>`)
`.info-cards__item`	Grid item (`<li>`)

Modifier classes applied automatically:

Modifier	Applied when
`.info-cards__grid--2`	`columns={2}`
`.info-cards__grid--3`	`columns={3}`

These classes are available as CSS API hooks for site-level overrides in src/site/styles/.

Usage

<LayoutSection>
  <Heading level={2}>Latest Updates</Heading>
  <InfoCards
    items={[
      {
        title: "New Feature",
        body: "We shipped a new feature this week.",
        badge: "New",
        links: [{ href: "/articles/new-feature/", label: "Read more" }],
      },
      {
        title: "Case Study",
        body: "How our client improved performance by 40%.",
        media: { src: "/images/case-study.jpg", alt: "Case study" },
        links: [{ href: "/articles/case-study/", label: "Read more" }],
      },
    ]}
    columns={2}
    cardOrientation="horizontal"
  />
</LayoutSection>

Note: To customize InfoCards appearance at the site level, target the BEM classes above in site-owned stylesheets rather than modifying the core component. Card-level styling is controlled via SectionCard’s CSS API.

On this page