cardGrid

Lays a grid's direct children as cards or a mosaic in one class.

tsx

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

Usage

Lays a grid's direct children as cards or a mosaic in one class, so the cell fill, edge and per-corner radii never compete across cascade layers. A lone last cell spans the rest of its row at every step, unless the cells set their own data-span or the grid is a list. In cards, the corners on the grid's outer edge take --ui-landing-card-radius-outer; once any cell carries data-corner, the lg step rounds only the corners those cells list, so a page with custom spans names its own outer corners.

Signature

typescript

cardGrid<Node extends Element = Element>({
	columns,
	variant,
	containerName,
}: CardGridOptions): UtilityMixin<Node>

Returns one mixin for the element whose children are the cells.

Parameters

Parameter	Type	Required	Description
`{ columns, variant, containerName, }`	`CardGridOptions`	Yes

Examples

tsx

<div mix={[cardGrid({ columns: 3, variant: "cards", containerName: "ui-landing-bento" })]}>{cells}</div>

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

Constant

ICON_TILE_SIDE

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

CardGridOptions

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.