EditorialCard

Renders an editorial content card in one of several layout variants, composing imagery, title, and subtitle into a single linkable promotional tile.

Featured collection

Quiet concrete

Usage

import { EditorialCard, EditorialCardContent, EditorialCardContentProps, EditorialCardImageProps, EditorialCardMedia, EditorialCardMediaProps, EditorialCardProps, EditorialCardStack, EditorialCardStackProps, EditorialCardTicker, EditorialCardTickerProps, EditorialCardVariant } from "@instruments/materia-ui/compositions/editorial-card";

Best practices

Match the media prop to variant: ticker/stack consume images[] (stack uses the first three), while media uses imageSrc/videoSrc - passing the wrong one renders empty media.
Pass renderImage (wrapping next/image) in Next.js - the default is a plain <img> and skips Next optimisation; give media images a meaningful alt.
Set href to make the whole card a single link (it wraps in an <a>); don't nest additional links/buttons inside - use EditorialCard for promo tiles, plain Card for neutral content.

Props

EditorialCard

Prop	Type	Description
alt	`string`	Alt text for media variant
className	`string`	Optional class name
href	`string`	Optional link URL - wraps card in anchor if provided
imageSrc	`string`	Single image URL for media variant
images	`string[]`	Array of image URLs for ticker and stack variants
renderImage	`(props: EditorialCardImageProps) => ReactNode`	Custom image renderer for framework-specific image components (e.g., next/image). Defaults to standard img element.
subtitle	`string`	Optional subtitle text (appears above title)
tickerVelocity	`number`	Velocity for ticker animation (pixels per second)
title(required)	`string`	Main title text
variant(required)	`EditorialCardVariant`	Visual variant of the card
videoSrc	`string`	Video URL for media variant (takes precedence over imageSrc)

EditorialCardContent

Prop	Type	Default	Description
className	`string`
subtitle	`string`
title(required)	`string`

EditorialCardMedia

Prop	Type	Description
alt	`string`	Alt text for the image
className	`string`	Optional class name for the container
imageSrc	`string`	Image URL
renderImage	`(props: EditorialCardImageProps) => ReactNode`	Custom image renderer (e.g., for next/image). Defaults to standard img element.
videoSrc	`string`	Video URL (takes precedence over imageSrc)

EditorialCardStack

Prop	Type	Description
className	`string`	Optional class name for the container
images(required)	`string[]`	Array of image URLs (uses first 3)
renderImage	`(props: EditorialCardImageProps) => ReactNode`	Custom image renderer (e.g., for next/image). Defaults to standard img element.

EditorialCardTicker

Prop	Type	Description
className	`string`	Optional class name for the container
images(required)	`string[]`	Array of image URLs to display in the ticker grid
renderImage	`(props: EditorialCardImageProps) => ReactNode`	Custom image renderer (e.g., for next/image). Defaults to standard img element.
velocity	`number`	Velocity for the ticker animation (pixels per second)

Also exports

interfaceEditorialCardContentProps
interfaceEditorialCardImageProps
interfaceEditorialCardMediaProps
interfaceEditorialCardProps
interfaceEditorialCardStackProps
interfaceEditorialCardTickerProps
typeEditorialCardVariant

Composition

Builds on

Center, Flex, MediaFrame, SwatchFan