cardMedia

Draws a cell's top media edge to edge, fading its lower half into the cell fill.

tsx

import { cardMedia } from "@sdxc/ui/landing";

Signature

typescript

cardMedia<Node extends Element = Element>(): UtilityMixin<Node>

Returns one mixin for the media wrapper, placed first in the cell.

The events, constants and types its module publishes, each imported from @sdxc/ui/landing too.

Constant

Side of a claim's glyph tile on the spacing scale (2.5rem), shared by every claim icon.

typescript

const ICON_TILE_SIDE = 10

Interface

Options accepted by cardGrid.

Member	Type	Required	Description
`columns`	`number`	Yes	Columns at the `lg` container; the grid shows one track on a phone and two from `md`.
`variant`	`"cards" \| "mosaic" \| "list"`	Yes	Separate raised cards, one hairline-ruled mosaic box, or an un-carded `list`.
`containerName`	`string`	Yes	Named sizing container on the grid's host that the column steps query.

Interface

One container range of a balancedGrid: the query that selects it and the most items one row holds there.

Member	Type	Required	Description
`query`	`string`	Yes	Container size query, such as `(36rem <= width < 48rem)`.
`columns`	`number`	Yes	The most items one row holds in this range.
`columnsFor`	`(count: number) => number`	No	Columns for a run of exactly `count` items in this range, where the even split would still leave a short row the layout should not show.